Airbnb 动画库Lottie

在Android和iOS上机器上渲染After Effects动画的工具

Lottie 支持Android, iOS 和 React Native，本片文章介绍在Android中使用Lottie。

例子apk下载

Lottie 是一个可以解析AE( Adobe After Effects )上的插件Bodymovin导出的json文件并且能在移动设备上渲染的一个android和ios动画库。

首先设计师能创建出美丽的动画，而不需要工程师用代码手写创建它。这样效率可以大大的提升。

所有这些动画都是在After Effects中创建的，使用Bodymovin导出，并且无需额外的工程师工作即可完成原生渲染。

Bodymovin是一个又Hernan Torrisi 创建的After Effects插件，导出文件格式为json和包括一个javascript网络播放器。我们建立在他的肩上将其使用扩展到Android，iOS和React Native平台上。

了解更多请访问我们的博客

示例App

你能自己创建例子app和从playstore下载。例子app包括一些基本的动画但也允许你使用本地存储的和网络现在的json文件。

下载

Gradle是唯一支持的构建配置方式，因此只需将依赖项添加到项目build.gradle文件中即可：

dependencies {
compile 'com.airbnb.android:lottie:1.0.1'
}

使用Lottie

Lottie支持Jellybean（API 16）及以上。LottieAnimationView是使用它的最简单的方法：

在众多方法中你还可以使用程序的方式，即从app / src / main / assets中的读取json文件：

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

接下来这种方法将加载文件放在后台异步解析动画json文件，并在完成后呈现动画。

如果你想重用一个从列表中选择的或者网络请求的JSONObject 你可以这样

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

然后你还可以自己控制这个动画或者添加监听器:

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();

其实在这个库中LottieAnimationView 通过LottieDrawable来渲染动画的。如果你需要你可以直接使用drawable形式：

LottieDrawable drawable = new LottieDrawable();
LottieComposition.fromAssetFileName(getContext(), "hello-world.json", (composition) -> {
drawable.setComposition(composition);
});

如果你的动画将被频繁重用，LottieAnimationView有一个可选的缓存策略内置。使用＃LottieAnimationView＃setAnimation（String，CacheStrategy）。 CacheStrategy可以是Strong，Weak或None三种形式来让LottieAnimationView对加载和解析动画的使用强或弱引用的方式。

支持的After Effects功能

Keyframe Interpolation

Linear Interpolation
Bezier Interpolation
Hold Interpolation
Rove Across Time
Spatial Bezier

Solids

Transform Anchor Point
Transform Position
Transform Scale
Transform Rotation
Transform Opacity

Masks

Path
Opacity
Multiple Masks (additive)

Track Mattes

Alpha Matte

Parenting

Multiple Parenting
Nulls

Shape Layers

Anchor Point
Position
Scale
Rotation
Opacity
Path
Group Transforms (Anchor point, position, scale etc)
Rectangle (All properties)
Elipse (All properties)
Multiple paths in one group

Stroke (shape layer)

Stroke Color
Stroke Opacity
Stroke Width
Line Cap
Dashes

Fill (shape layer)

Fill Color
Fill Opacity

Trim Paths (shape layer)

Trim Paths Start
Trim Paths End
Trim Paths Offset

性能和内存

如果LottieAnimationView 的composition 没有masks或mattes，那么性能和内存开销应该相当不大。没有创建位图，大多数操作都是简单的画布操作。
如果合成具有遮罩，则将在合成大小处创建2-3个位图。当动画视图添加到窗口时，位图由lottie自动创建，并在从窗口中删除时重新生成。因此，不建议在RecyclerView中使用带有masks或mattes的动画，因为它会导致显着的位图流失。除了内存流失之外，额外的bitmap.eraseColor（）和canvas.drawBitmap（）调用对于masks和mattes是必要的，这将降低动画的性能。对于简单动画，性能命中不应该大到足以在实际使用时明显。如果您在列表中使用动画，建议在LottieAnimationView.setAnimation（String，CacheStrategy）中使用CacheStrategy，因此动画不必每次都反序列化。

试试看

clone此库并运行LottieSample模块以查看一堆示例动画。它们的JSON文件位于LottieSample / src / main / assets中，而orignal After Effects文件位于/ After Effects示例中

示例应用程序还可以在给定的URL或您设备上的本地加载json文件（如从网络下载或您本地的sdcard）。

社区贡献

Xamarin bindings
NativeScript bindings

备择方案

手动构建动画。手动构建动画是Android和iOS设计和工程的巨大时间承诺。经常很难，甚至不可能证明花费这么多时间来获得动画是正确的。
Facebook Keyframes 。 Keyframes 是一个来自于Facebook美妙的的新动画库。但是Keyframes 不支持的一些功能如面具，遮罩，修剪路径，虚线模式等但是Lottie可以。
Gifs。 Gif是一个bodymovin JSON的大小的两倍，并且以固定的大小呈现，不能按比例放大以匹配大和高密度屏幕。
Png帧动画。这种比gif更糟糕，因为它们的文件大小通常是bodymovin json的大小的30-50倍，也不能放大。

为什么叫Lottie

Lottie以德国一个剪辑电影最出名的导演命名。她最着名的电影是“Achmed王子的冒险”（1926年） - 最古老的feature-length动画电影，在Walt Disney's的feature-length白雪公主和七个小矮人（1937）之前十多年里的 The art of Lotte Reineger