在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是使用它的最簡單的方法：
<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" />
在眾多方法中你還可以使用程序的方式， 即從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
