Android Lottie動畫
在Android中,往往UI會讓寫一些動畫效果,比如啓動頁心形跳動,返回效果等。
一般我們在項目中常用的動畫無非是以下幾種:
- 普通動畫
- 幀動畫
- 屬性動畫
- 通過改變LayoutParams佈局參數來實現動畫
Lottie現在是Github上一個比較火的動畫庫,Github上關於Lottie庫介紹大概是這樣的:Lottie是一個爲Android和iOS設備提供的一個開源框架,它能夠解析通過Adobe After Effects 軟件做出來的動畫,動畫文件通過Bodymovin導出json文件,然後由Lottie中的LottieAnimationView解析json渲染動畫。 (如上圖)
也就是說Lottie框架可以通過解析json文件來實現動畫效果,而無需開發寫太多的代碼去控制動畫。
[Lottie Github地址:] (https://github.com/airbnb/lottie-android)
Lottie的使用
1. 下載Lottie庫
在你工程的build.gradle文件裏添加如下配置
dependencies {
//lottie
implementation 'com.airbnb.android:lottie:2.7.0'
}
2. 簡單使用在佈局xml配置
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/lottieAnimationView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:lottie_fileName="hello-world.json"
app:lottie_loop="true"
app:lottie_rawRes="@raw/heart"
app:lottie_imageAssetsFolder="images"
app:lottie_autoPlay="true"
注意這裏的 app:lottie_rawRes,app:lottie_fileName這兩個屬性感覺是一樣的
上圖xml裏面的@raw/heart是一個所謂的json文件,在本文開頭也說過,Lottie是通過解析json文件去實現的。
如此,動畫就能跑起來了,解釋下一下屬性:
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();//播放動畫
Lottie框架會在後臺自動解析json動畫配置文件,解析完後開始跑動畫。
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();//取消動畫
so,你可以隨意控制動畫的時常,動畫的播放進度,動畫的各種狀態等。
4.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
}
- None 無緩存
- Weak 弱引用緩存
- Strong 強引用緩存
在LottieAnimationView控件的佈局中添加如下屬性:
app:lottie_cacheStrategy="weak" (無緩存)
也可以在代碼裏添加:
animationView.setAnimation("hello_world.json", LottieAnimationView.CacheStrategy.Weak);
這個就是Lottie的簡單使用嘍,你只需要編寫xml其餘的事情交給它做就ok了。
附上跑完之後的效果圖(有機會可以寫一篇關於raw裏
面的json文件是如何製作出來的):
喜歡的小夥伴可以幫我點個贊呀~ 不對的地方也請指出。
by—— LiuZX