Android Lottie動畫的簡單使用
簡介
在Android中做動畫效果無非是以下幾種方法:
- 普通動畫
- 幀動畫
- 屬性動畫
- 通過改變LayoutParams佈局引數來實現動畫
現如今在Github上有一個比較火的動畫庫Lottie,Github上關於Lottie庫介紹大概是這樣的:
Lottie是一個為Android和iOS裝置提供的一個開源框架,它能夠解析通過Adobe After Effects 軟體做出來的動畫,動畫檔案通過Bodymovin匯出json檔案,然後由Lottie中的LottieAnimationView解析json渲染動畫。
官方給出來的demo動畫效果如下:
也就是說Lottie框架可以通過解析json檔案來實現動畫效果,而無需開發寫太多的程式碼去控制動畫。
Lottie的使用
1.下載Lottie庫
在你工程的build.gradle檔案裡新增如下配置
dependencies {
implementation 'com.airbnb.android:lottie:2.5.4'
}
2.簡單使用
Lottie支援API14以及以上,動畫簡單使用例項如下:
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/animation_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:lottie_fileName="hello-world.json"
app:lottie_loop="true"
app:lottie_imageAssetsFolder="images"
app:lottie_autoPlay="true" />
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
如此,動畫就能跑起來了,解釋下一下屬性:
1.lottie_fileName:在app/src/main/assets目錄下的動畫json檔名。
2.lottie_loop:動畫是否迴圈播放,預設不迴圈播放。
3.lottie_autoPlay:動畫是否自動播放,預設不自動播放。
4.lottie_imageAssetsFolder:動畫所依賴的圖片目錄,在app/src/main/assets/目錄下的子目錄,該子目錄存放所有圖片。
你還可以在程式碼中這樣使用:
LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
animationView.setAnimation("hello-world.json");//在assets目錄下的動畫json檔名。
animationView.loop(true);//設定動畫迴圈播放
animationView.setImageAssetsFolder("images/");//assets目錄下的子目錄,存放動畫所需的圖片
animationView.playAnimation();//播放動畫
- 1
- 2
- 3
- 4
- 5
Lottie框架會在後臺自動解析json動畫配置檔案,解析完後開始跑動畫。
你也可以這樣使用LottieAnimationView:
LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
...
Cancellable compositionCancellable = LottieComposition.Factory.fromJson(getResources(), jsonObject, (composition) -> {
animationView.setComposition(composition);
animationView.playAnimation();
});
// Cancel to stop asynchronous loading of composition
// compositionCancellable.cancel();
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
3.控制動畫新增動畫監聽
animationView.addAnimatorUpdateListener((animation) -> {
// Do something.動畫狀態監聽回撥
});
animationView.playAnimation();//播放動畫
...
if (animationView.isAnimating()) {
// Do something.動畫正在執行
}
...
//progress範圍0~1f,設定動畫進度
animationView.setProgress(0.5f);
...
// 自定義動畫時長,此處利用ValueAnimator值動畫來實時更新AnimationView的進度來達到控制動畫時長。
ValueAnimator animator = ValueAnimator.ofFloat(0f, 1f)
.setDuration(500);
animator.addUpdateListener(animation -> {
animationView.setProgress(animation.getAnimatedValue());
});
animator.start();//啟動動畫
...
animationView.cancelAnimation();//取消動畫
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
由以上程式碼可知:你可以隨意控制動畫的時常,動畫的播放進度,動畫的各種狀態等。
Lottie動畫快取策略
由於Lottie框架是解析json檔案來做動畫效果的,解析json檔案是I/O耗時操作,為了提高動畫載入速度,在同一個動畫需要多處多次使用時,就有必要對解析json的結果進行快取,以免每次都解析json檔案耗時操作。所以Lottie框架提供了三種不同程度的動畫快取策略:
/**
* Caching strategy for compositions that will be reused frequently.
* Weak or Strong indicates the GC reference strength of the composition in the cache.
*/
public enum CacheStrategy {
None,
Weak,
Strong
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- None 無快取
- Weak 弱引用快取
- Strong 強引用快取
。你可以按照如下方法使用:
1.在LottieAnimationView控制元件的佈局中新增如下屬性:
app:lottie_cacheStrategy="weak"
- 1
預設情況下是無快取的。
2.你也可以在程式碼中如此使用:
animationView.setAnimation("hello_world.json", LottieAnimationView.CacheStrategy.Weak);
- 1
如果第二個引數未設定時,預設無快取。