Lottie 是 Airbnb 開源的火熱動畫庫，讓程序員告別痛苦的動畫。對于曾經(jīng)寫一個大動畫兩三千行代碼的我來說，無疑是一個巨大的福利。
接下來我將逐步介紹Lottie的使用及源碼，以及 Adobe After Effects 和 Bodymovin 的安裝和使用（mac）。 俗話說，不會做動畫的設(shè)計不是好程序員，讓我們開始吧。
相關(guān)文章
- AE 以及 Bodymovin的安裝 ：http://www.lxweimin.com/p/ce3837d14f13
- AE 制作一個簡單的動畫： http://www.lxweimin.com/p/665f68933ed4
TODO: 后期持續(xù)更新，ae的使用，以及源碼的分析
原文鏈接： https://jfson.github.io/2017/03/06/Lottie/
Lottie 是什么 ？
Lottie 是在 Android 和 iOS上 原生渲染 的After Effects（AE）動畫,Lottie是 Airbnb 開源的支持Android 和 iOS 的動畫庫，它可以解析 AE 動畫中用Bodymovin 導(dǎo)出的json文件，并在移動設(shè)備上利用原生庫進行渲染 ！
本文翻譯于Lottie Git 項目，項目地址：https://github.com/airbnb/lottie-android
Lottie 好處 ？
先上圖 ！
設(shè)計師的動畫可以完全的復(fù)現(xiàn)，無需程序員手工重新創(chuàng)建，并且超于設(shè)計師預(yù)期，麻麻再也不用擔(dān)心實現(xiàn)跟設(shè)計有差距。
所有的這些動畫都是在 After Effects 中創(chuàng)建，使用Bodymovin導(dǎo)出，無需額外的工作，Bodymovin 是一個AE 的插件，導(dǎo)出效果文件作為json和一個javascript web 播放器，在其之上，Lottie將它擴展到 Android，iOS和React Native。
Lottie 的使用
1、添加 Gradle 依賴
dependencies {
compile 'com.airbnb.android:lottie:1.5.3'
}
2、使用View
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);
如果你想復(fù)用動畫，比如在列表中的每個項目或者從網(wǎng)絡(luò)請求加載JSONObject
LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
...
Cancellable compositionCancellable = LottieComposition.Factory.fromJson(getResources(), jsonObject, (composition) -> {
animationView.setComposition(composition);
animationView.playAnimation();
});
然后控制動畫執(zhí)行或者對動畫添加監(jiān)聽
animationView.addAnimatorUpdateListener((animation) -> {
// Do something.
});
animationView.playAnimation();
...
if (animationView.isAnimating()) {
// Do something.
}
...
animationView.setProgress(0.5f);
...
// 自定義動畫的速度和持續(xù)時間
ValueAnimator animator = ValueAnimator.ofFloat(0f, 1f)
.setDuration(500);
animator.addUpdateListener(animation -> {
animationView.setProgress(animation.getAnimatedValue());
});
animator.start(); // 動畫開始
...
animationView.cancelAnimation(); // 關(guān)閉
支持 After Effects 的功能
關(guān)鍵的插值器
Linear Interpolation 線性插值器
Bezier Interpolation 貝塞爾插值器
Hold Interpolation 保持插值器
Rove Across Time
Spatial Bezier
固定變換
Transform Anchor Point 錨點變換
Transform Position 位置變換
Transform Scale 伸縮比例變換
Transform Rotation 旋轉(zhuǎn)變換
Transform Opacity 透明度變換
遮罩 （碉堡了！）
Path 路徑
Opacity 不透明度
Multiple Masks (additive, subtractive, inverted) 多重多樣的遮罩
Track
- Alpha Matte 透明度遮罩
Parenting
Multiple Parenting
Nulls
圖層形狀
Rectangle (All properties) 矩形
Ellipse (All properties) 橢圓
Polystar (All properties) 北極星？什么鬼
Polygon (All properties. Integer point values only.) 多邊形
Path (All properties) 路徑
Anchor Point 錨點
Position 位置坐標
Scale 縮放
Rotation 旋轉(zhuǎn)
Opacity 不透明
Group Transforms (Anchor point, position, scale etc) 合成變換
Multiple paths in one group 多路徑合成
沖程（形狀層，外層）
Stroke Color 描邊顏色
Stroke Opacity 不透明描邊
Stroke Width 描邊寬度
Line Cap 壓線帽
Dashes 破折號
填充
Fill Color 填充顏色
Fill Opacity 填充不透明度
修剪路徑
Trim Paths Start
Trim Paths End
Trim Paths Offset
性能和內(nèi)存
1、如果組合沒有用到遮罩masks或mattes，那么性能和內(nèi)存開銷應(yīng)該相當(dāng)不錯。沒有創(chuàng)建位圖bitmap，大多數(shù)操作都是簡單的畫布操作。
2、如果組合中有遮罩masks或mattes，將在合成的地方創(chuàng)建2-3個bitmap，當(dāng)動畫師徒添加到view時，bitmap由lotti自動創(chuàng)建，并在View刪除時被回收。所以不建議在RecyclerView中使用帶有遮罩masks或mattes的動畫，可能會造成溢出。（后面看到git又把這一條更新掉了，索性還是貼上來吧）！后來看到Git更新為：如果組合有遮罩或遮罩，將使用屏幕外緩沖區(qū)，畫面以外的緩沖區(qū)的使用和性能會有影響了。
3、如果在list中使用，建議在LottieAnimationView.setAnimation（String，CacheStrategy）中使用CacheStrategy，因此動畫不必每次都反序列化。
