HarmonyOS NEXT應用開發—聽歌識曲水波紋特效案例

生活就是这么怪發表於2024-04-23
特效

介紹

在很多應用中，會出現點選按鈕出現水波紋的特效。

效果圖預覽

image

使用說明

  1. 進入頁面，點選按鈕，觸發水波紋動畫。
  2. 再次點選按鈕，停止水波紋動畫。

實現思路

本例涉及的關鍵特性和實現方案如下：

  1. 要實現存在兩個連續的漣漪，需要兩個層疊的Stack分別以一定延遲進行相同的動畫。原始碼參考WaterRipples.ets。
Stack()
.ripplesStyle()
.opacity(this.immediatelyOpacity)
.scale(this.immediatelyScale)
Stack()
.ripplesStyle()
.opacity(this.delayOpacity)
.scale(this.delayScale)
  1. 透過點選按鈕來判斷isListening變數，如果為true則新增動畫。漣漪動畫實際上的效果為透明度0.8->0，半徑擴大到6倍的動畫，持續時間無限。原始碼參考WaterRipples.ets。
/** TODO: 知識點：新建兩個動畫，分別修改兩個Stack的屬性，設定延遲200ms，展示為兩個連續的漣漪，iterations設定為-1表示無限重複
* 高效能知識點：建議使用系統提供的動畫介面，如果使用自定義動畫，在動畫曲線計算過程很容易引起UI執行緒高負載。
* 參考《減少動畫丟幀》文章
* https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/performance/reduce-animation-frame-loss.md/
**/
animateTo({ duration: this.ANIMATION_DURATION, iterations: -1, curve: Curve.EaseInOut }, () => {
  this.immediatelyOpacity = 0;
  this.immediatelyScale = { x: 6, y: 6 };
})
animateTo({ duration: this.ANIMATION_DURATION, iterations: -1, curve: Curve.EaseInOut, delay: 200 }, () => {
  this.delayOpacity = 0;
  this.delayScale = { x: 6, y: 6 };
})
  1. 如果isListening為false，則用持續時間為0的動畫來打斷持續時間無限的動畫。原始碼參考WaterRipples.ets。
/** TODO: 知識點：新建兩個動畫，分別修改兩個Stack的屬性，設定延遲200ms，展示為兩個連續的漣漪，iterations設定為-1表示無限重複
* 高效能知識點：建議使用系統提供的動畫介面，如果使用自定義動畫，在動畫曲線計算過程很容易引起UI執行緒高負載。
* 參考《減少動畫丟幀》文章
* https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/performance/reduce-animation-frame-loss.md/
**/
animateTo({ duration: this.ANIMATION_DURATION, iterations: -1, curve: Curve.EaseInOut }, () => {
  this.immediatelyOpacity = 0;
  this.immediatelyScale = { x: 6, y: 6 };
})
animateTo({ duration: this.ANIMATION_DURATION, iterations: -1, curve: Curve.EaseInOut, delay: 200 }, () => {
  this.delayOpacity = 0;
  this.delayScale = { x: 6, y: 6 };
})

高效能知識點

本例使用了系統提供的動畫介面，降低了系統負載，提升動畫幀率。

工程結構&模組型別

// TODO: 知識點：用一個持續時間為0的閉包函式修改所有的變數去打斷動畫
animateTo({ duration: 0 }, () => {
  this.immediatelyOpacity = 0.8;
  this.delayOpacity = 0.8;
  this.immediatelyScale = { x: 1, y: 1 };
  this.delayScale = { x: 1, y: 1 };
})

模組依賴

   waterriples                                      // har包
   |---WaterRipples.ets                             // 水波紋效果實現頁面

不涉及。

參考資料

@顯式動畫（animateTo）

寫在最後

  • 如果你覺得這篇內容對你還蠻有幫助，我想邀請你幫我三個小忙：
  • 點贊，轉發，有你們的 『點贊和評論』，才是我創造的動力。
  • 關注小編，同時可以期待後續文章ing🚀，不定期分享原創知識。
  • 想要獲取更多完整鴻蒙最新VIP學習資源，請移步前往小編：https://qr21.cn/FV7h05

相關文章