Lottie Android 初探

洛洛發表於2017-12-17
Android

Lottie Android 初探

Lottie是一個支援Android、iOS、React Native，並由 Adobe After Effects製作aep格式的動畫，然後經由bodymovin外掛轉化渲染為json格式可被移動端本地識別解析的Airbnb開源庫。 Lottie實時呈現After Effects動畫效果，讓應用程式可以像使用靜態圖片一樣輕鬆地使用動畫。 Lottie支援API 14及以上。

一、預覽

https://github.com/airbnb/lottie-android

https://github.com/airbnb/lottie-android

https://github.com/airbnb/lottie-android

https://github.com/airbnb/lottie-android

二 、基本使用

在自己專案module的build.gradle檔案中新增如下程式碼：

dependencies {  
  compile 'com.airbnb.android:lottie:2.0.0-beta4'
}
複製程式碼

LottieAnimationView使用最簡單的方法是:

<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" />
複製程式碼

其中lottie_loop屬性為是否重複無限期動畫，當為true時，動畫無限次數播放，為false時，播放一次。

或者把json資源放在app/src/main/assets下，也可以這樣使用它:

LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
animationView.setAnimation("hello-world.json");
animationView.loop(true);
animationView.playAnimation();
複製程式碼

該方法將載入檔案並在後臺解析動畫，在完成後非同步開始呈現。

如果您希望重用一個動畫，例如在列表的每個專案中，或者從一個網路請求JSONObject中載入它:

 LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
 ...
 Cancellable compositionCancellable = LottieComposition.Factory.fromJson(getResources(), jsonObject, (composition) -> {
     animationView.setComposition(composition);
     animationView.playAnimation();
 });

 // 取消非同步載入
 // compositionCancellable.cancel();
複製程式碼

你也可以控制動畫新增監聽：

animationView.addAnimatorUpdateListener((animation) -> {
    // Do something.
});
animationView.playAnimation();
...
if (animationView.isAnimating()) {
    // Do something.
}
...
animationView.setProgress(0.5f);
...
// 自定義動畫速度和時長
ValueAnimator animator = ValueAnimator.ofFloat(0f, 1f)
    .setDuration(500);
animator.addUpdateListener(animation -> {
    animationView.setProgress(animation.getAnimatedValue());
});
animator.start();
...
animationView.cancelAnimation();
複製程式碼

你可以給整個動畫，一個特定的圖層，或者一個圖層的特定內容新增一個顏色過濾器。

// 任何符合顏色過濾介面的類
final PorterDuffColorFilter colorFilter = new PorterDuffColorFilter(Color.RED, PorterDuff.Mode.LIGHTEN);

// 在整個檢視中新增一個顏色過濾器
animationView.addColorFilter(colorFilter);

//在特定的圖層中新增一個顏色濾鏡
animationView.addColorFilterToLayer("hello_layer", colorFilter);

// 新增一個彩色過濾器特效“hello_layer”上的內容
animationView.addColorFilterToContent("hello_layer", "hello", colorFilter);

// 清除所有的顏色濾鏡
animationView.clearColorFilters();
複製程式碼

注意:顏色過濾器只適用於圖層，如影象層和實層，以及包含填充、描邊或組內容的內容。

在引擎蓋下,LottieAnimationView使用LottieDrawable呈現其動畫。如果需要，您可以直接使用可繪製的表單:

LottieDrawable drawable = new LottieDrawable();
LottieComposition.Factory.fromAssetFileName(getContext(), "hello-world.json", (composition) -> {
    drawable.setComposition(composition);
});
複製程式碼

如果你的動畫會經常重用,LottieAnimationView內建了一個可選的快取策略。使用LottieAnimationView .setAnimation(String,CacheStrategy)。CacheStrategy可以Strong, Weak, 或者None。LottieAnimationView對載入和解析的動畫持有強或弱的參考。弱或強表示快取中組合的GC參考強度。

三、Image 支援

如果您的動畫是從assets中載入的，並且您的影象檔案位於assets 的子目錄中，那麼您可以對影象進行動畫。你可以用LottieAnimationView或者LottieDrawable物件呼叫setImageAssetsFolder(String)方法，明確assets相對資料夾內的路徑,確保影象bodymovin出口與他們的名字不變,資料夾應該img_ 開頭。如果直接使用LottieDrawable,當你完成時您必須呼叫recycleBitmaps。 如果你需要提供你自己的點陣圖，如果你從網路或其他地方下載，你可以提供一個委託來做這個:

animationView.setImageAssetDelegate(new ImageAssetDelegate() {
         @Override public Bitmap fetchBitmap(LottieImageAsset asset) {
           getBitmap(asset);
         }
       });
複製程式碼

四、效能和記憶體

如果該組合沒有遮罩或mattes，那麼效能和記憶體開銷應該相當不錯。沒有建立任何點陣圖，大多數操作都是簡單的畫布繪製操作。 如果這個組合有遮罩或mattes，就會使用螢幕外的緩衝區，並且會有一個效能打擊。 如果在你的動畫列表中使用,推薦使用CacheStrategy，在呼叫LottieAnimationView.setAnimation(String, CacheStrategy)的時候，所以動畫不需要每次都反序列化。

五、Lottie官方Demo下載

https://fir.im/lottiedemo
複製程式碼

六、參考資料

http://airbnb.design/lottie/
http://www.lottiefiles.com/
https://github.com/airbnb/lottie-android
http://www.adobe.com/cn/products/aftereffects.html
https://github.com/bodymovin/bodymovin
https://github.com/airbnb/lottie-react-native
https://github.com/airbnb/lottie-ios
https://github.com/airbnb
複製程式碼

原創文章，轉載請註明出處。

相關文章