本文由云+社区宣布
作者:paulzeng
导语：Lottie是Airbnb开源的一个面向 iOS、Android、React Native 的动画库，可完成异常庞杂的动画，运用也及其简朴，极大开释人力，值得一试。
一、简介
Lottie 是Airbnb开源的一个面向 iOS、Android、React Native 的动画库，能剖析 Adobe After Effects 导出的动画，而且能让原生 App 像运用静态素材一样运用这些动画，圆满完成动画结果。
如今运用各平台的 native 代码完成一套庞杂的动画是一件很难题而且耗时的事，我们须要为差别尺寸的屏幕加载差别的素材资本，还须要写大批难保护的代码，而Lottie能够做到同一个动画文件在差别平台上完成雷同的结果，极大削减开辟时候，完成差别的动画，只须要设置差别的动画文件即可，极大削减开辟和保护本钱。
官方结果图：
二、怎样运用
Lottie支撑多平台，运用同一个JSON动画文件，可在差别平台完成雷同的结果。
Android 经由历程Airbnb的开源项目lottie-android完成，最低支撑 API 16;
IOS 经由历程Airbnb的开源项目lottie-ios完成，最低支撑 IOS 7;
React Native，经由历程Airbnb的开源项目lottie-react-native完成;
这是React logo的动画，以下以Android平台为例怎样运用Lottie
1.下载Lottie
在项目的 build.gradle 文件增添依靠
dependencies {
compile 'com.airbnb.android:lottie:2.1.0'
}2.增添 Adobe After Effects 导出的动画文件
Lottie默许读取Assets中的文件，我们须要把动画文件react.json 保存在app/src/main/assets文件里。（文件比较大，只展现了部分内容，文件链接）
{
"v": "4.6.0",
"fr": 29.9700012207031,
"ip": 0,
"op": 141.000005743048,
"w": 800,
"h": 800,
"ddd": 0,
"assets": [ ],
"layers": [
{
"ddd": 0,
"ind": 0,
"ty": 4,
"nm": "center_circle",
"ks": {...},
"ao": 0,
"shapes": [...],
"ip": 0,
"op": 900.000036657751,
"st": 0,
"bm": 0,
"sr": 1
},
{...},
{...},
{...}
]
}3.运用Lottie
在规划文件中直接增添Lottie的LottieAnimationView控件，即可在界面显现React logo动画结果
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/animation_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:lottie_fileName="react.json"
app:lottie_loop="true"
app:lottie_autoPlay="true" />4.引入Lottie影响
(1)兼容性
Lottie 最低支撑版本API 16，低版本系统须要做降级动画或许不展现动画
(2)装置包
| 影响项 | 运用前 | 运用后 | 结论 |
|---|---|---|---|
| 要领数 | 144807 | 145891 | 增添1084个要领 |
| 装置包大小 | 41969KB | 42037KB | 增大68KB |
这是用全民K歌release包的测试数据，lottie自身要领数不小，有要领数超标和装置包过大的风险，营业可自行评价
注：LottieAnimationView继续于V7的AppCompatImageView，须要引入V7兼容包，依据营业须要，能够源码引入Lottie，让LottieAnimationView继续与ImageView，就不必引入V7兼容包，可减小装置大小。
三、运用小技能
1.加载SDCard动画文件
StringBuilder stringBuilder = new StringBuilder();
BufferedReader bufferedReader = new BufferedReader(new FileReader(new File(JSON_PATH + "react.json")));
String content = null;
while ((content = bufferedReader.readLine()) != null){
stringBuilder.append(content);
}
JSONObject jsonObject = new JSONObject(stringBuilder.toString());
animationView.setAnimation(jsonObject);
animationView.loop(true);
animationView.playAnimation();2.加载SDCard图片
animationView.setImageAssetDelegate(new ImageAssetDelegate() {
@Override
public Bitmap fetchBitmap(LottieImageAsset asset) {
try {
FileInputStream fileInputStream = new FileInputStream(IMAGE_PATH + asset.getFileName());
return BitmapFactory.decodeStream(fileInputStream); ///把流转化为Bitmap图片
} catch (Exception e) {
Log.e(TAG, "", e);
}
return null;
}
});3.加载SDCard字体
animationView.setFontAssetDelegate(new FontAssetDelegate(){
public Typeface fetchFont(String fontFamily) {
Typeface customFont = Typeface.createFromFile(FONT_PATH + fontFamily);
return customFont;
}
});4.缓存动画
/*
* Lottie内部有两个缓存map（强援用缓存，弱援用缓存），在动画文件加载完成后会依据设置的缓存战略缓存动画，轻易下次运用。
*/
animationView.setAnimation(animation, LottieAnimationView.CacheStrategy.Strong); //强缓存
animationView.setAnimation(animation, LottieAnimationView.CacheStrategy.Weak); //弱缓存四、Lottie完成道理
设想师把一张庞杂的图片运用多个图层来示意，每一个图层展现一部分内容，图层中的内容也能够拆分为多个元素。拆分元素以后，依据动画需求，能够零丁对图层或许图层中的元素做平移、扭转、压缩等动画。
Lottie的运用的资本是须要先经由历程bodymovin( bodymovin 插件自身是用于网页上显现种种AE结果的一个开源库)将 Adobe After Effects (AE)天生的aep动画工程文件转换为通用的json花样形貌文件。Lottie则担任剖析动画的数据，盘算每一个动画在某个时候点的状况，正确地绘制到屏幕上。
导出的json动画形貌文件：
{
"v": "4.6.0",
"fr": 29.9700012207031,
"ip": 0,
"op": 141.000005743048,
"w": 800,
"h": 800,
"ddd": 0,
"assets": [ ],
"layers": [
{...},
]
}Lottie重要类图：
图：lottie_class
Lottie对外经由历程控件LottieAnimationView暴露接口，掌握动画。
LottieAnimationView继续自ImageView，经由历程当前时候绘制canvas显现到界面上。这里有两个症结类：LottieComposition 担任剖析json形貌文件，把json内容转成Java数据对象；LottieDrawable担任绘制，把LottieComposition转成的数据对象绘制成drawable显现到View上。递次以下：
1.json文件剖析
LottieComposition担任剖析json文件，竖立数据到java对象的映照关联。
（1）剖析json外部构造
LottieComposition封装全部动画的信息，包含动画大小，动画时长，帧率，用到的图片，字体，图层等等。
json外部构造
{
"v": "4.6.0", //bodymovin的版本
"fr": 29.9700012207031, //帧率
"ip": 0, //肇端症结帧
"op": 141.000005743048, //完毕症结帧
"w": 800, //动画宽度
"h": 800, //动画高度
"ddd": 0,
"assets": [...] //资本信息
"layers": [...] //图层信息
}
//剖析json的源码
static LottieComposition fromJsonSync(Resources res, JSONObject json) {
Rect bounds = null;
float scale = res.getDisplayMetrics().density;
int width = json.optInt("w", -1);
int height = json.optInt("h", -1);
if (width != -1 && height != -1) {
int scaledWidth = (int) (width * scale);
int scaledHeight = (int) (height * scale);
bounds = new Rect(0, 0, scaledWidth, scaledHeight);
}
long startFrame = json.optLong("ip", 0);
long endFrame = json.optLong("op", 0);
float frameRate = (float) json.optDouble("fr", 0);
String version = json.optString("v");
String[] versions = version.split("[.]");
int major = Integer.parseInt(versions[0]);
int minor = Integer.parseInt(versions[1]);
int patch = Integer.parseInt(versions[2]);
LottieComposition composition = new LottieComposition(
bounds, startFrame, endFrame, frameRate, scale, major, minor, patch);
JSONArray assetsJson = json.optJSONArray("assets");
parseImages(assetsJson, composition); //剖析图片
parsePrecomps(assetsJson, composition);
parseFonts(json.optJSONObject("fonts"), composition); //剖析字体
parseChars(json.optJSONArray("chars"), composition); //剖析字符
parseLayers(json, composition); //剖析图层
return composition;
}（2）剖析图片资本
LottieImageAsset类封装图片信息
"assets": [ //资本信息
{ //第一张图片
"id": "image_0", //图片id
"w": 58, //图片宽度
"h": 31, //图片高度
"u": "images/", //图片途径
"p": "img_0.png" //图片称号
},
{...} //第n张图片
]
static LottieImageAsset newInstance(JSONObject imageJson) {
return new LottieImageAsset(imageJson.optInt("w"), imageJson.optInt("h"), imageJson.optString("id"),
imageJson.optString("p"));
}（3）剖析图层
Layer封装图层信息，如今lottie只支撑PreComp，Solid，Image，Null，Shape，Text这6中图层。
"layers": [ //图层信息
{ //第一层动画
"ddd": 0,
"ind": 0, //layer id 图层 id
"ty": 4, //图层范例
"nm": "center_circle",
"ks": {...}, //动画
"ao": 0,
"shapes": [...],
"ip": 0, //inFrame 该图层肇端症结帧
"op": 90, //outFrame 该图层完毕症结帧
"st": 0, //startFrame 最先
"bm": 0,
"sr": 1
},
{...} //第n层动画
]2.怎样动起来
Lottie时序图：
应用属性动画掌握进度，每次进度转变关照到每一层，触发LottieAnimationView重绘。
(1)应用属性动画盘算进度
这里用到了属性动画来发生一个0～1的插值，依据差别的插值来设置当前动画进度。
代码以下：
public LottieDrawable() {
animator.setRepeatCount(0);
animator.setInterpolator(new LinearInterpolator());
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
if (systemAnimationsAreDisabled) {
animator.cancel();
setProgress(1f);
} else {
setProgress((float) animation.getAnimatedValue());
}
}
});
}(2)经由历程CompositionLayer把进度通报到各个图层
@Override
public void setProgress(@FloatRange(from = 0f, to = 1f) float progress) {
super.setProgress(progress);
if (timeRemapping != null) {
long duration = lottieDrawable.getComposition().getDuration();
long remappedTime = (long) (timeRemapping.getValue() * 1000);
progress = remappedTime / (float) duration;
}
if (layerModel.getTimeStretch() != 0) {
progress /= layerModel.getTimeStretch();
}
progress -= layerModel.getStartProgress();
for (int i = layers.size() - 1; i >= 0; i--) {
layers.get(i).setProgress(progress);
}
}(3)关照进度转变
void setProgress(@FloatRange(from = 0f, to = 1f) float progress) {
if (progress < getStartDelayProgress()) {
progress = 0f;
} else if (progress > getEndProgress()) {
progress = 1f;
}
if (progress == this.progress) {
return;
}
this.progress = progress;
for (int i = 0; i < listeners.size(); i++) {
listeners.get(i).onValueChanged();
}
}(4)终究回调到LottieAnimationView的invalidateDrawable
@Override
public void invalidateDrawable(@NonNull Drawable dr) {
if (getDrawable() == lottieDrawable) {
// We always want to invalidate the root drawable so it redraws the whole drawable.
// Eventually it would be great to be able to invalidate just the changed region.
super.invalidateDrawable(lottieDrawable);
} else {
// Otherwise work as regular ImageView
super.invalidateDrawable(dr);
}
}(5)末了触发LottieDrawable重绘
@Override
public void draw(@NonNull Canvas canvas) {
...
matrix.reset();
matrix.preScale(scale, scale);
compositionLayer.draw(canvas, matrix, alpha); //这里会挪用一切layer的绘制要领
if (hasExtraScale) {
canvas.restore();
}
}五、机能
1.官方申明
假如没有mask和mattes，那末机能和内存异常好，没有bitmap建立，大部分操纵都是简朴的cavas绘制。
假如存在mattes，将会建立2～3个bitmap。bitmap在动画加载到window时被建立，被window删除时接纳。所以不宜在RecyclerView中运用见谅mattes或许mask的动画，不然会引起bitmap发抖。除了内存发抖，mattes和mask中必要的bitmap.eraseColor()和canvas.drawBitmap()也会下降动画机能。关于简朴的动画，在实际运用时机能不太显著。
假如在列表中运用动画，引荐运用缓存LottieAnimationView.setAnimation(String, CacheStrategy) 。
2.属性动画和Lottie动画对照
以下机能对照是以K歌内单个礼品动画结果
| 属性动画 | lottie运用硬件加速 | lottie未运用硬件加速 | |
|---|---|---|---|
| 帧率 | | | |
| 内容 | | | |
| CPU | | | |
Lottie动画在未开启硬件加速的情况下，帧率、内存，CPU都比属性动画差，开启硬件加速后，机能差不多。
3、未开启硬件加速，Lottie动画大小帧率对照
| 0.12倍 | 1倍 |
|---|---|
| |
重要耗时在draw要领，绘制地区越小，耗时越小
六、K歌可用的场景
1.特征指导视频
全民K歌每一个大版本的初次启动都邑有视频指导动画，每次都邑在清晰度和文件大小均衡，终究导出一个大概有3-4M的指导视频，运用lottie可进步动画清晰度和减小装置包大小
2.loading动画
3.礼品动画
这是全民K歌的礼品面板，内部有大批礼品动画，每一个礼品动画都不雷同，动画历程中有大批的扭转，透明度，大小的变化，须要用属性动画完成，异常贫苦，代码可保护性也比较差。对照运用lottie后，有几大上风：
1、100%完成设想结果
2、客户端代码量少少，易保护
3、每一个动画可动态设置动画款式（加载差别的json）
4、一切动画都可动态设置，动画设置文件，素材都可从网上加载
4.说唱
K歌的说唱功用须要歌词根据特定的动画展现出来，这里就触及歌词放大，减少，扭转等等殊效。完成时，依据当前时候，在canvas上歌词绘制出来，终究再和声响融会在一起天生一个MV视频，这里就致使动画不能迥殊庞杂，而且有肯定的规律。
假如运用lottie后，能够把结果导出到json动画文件里，客户端加载动画文件，轮回设置进度，读取每帧画面，再和声响融会天生MV。
上风：
1.动画雄厚
2.代码量少
3.可运用设想导出的字体
代码
animationView.setProgress(progress); //设置当前进度
animationView.buildDrawingCache(); //强迫缓存绘制数据
Bitmap image = animationView.getDrawingCache(); //猎取当前绘制数据七、总结
1.劣势
（1）机能不够好—某些动画殊效，内存和机能不够好；相关于属性动画，在展现大动画时，帧率较低
2.上风
（1）开辟效率高—代码完成简朴，替换动画轻易，易于调试和保护。
（2）数据源多样性—可从assets,sdcard,收集加载动画资本，能做到不发版本，动态更新
（3）跨平台—设想稿导出一份动画形貌文件，android,ios,react native通用
Lottie运用简朴，易于上手，异常值得尝试。
八、参考资料
1.GitHub – airbnb/lottie-android: Render After Effects animations natively on Android and iOS
2.Lottie的运用及道理浅析 – 彩笔学长 – CSDN博客
3.从json文件到炫酷动画-Lottie完成思绪和源码剖析 – 简书
此文已由作者受权腾讯云+社区在各渠道宣布
猎取更多新颖手艺干货，能够关注我们腾讯云手艺社区-云加社区官方号及知乎机构号
