讓UI忙碌的安卓Lottie動畫渲染庫(二)

語言: CN / TW / HK

theme: condensed-night-purple

持續創作,加速成長!這是我參與「掘金日新計劃 · 10 月更文挑戰」的第28天,點選檢視活動詳情,希望大家多多支援,幫忙點個贊,謝謝!

前言

上節我們講述了Lottie開源庫如何匯入Android Studio但是,開源庫是不斷迭代的,所以我們也要及時更新,這方面可以通過官方得知GitHub - airbnb/lottie-android: Render After Effects animations natively on Android and iOS, Web, and React Native

image.png 當然安卓如果想更新可以通過這個地方應用更新:

image.png

image.png

更新的問題解決後,我們來說說如何在安卓開發中使用它。

正篇

邏輯程式碼控制基礎

播放動畫

首先,上節我們已經講述瞭如何在佈局中使用,但在我們邏輯程式碼上也有控制邏輯,方便我們更好的控制動畫,而不是xml上那幾個屬性:\ 第一步,先呼叫setAnimation()和playAnimation()方法去實現播放我們的動畫 Java LottieAnimationView vGif = findViewById(R.id.lt_gift); // 程式碼設定動畫檔案 vGif.setAnimation("lottie/gift.json"); // 開始播放動畫,首次播放會有短暫延遲,因為載入動畫檔案需要時間 vGif.playAnimation();

題外話-JSON動畫檔案的獲取方法

上述程式碼中用到的gift.json檔案需要UI設計師去提供,當然可能UI設計師也不知道怎麼去做,也有可能我們是在家中學習,沒有UI設計師幫你做JSON動畫檔案,所以下面先插個話題。\ UI設計師或是在家實踐的掘友們可以通過三種方式獲取到我們Lottie庫可用的JSON動畫檔案:\ 第一個方法步驟如下:先從AE匯出Json檔案,Lotti 解析Json檔案後調Core Animation的API繪製渲染,這個辦法適合會使用AE的專業UI設計師。\ 如果不會AE,那就可以用第二個方法:\ 訪問由DesignBarn公司推出的Lottie動畫社群,查詢我們需要的動畫,不僅可以下載還支援編輯預覽生成GIF等功能\ 或第三個方法:\ 就是使用我們國內的平臺,訪問由阿里提供的獁良平臺,同樣能建立動畫並支援支付寶掃描預覽。

image.png

image.png 作者比較菜,還不能去包攬UI的活,所以在家實際只能去使用第二個方法找現成的資源: Featured animations from our community (lottiefiles.com) 點選下載,前面兩個選項都行,後一種是更加節省控制元件提升效率的新版推薦方式,不過要錢,作者體驗當然選第一個下載方式 image.png 下載好Lottie的JSON格式檔案重新命名成你想要的,然後在專案的app下的main資料夾建立assets資料夾和子資料夾lottie放入我們的json:

image.png image.png

迴歸正題-邏輯控制方法說明

監聽動畫流程方法

這樣我們就可以正常的調起動畫了,此外還提供了監聽動畫事件的方法,這裡程式碼是進度監聽的方法: Java vGif.addAnimatorUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { float progress = animation.getAnimatedFraction();//播放進度 // TODO: } }); 我們可以使用addAnimatorListener()方法以監聽動畫開始、結束、取消、重複等事件: ```Java vGif.playAnimation(); //播放 vGif.pauseAnimation(); //暫停 vGif.cancelAnimation(); //取消 vGif.getDuration(); //獲取動畫時長 vGif.addAnimatorListener(new Animator.AnimatorListener() { //新增動畫監聽 @Override public void onAnimationStart(Animator animation) {

  }

  @Override
  public void onAnimationEnd(Animator animation) {

  }

  @Override
  public void onAnimationCancel(Animator animation) {

  }

  @Override
  public void onAnimationRepeat(Animator animation) {

  }
});

