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

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 interfacefinal PorterDuffColorFilter colorFilter = new PorterDuffColorFilter(Color.RED, PorterDuff.Mode.LIGHTEN);// Adding a color filter to the whole viewanimationView.addColorFilter(colorFilter);// Adding a color filter to a specific layeranimationView.addColorFilterToLayer("hello_layer", colorFilter);// Adding a color filter to specfic content on the "hello_layer"animationView.addColorFilterToContent("hello_layer", "hello", colorFilter);// Clear all color filtersanimationView.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的宽高等信息。

---

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