2018-05-23

Lottie Android 初探

Lottie是一个支持Android、iOS、React Native，并由 Adobe After Effects制作aep格式的动画，然后经由bodymovin插件转化渲染为json格式可被移动端本地识别解析的Airbnb开源库。
Lottie实时呈现After Effects动画效果，让应用程序可以像使用静态图片一样轻松地使用动画。
Lottie支持API 14及以上。

自从 Airbnb 开发出 Lottie 之后，设计师只需要使用 After Effects 设计出完美的动画，然后通过 Bodymovin 插件进行简单的转换和导出成 JSON，最后工程师将 JSON 放入 App 项目中，就可以将动画 100% 还原到你的产品中。

image

二 、基本使用\

项目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);
});

Lottie官方Demo下载