Lottie,一个强大的移动端动画库

Posted 2022-11-06 痕迹天涯119

Lottie是一个针对移动端打造的动画库，其内部根据json解析出的路径在onDraw下绘制多个图层的每一帧动画实现高效流畅的效果，本文简单介绍其使用，以帮助读者更好的理解。

通过Gradle添加依赖

dependencies   
  compile 'com.airbnb.android:lottie:2.1.0'

使用方式一：XML加载

<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文件在Assert文件夹下的名称，动画是否循环，是否自动播放动画。

使用方式二：代码加载

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

对于以上的两种方式而言比较适合单一的动画加载，如果需要在RecyclerView等控件中展示多个相同的动画，请使用下面的方式

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

 // Cancel to stop asynchronous loading of composition
 // compositionCancellable.cancel();

和属性动画类似，Lottie具有高度的可控性

animationView.addAnimatorUpdateListener((animation) -> 
    // Do something.
);
animationView.playAnimation();
...
if (animationView.isAnimating()) 
    // Do something.

...
animationView.setProgress(0.5f);
...
// Custom animation speed or duration.
ValueAnimator animator = ValueAnimator.ofFloat(0f, 1f)
    .setDuration(500);
animator.addUpdateListener(animation -> 
    animationView.setProgress(animation.getAnimatedValue());
);
animator.start();
...
animationView.cancelAnimation();

在最新的2.1.0版本下，你能轻松的为动画添加ColorFilter

// Any class that conforms to the ColorFilter interface
final PorterDuffColorFilter colorFilter = new PorterDuffColorFilter(Color.RED, PorterDuff.Mode.LIGHTEN);

// Adding a color filter to the whole view
animationView.addColorFilter(colorFilter);

// Adding a color filter to a specific layer
animationView.addColorFilterToLayer("hello_layer", colorFilter);

// Adding a color filter to specfic content on the "hello_layer"
animationView.addColorFilterToContent("hello_layer", "hello", colorFilter);

// Clear all color filters
animationView.clearColorFilters();

同样，Lottie也支持通过XML的方式添加ColorFilter，此时的合并规则为PorterDuff.Mode.SRC_ATOP:

<com.airbnb.lottie.LottieAnimationView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:lottie_fileName="hello-world.json"
        app:lottie_colorFilter="@color/blue" />

通过LottieComposition.Factory的默认方法加载json文件
。

fromAssetFileName：从Assert文件夹下加载资源文件
fromFileSync：同上，但是同步的加载方式
fromInputStream：从文件流加载
fromJson(Resources res, JSONObject json,OnCompositionLoadedListener loadedListener)：通过JSONObject的方式加载网络文件

简单的加载的演示：

        LottieComposition.Factory.fromAssetFileName(this, "hello-world.json", new OnCompositionLoadedListener() 
            @Override
            public void onCompositionLoaded(@Nullable LottieComposition composition) 
                if (composition != null) 
                    lav.setComposition(composition);
                
                lav.playAnimation();
            
        );

如果你的json文件附带了图片资源并放置在Assert或其子文件夹下，那么请使用setImageAssetsFolder指明对应路径，如

call setImageAssetsFolder(images/hello)

如果你需要加载非assert下的图片资源请通过如下方式

animationView.setImageAssetDelegate(new ImageAssetDelegate() 
         @Override public Bitmap fetchBitmap(LottieImageAsset asset) 
           getBitmap(asset);
         
       );

LottieImageAsset用于帮助指定Bitmap的宽高等信息。

---

基本就是一篇翻译文了，写的比较快，有什么疑问可以留言讨论。