```

設定動畫進度方法

我們可以呼叫setProgress()方法去直接設定去動畫哪個地方畫面展示: Java LottieAnimationView vGif = findViewById(R.id.lt_gift); // 程式碼設定動畫檔案 vGif.setAnimation("lottie/gift.json"); // 不需要呼叫playAnimation,可直接展示該進度的動畫效果 vGif.setProgress(0.5f); 還能呼叫addLottieOnCompositionLoadedListener()方法監聽JSON檔案載入完成,知曉動畫何時開始載入: Java vGif.addLottieOnCompositionLoadedListener(new LottieOnCompositionLoadedListener() { @Override public void onCompositionLoaded(LottieComposition composition) { //此時渲染了動畫第一幀 } });

其他方法

這裡再列舉兩個其他方法: 第一種,動畫是否採用硬體加速,這個在繪製圖片的時候應該就瞭解過,有些地方安卓硬體加速不太適配:

image.png

image.png Java // 硬體加速開關(預設RenderMode.Automatic,採用硬體加速,而軟體加速為RenderMode.SOFTWARE) vGif.setRenderMode(RenderMode.HARDWARE); 下面這個方法還是使用Lottie動畫時比較容易使用到的,可以呼叫setAnimationFromUrl()方法使用url將JSON檔案通過網路下載的方式載入動畫,不過要考慮一些效能問題,貴在靈活可配置,也是點睛之筆: Java // 將json檔案下載到本地,再進行渲染,需要考慮耗時長的情況 vGif.setAnimationFromUrl(""); 可配合網路url配置,不需要下載到本地:

image.png

此外,還可以使用LottieCompositionCache快取機制,可以加速載入動畫,不過作者還菜,目前還沒看原始碼和各大博主的方法,所以僅在此提及

追隨時尚,採用Kotlin寫法

除了經典Java寫法,這裡再附上作者自己在學的Kotlin寫法,自己寫的,沒有校驗,如有不規範之處望請指教: ```Kotlin val vGif : LottieAnimationView = findViewById(R.id.lt_gift); vGif.setAnimation("lottie/gift.json") vGif.addAnimatorUpdateListener { animation -> var progress = animation.animatedFraction;//播放進度 //TODO: }

vGif.playAnimation() //播放

vGif.pauseAnimation() //暫停

vGif.cancelAnimation() //取消

vGif.duration //獲取動畫時長

vGif.addAnimatorListener(object : Animator.AnimatorListener { //新增動畫監聽 override fun onAnimationStart(animation: Animator) {} override fun onAnimationEnd(animation: Animator) {} override fun onAnimationCancel(animation: Animator) {} override fun onAnimationRepeat(animation: Animator) {} })

// 不需要呼叫playAnimation,可直接展示該進度的動畫效果 vGif.progress = 0.5f;

vGif.addLottieOnCompositionLoadedListener { //此時渲染了動畫第一幀 }

// 硬體加速開關(預設RenderMode.Automatic,採用硬體加速,而軟體加速為RenderMode.SOFTWARE) vGif.renderMode = RenderMode.HARDWARE;

// 將json檔案下載到本地,再進行渲染,需要考慮耗時長的情況 vGif.setAnimationFromUrl(""); ```

效果展示

最後放一下效果展示:

tutieshi_608x1080_9s.gif 怎麼樣,還不錯吧!其實如果僅僅只是載入動畫,上一節就夠用(讓UI忙碌的安卓Lottie動畫渲染庫(一) - 掘金 (juejin.cn)),畢竟放在XML佈局上就可以正常使用了,還是非常好用的,就是有點費UI設計師。 另外要注意安卓xm佈局中使用開源庫要在整體佈局的開頭加一句: XML xmlns:app="http://schemas.android.com/apk/res-auto" image.png 不然使用app: 語句會報紅哦!

總結

儘管Lottie使用方法很簡單,但要說明這些方法的使用和學習,導致本篇文章很長,這裡基本上將我網上所能找到都找了一遍,再結合原始碼閱讀糾正,雖然可能有遺漏,但是結合作者體驗,應該都是正確的,耗費了作者很多時間,但也方便了以後回顧以及繼續學習的掘友們,希望大家能點點贊,多和作者交流溝通,指正作者的問題,感謝各位觀看支援!