lottie簡(jiǎn)介
Lottie抖拴,Airbnb開源的動(dòng)畫框架,是基于CALayer的動(dòng)畫绵跷, 所有的路徑預(yù)先在AE中計(jì)算好硝桩, 轉(zhuǎn)換為Json文件盒齿, 然后自動(dòng)轉(zhuǎn)換為L(zhǎng)ayer的動(dòng)畫念逞。
Lottie有各種不同的版本, 安卓边翁, iOS翎承, 前端都可以使用, 理論上動(dòng)畫做一套就可以共用符匾, 大大的減少了工作量.以后如果要是實(shí)現(xiàn)復(fù)雜的動(dòng)畫叨咖,可以直接讓設(shè)計(jì)出相關(guān)的動(dòng)畫json文件,大大減輕了代碼的工作量“〗海現(xiàn)在有了 Lottie甸各,只要設(shè)計(jì)師用 AE 設(shè)計(jì)動(dòng)畫,利用 bodymovin 導(dǎo)出 焰坪,導(dǎo)入到 assets, 再寫下面那么點(diǎn)代碼就可以實(shí)現(xiàn)了
入門使用方法:
1.選擇項(xiàng)目build.gradle文件趣倾,并在依賴項(xiàng)塊中添加以下一行:
//Lottie動(dòng)畫
implementation "com.airbnb.android:lottie:3.6.0"
2. 純布局實(shí)現(xiàn)動(dòng)畫效果 將LottieAnimationView添加到您的布局
(1) 使用網(wǎng)絡(luò)json文件去加載動(dòng)畫 通過' lottie_url '屬性來使用 需要解析json
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/animationView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:lottie_url="REPLACE_JSON_URL"
app:lottie_autoPlay="true"
app:lottie_loop="true"/>
上面方法是通過外網(wǎng)的鏈接地址來加載動(dòng)畫的,其實(shí)可以通過本地json文件加載
在項(xiàng)目的res下創(chuàng)建raw文件夾,把json文件放入raw下 使用lottie_rawRes指向json文件地址
(2)使用本地json文件去加載動(dòng)畫 通過' lottie_rawRes '屬性來使用 (raw目錄下的文件)
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/animationView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:lottie_rawRes="@raw/animation"
app:lottie_autoPlay="true"
app:lottie_loop="true"/>
只是上面的布局其實(shí)就可以簡(jiǎn)單實(shí)現(xiàn)一個(gè)動(dòng)畫啦!
3. 通過代碼實(shí)現(xiàn)動(dòng)畫效果
代碼使用方法一:
將LottieAnimationView添加到您的布局 通過代碼實(shí)現(xiàn)動(dòng)畫效果 如以下代碼 布局 通過' lottie_fileName ' (assets目錄下的文件)
<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_autoPlay="true" />
java代碼設(shè)置:
LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
animationView.setAnimation("Lottie.json");
animationView.loop(true);
animationView.playAnimation();
setAnimation有三個(gè)方法
其中String是fileName,是在assets目錄下的文件琳彩,CacheStrategy表示緩存策略誊酌,
代表使用何種策略進(jìn)行存儲(chǔ),默認(rèn)為None即不存儲(chǔ)露乏,而使用時(shí)會(huì)優(yōu)先從內(nèi)存緩存中命中讀取碧浊,從而減小IO開銷。
JSONObject直接傳入一段json數(shù)據(jù)瘟仿,可以通過網(wǎng)絡(luò)獲取一段json進(jìn)行解析處理箱锐。
代碼使用方法二: 使用LottieComposition
在LottieComposition中提供了三種from方法,可以接受assets文件名劳较、json對(duì)象驹止、流對(duì)象三種參數(shù)浩聋,Sync表示同步,但是卻是包可見方法臊恋,并不能被外部調(diào)用衣洁。
LottieComposition.fromJson(getResources(), jsonObject, new LottieComposition.OnCompositionLoadedListener() {
@Override
public void onCompositionLoaded(LottieComposition composition) {
animationView.setComposition(composition);
animationView.playAnimation();
}
});
外部調(diào)用時(shí)只提供異步方法,使用AsyncTask進(jìn)行異步調(diào)用抖仅,將JsonObject的解析處理過程放在異步線程處理坊夫,并將解析生成的LottieComposition對(duì)象回調(diào)主線程,因?yàn)檫@個(gè)json對(duì)象可能有上百k之大撤卢,所以整個(gè)處理過程的復(fù)雜度和耗時(shí)還是很高的环凿,所以不要在ui線程中解析處理。
一點(diǎn)想法:
我們可以通過請(qǐng)求的方式獲取json對(duì)象放吩,并將解析的過程放在網(wǎng)絡(luò)請(qǐng)求的異步線程中處理智听,使用反射調(diào)用同步方法,將調(diào)用放在異步線程中執(zhí)行渡紫,這樣就可以將整個(gè)過程請(qǐng)求和解析的過程封裝在一起到推。
注意點(diǎn):
LottieAnimationView內(nèi)部有個(gè)LottieDrawable對(duì)象,setComposition方法實(shí)質(zhì)上是將LottieComposition應(yīng)用到LottieDrawable上腻惠,官方readme上有這樣一段說明
但應(yīng)該是后面改過环肘,LottieDrawable是包可見的欲虚,外部無法調(diào)用到集灌,并且在LottieDrawable類注釋上有這樣一段描述。
推薦使用LottieAnimationView而不是直接使用LottieDrawable复哆,因?yàn)長(zhǎng)ottieDrawable的回收LottieAnimationView幫你做了欣喧,而自己操作LottieDrawable需要考慮的回收調(diào)用。
所以僅推薦以上兩種用法梯找,不推薦直接使用Drawable的方式除非一定需要
Thanks
- 在線編輯 Lottie json 文件
- lottie官方動(dòng)畫使用文檔
- airbnb/lottie-android
- lottie
- bodymovin
- lottie動(dòng)畫資源社區(qū)
- DylanCaiCoding/LoadingHelper
- KingJA/LoadSir
- BottomNavigationView
- Material design - Bottom Navigation
- 提示
- bodymovin的安裝與使用**
轉(zhuǎn)載請(qǐng)備注原文章鏈接謝謝!