Introduction.gif
animation.gif
使用準(zhǔn)備
Lottie支持多平臺(tái)自点，使用同一個(gè)JSON動(dòng)畫(huà)文件，可在不同平臺(tái)實(shí)現(xiàn)相同的效果。Android 通過(guò)Airbnb的開(kāi)源項(xiàng)目lottie-android實(shí)現(xiàn)疚漆，最低支持 API 16;
在項(xiàng)目的 build.gradle 文件添加依賴(lài)
dependencies {
implementation 'com.airbnb.android:lottie:$lottieVersion'
}
最新的版本號(hào)可以到官網(wǎng)或者github查詢(xún)，lottie僅支持api16及以上刁赦。
加載方式
1. src/main/assets
lottieAnimationView = findViewById(R.id.lottieAnimationView);
lottieAnimationView.setImageAssetsFolder("images");
lottieAnimationView.setAnimation("data.json");
lottieAnimationView.loop(true);
lottieAnimationView.playAnimation();
<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_autoPlay="true" />
2. Json String
加載服務(wù)器上的.json文件娶聘，若有圖片可以設(shè)置本地代理文件夾或者將圖片資源放入 JSON。
private void loadUrl(String url) {
Request request = new Request.Builder().url(url).build();
OkHttpClient client = new OkHttpClient();
client.newCall(request).enqueue(new Callback() {
@Override public void onFailure(Call call, IOException e) {}
@Override public void onResponse(Call call, Response response) throws IOException {
try {
JSONObject json = new JSONObject(response.body().string());
LottieComposition.Factory
.fromJson(getResources(), json, new OnCompositionLoadedListener() {
@Override
public void onCompositionLoaded(LottieComposition composition) {
lottieAnimationView.setComposition(composition);
lottieAnimationView.playAnimation();
}
});
} catch (JSONException e) {
e.printStackTrace();
}
}
});
}
3. Url 服務(wù)器上的壓縮包(包含images和json文件)
- 通過(guò)url直接加載
lottieAnimationView.setAnimationFromUrl(url);
lottieAnimationView.playAnimation();
- 下載到本地解壓后指定文件夾代理
// 資源zip
public final static File LOTTIE_FILES = new File(Environment.getExternalStorageDirectory()+"/ctclient/lottie/lottie.zip");
// 動(dòng)效圖片資源
public final static File IMAGES_FILES = new File(Environment.getExternalStorageDirectory()+"/ctclient/lottie/images");
// data.json路徑
public final static File JSON_FILE = new File(Environment.getExternalStorageDirectory()+"/ctclient/lottie/data.json");
FileInputStream fis = null;
if (JSON_FILE.exists()) {
try {
fis = new FileInputStream(JSON_FILE);
} catch (FileNotFoundException e) {
e.printStackTrace();
}
}
if (fis == null || !IMAGES_FILES.exists()) {
Log.i("huangssh", "動(dòng)畫(huà)資源不存在");
return;
}
final String absolutePath = IMAGES_FILES.getAbsolutePath();
// 開(kāi)啟硬件加速
lottieAnimationView.useHardwareAcceleration(true);
// 設(shè)置動(dòng)畫(huà)文件夾代理類(lèi)
lottieAnimationView.setImageAssetDelegate(new ImageAssetDelegate() {
@Override
public Bitmap fetchBitmap(LottieImageAsset asset) {
BitmapFactory.Options opts = new BitmapFactory.Options();
opts.inScaled = true;
opts.inDensity = UtilPhoneParam.densityDpi;
Bitmap bitmap = null;
try {
bitmap = BitmapFactory.decodeFile(absolutePath + File.separator + asset.getFileName(), opts);
}catch (Exception e){
e.printStackTrace();
}
return bitmap;
}
});
// 設(shè)置動(dòng)畫(huà)
LottieComposition.Factory.fromInputStream(fis, new OnCompositionLoadedListener() {
@Override
public void onCompositionLoaded(@Nullable LottieComposition composition) {
lottieAnimationView.setComposition(composition);
lottieAnimationView.playAnimation();
}
});
4. 加載SDCard字體
lottieAnimationView.setFontAssetDelegate(new FontAssetDelegate(){
public Typeface fetchFont(String fontFamily) {
Typeface customFont = Typeface.createFromFile(FONT_PATH + fontFamily);
return customFont;
}
});
常用方法
1. 監(jiān)聽(tīng)動(dòng)畫(huà)進(jìn)度 [0,1]
lottieAnimationView.addAnimatorUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
// 判斷動(dòng)畫(huà)加載結(jié)束
if (valueAnimator.getAnimatedFraction() == 1f) {
if (dialog.isShowing() && getActivity() != null)
dialog.dismiss();
}
}
});
2. 暫停/取消/播放
lottieAnimationView.pauseAnimation();
lottieAnimationView.cancelAnimation();
lottieAnimationView.playAnimation();
3. 循環(huán)/播放某個(gè)部分
lottieAnimationView.loop(true);
- 像
ValueAnimator一樣使用setRepeatMode(...)或setRepeatCount(...) - scaleType ：只支持
centerCrop和centerInside - 播放動(dòng)畫(huà)的某個(gè)部分
setMinFrame(...)
setMaxFrame(...)
setMinProgress(...)
setMaxProgress(...)
setMinAndMaxFrame(...)
setMinAndMaxProgress(...)
4. 硬件加速甚脉，解決lottie卡頓問(wèn)題
lottieAnimationView.useHardwareAcceleration(true);
5. 緩存
/*
* Lottie內(nèi)部有兩個(gè)緩存map（強(qiáng)引用緩存丸升，弱引用緩存），在動(dòng)畫(huà)文件加載完成后會(huì)根據(jù)設(shè)置的緩存策略緩存動(dòng)畫(huà)牺氨，方便下次使用狡耻。
*/
lottieAnimationView.setAnimation(animation, LottieAnimationView.CacheStrategy.Strong); //強(qiáng)緩存
lottieAnimationView.setAnimation(animation, LottieAnimationView.CacheStrategy.Weak); //弱緩存
根據(jù)進(jìn)度緩存墩剖，并為下次播放作準(zhǔn)備
lottieAnimationView.setProgress(progress); //設(shè)置當(dāng)前進(jìn)度
lottieAnimationView.buildDrawingCache(); //強(qiáng)制緩存繪制數(shù)據(jù)
Bitmap image = lottieAnimationView.getDrawingCache(); //獲取當(dāng)前繪制數(shù)據(jù)
After Effects方面注意點(diǎn)（for設(shè)計(jì)師）
1. 官網(wǎng)動(dòng)畫(huà)實(shí)例 www.lottiefiles.com
2. AE文件預(yù)覽 https://www.lottiefiles.com/preview
3. 在為L(zhǎng)ottie構(gòu)建時(shí)，您始終必須記住夷狰，這些JSON文件需要盡可能小巧令移動(dòng)產(chǎn)品盡可能小岭皂。 例如，盡可能使用parenting孵淘。 在類(lèi)似的圖層上復(fù)制相同的關(guān)鍵幀會(huì)增加額外的代碼蒲障。 只有在必要時(shí)才使用路徑關(guān)鍵幀動(dòng)畫(huà)。 由于它為每個(gè)關(guān)鍵幀上的每個(gè)頂點(diǎn)添加數(shù)據(jù)瘫证，因此占用的空間最多揉阎。 諸如Autotrace之類(lèi)的技術(shù)，或者每幀都為您提供關(guān)鍵幀的搖擺器背捌，可能會(huì)使您的JSON文件非常大毙籽，并可能會(huì)對(duì)性能產(chǎn)生負(fù)面影響。 必須與組合物的設(shè)置方式保持平衡毡庆，以使事物盡可能高效坑赡。
4. 將任何Adobe Illustrator，EPS么抗，SVG或PDF資源轉(zhuǎn)換為After Effects中的圖層毅否，否則它們將無(wú)法在您的Lottie動(dòng)畫(huà)中使用。
5. Lottie尚不支持效果菜單中的表達(dá)式或任何效果蝇刀。
6. 使用alpha遮罩會(huì)影響性能螟加。 如果你使用的是alpha遮罩或alpha倒置遮罩，遮罩的大小會(huì)對(duì)性能產(chǎn)生更大的影響吞琐。 如果必須使用遮罩捆探，請(qǐng)覆蓋最小的區(qū)域。
7. 混合模式（如Multiply, Screen 或 Add）尚不受支持站粟，也不支持Luma遮罩黍图。
8. Lottie還不支持陰影，顏色疊加或筆觸等圖層效果奴烙。
9. 導(dǎo)出比您想要支持的最寬屏幕更寬的動(dòng)畫(huà)助被，使開(kāi)發(fā)者在Android上使用centerCrop類(lèi)型或在iOS上使用aspectFill內(nèi)容模式。
10. 將圖片資源放入JSON缸沃， 將圖片資源整合到動(dòng)畫(huà)的 JSON文件中恰起，開(kāi)發(fā)人員的工作量就可以節(jié)約很多。
- 需要先將圖片轉(zhuǎn)換成矢量圖 SVG 格式趾牧，這個(gè)設(shè)計(jì)師一定有辦法检盼。
- 使用 Illustrator 將 SVG 文件另存為 .ai 文件。
- 使用 .ai 文件在 AE 中做動(dòng)畫(huà)處理翘单。
- 最后通過(guò) Bodymovin 插件吨枉，輸出動(dòng)畫(huà)資源蹦渣。
官方文檔： artwork-to-lottie-walkthrough
