1. 使用準備
Lottie支持多平臺，使用同一個JSON動畫文件，可在不同平臺實現相同的炫酷動畫效果。Android 通過Airbnb的開源項目lottie-android實現，最低支持 API 16;
在項目的 build.gradle 文件添加依賴
dependencies {
implementation 'com.airbnb.android:lottie:$lottieVersion'
}
最新的版本號可以到官網或者github查詢，lottie僅支持api16及以上。
2. 加載方式
-
src/main/assets
![]()
lottieAnimationView = findViewById(R.id.animation_view);
lottieAnimationView.setImageAssetsFolder("images");
lottieAnimationView.setAnimation("data.json");
lottieAnimationView.loop(true);
lottieAnimationView.playAnimation();
<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" />
- Json String
加載服務器上的.json文件，若有圖片可以設置本地代理文件夾或者將圖片資源放入 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();
}
}
});
}
- Url 服務器上的壓縮包(包含images和json文件)
// 資源zip
public final static File LOTTIE_FILES = new File(Environment.getExternalStorageDirectory()+"/ctclient/lottie/lottie.zip");
// 動效圖片資源
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", "動畫資源不存在");
return;
}
final String absolutePath = IMAGES_FILES.getAbsolutePath();
// 開啓硬件加速
lottieSolar.useHardwareAcceleration(true);
// 設置動畫文件夾代理類
lottieSolar.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;
}
});
// 設置動畫
LottieComposition.Factory.fromInputStream(fis, new OnCompositionLoadedListener() {
@Override
public void onCompositionLoaded(@Nullable LottieComposition composition) {
lottieSolar.setComposition(composition);
lottieSolar.playAnimation();
}
});
- 加載SDCard字體
animationView.setFontAssetDelegate(new FontAssetDelegate(){
public Typeface fetchFont(String fontFamily) {
Typeface customFont = Typeface.createFromFile(FONT_PATH + fontFamily);
return customFont;
}
});
- 監聽動畫進度 [0,1]
lottieSolar.addAnimatorUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
// 判斷動畫加載結束
if (valueAnimator.getAnimatedFraction() == 1f) {
if (dialog.isShowing() && getActivity() != null)
dialog.dismiss();
}
}
});
- 循環
在xml中
lottie_loop="true"
代碼中
lottieAnimationView.loop(true);
你也可以像ValueAnimator一樣使用setRepeatMode(...) 或 setRepeatCount(...)
- scaleType
只支持centerCrop 和 centerInside
- 播放動畫的某個部分
setMinFrame(...)
setMaxFrame(...)
setMinProgress(...)
setMaxProgress(...)
setMinAndMaxFrame(...)
setMinAndMaxProgress(...)
- 硬件加速，解決lottie卡頓問題
lottieSolar.useHardwareAcceleration(true);
- 緩存
/*
* Lottie內部有兩個緩存map（強引用緩存，弱引用緩存），在動畫文件加載完成後會根據設置的緩存策略緩存動畫，方便下次使用。
*/
animationView.setAnimation(animation, LottieAnimationView.CacheStrategy.Strong); //強緩存
animationView.setAnimation(animation, LottieAnimationView.CacheStrategy.Weak); //弱緩存
根據進度緩存，併爲下次播放作準備
animationView.setProgress(progress); //設置當前進度
animationView.buildDrawingCache(); //強制緩存繪製數據
Bitmap image = animationView.getDrawingCache(); //獲取當前繪製數據
3. After Effects方面注意點（for設計師）
- 官網動畫實例 www.lottiefiles.com
- ae文件預覽 https://www.lottiefiles.com/preview
- 在爲Lottie構建時，您始終必須記住，這些JSON文件需要儘可能小巧令移動產品儘可能小。 例如，儘可能使用parenting。 在類似的圖層上覆制相同的關鍵幀會增加額外的代碼。 只有在必要時才使用路徑關鍵幀動畫。 由於它爲每個關鍵幀上的每個頂點添加數據，因此佔用的空間最多。 諸如Autotrace之類的技術，或者每幀都爲您提供關鍵幀的搖擺器，可能會使您的JSON文件非常大，並可能會對性能產生負面影響。 必須與組合物的設置方式保持平衡，以使事物儘可能高效。
- 將任何Adobe Illustrator，EPS，SVG或PDF資源轉換爲After Effects中的圖層，否則它們將無法在您的Lottie動畫中使用。
- Lottie尚不支持效果菜單中的表達式或任何效果。
- 使用alpha遮罩會影響性能。 如果你使用的是alpha遮罩或alpha倒置遮罩，遮罩的大小會對性能產生更大的影響。 如果必須使用遮罩，請覆蓋最小的區域。
- 混合模式（如Multiply, Screen 或 Add）尚不受支持，也不支持Luma遮罩。
- Lottie還不支持陰影，顏色疊加或筆觸等圖層效果。
- 導出比您想要支持的最寬屏幕更寬的動畫，使開發者在Android上使用centerCrop類型或在iOS上使用aspectFill內容模式。
- 將圖片資源放入JSON， 將圖片資源整合到動畫的 JSON文件中，開發人員的工作量就可以節約很多。
- 需要先將圖片轉換成矢量圖 SVG 格式，這個設計師一定有辦法。
- 使用 Illustrator 將 SVG 文件另存爲 .ai 文件。
- 使用 .ai 文件在 AE 中做動畫處理。
- 最後通過 Bodymovin 插件，輸出動畫資源。
官方文檔： artwork-to-lottie-walkthrough