Lottie for Android：一个解放开发者双手的动画神器

您所在的位置：网站首页 › lottie官网 › Lottie for Android：一个解放开发者双手的动画神器

Lottie for Android：一个解放开发者双手的动画神器

2023-11-24 06:01| 来源: 网络整理| 查看: 265

Lottie 前言

动画是我们日常开发中必不可少的一个要点，比如某个场景要实现打勾的效果，一开始你的设想可能是这样子的：

用代码实现起来可能还好，绘制圆圈，一段圆弧圆周运动，绘制一个打勾路径，结合动画实现，美滋滋。但是等到设计师出图的那一天，是这样的：

看了效果图，内心有一句话不知道当不当讲

但是不要慌，你能不能想到竟然有这么一个库，可以让设计师"帮你实现动画效果"！没错，它就是今天的主角——Lottie。Lottie 是Airbnb开源的一个面向 iOS、Android、React Native 的动画库，能解析 Adobe After Effects 视频制作软件导出的动画，并且在代码中能通过api直接调用这些生成的动画文件，完美实现动画效果，Lottie在这种时候就是救世主级别的存在了。

Lottie官网：https://lottiefiles.com/

lottie效果图.gif

如何使用

看了效果，我们看下如何在Android中快速使用这个库实现各种炫酷动画。

1.导入Lottie库

在app的gradle中导入如下依赖：

dependencies { compile 'com.airbnb.android:lottie:2.2.0' } 最新版本可查看GitHub地址：https://github.com/airbnb/lottie-android

注意：Lottie只支持Api16以上，如果项目中minSdkVersion小于16会报错。

2.导入动画文件

Lottie加载动画是靠解析Json文件来实现的，所以需要设计师从After Effect等软件中制作好动画并生成一个Json文件，文件的内容大概是下面这个样子：

json示意图

尽管看起来很复杂，但这都是通过软件生成的，我们只需要将其导入到项目中即可。由于Lottie默认是读取工程的Assets目录，所以我们将Json文件放到src/main/assets目录下。

3.使用姿势 1）静态方式

Lottie库提供了一个LottieAnimationView控件，它本质是一个ImageView，可直接在布局文件中声明：

这里列举了有几个lottie的基本属性

lottie_fileName 调用的Json文件名 lottie_loop 是否开启循环动画 lottie_autoPlay 是否开启自动播放

当然lottie还有很多其他的属性，例如：

lottie_repeatCount 动画重复次数 lottie_repeatMode 动画重复模式 lottie_scale 放大倍数

这里就不一一列举了，运行后效果如下：

lottie demo效果图.gif

2）动态方式

Lottie也支持在代码中动态调用接口：

LottieAnimationView lottieAnimationView = findViewById(R.id.anim_view); lottieAnimationView.setAnimation("anim.json"); lottieAnimationView.loop(true); lottieAnimationView.playAnimation();

3）监听动画进度

Lottie同样提供了监听动画的接口，而且还是我们熟悉的ValueAnimator

lottieAnimationView.addAnimatorUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { // 判断动画加载结束 Log.d("Lottie", "" + valueAnimator.getAnimatedFraction()); } });

4）加载动画优化

Lottie的性能比属性动画略逊一筹，不过支持开启硬件加速：

lottieAnimationView.useHardwareAcceleration(true);

Lottie支持对动画的缓存，会在动画加载完成后将其缓存为强缓存和弱缓存

lottieAnimationView.setAnimation("anim.json", LottieAnimationView.CacheStrategy.Strong); //强缓存 lottieAnimationView.setAnimation("anim.json", LottieAnimationView.CacheStrategy.Weak); //弱缓存

其内部是维护了两个HashMap：

private static final Map STRONG_REF_CACHE = new HashMap(); private static final Map WEAK_REF_CACHE = new HashMap(); public void setAnimation(final String animationName, final CacheStrategy cacheStrategy) { //...... if (cacheStrategy == CacheStrategy.Strong) { STRONG_REF_CACHE.put(animationName, composition); } else if (cacheStrategy == CacheStrategy.Weak) { WEAK_REF_CACHE.put(animationName, new WeakReference(composition)); } //..... }

原理解析

我们从LottieAnimationView的playAnimation()这个方法看下Lottie的动画流程：

public void playAnimation() { lottieDrawable.playAnimation(); enableOrDisableHardwareLayer(); }

这里调用了一个lottieDrawable的playAnimation()，而lottieDrawable是一个LottieDrawable：

LottieDrawable LottieDrawable继承于Drawable，Lottie的动画都是在这个LottieDrawable里绘制的，它里面维护了一个LottieValueAnimator(继承于ValueAnimator)，我们调用的loop或者playAnimation之类的方法其实本质上都是调用了它里面这个属性动画的Api：

public void loop(boolean loop) { animator.setRepeatCount(loop ? ValueAnimator.INFINITE : 0); } private void playAnimation(boolean setStartTime) { if (compositionLayer == null) { lazyCompositionTasks.add(new LazyCompositionTask() { @Override public void run(LottieComposition composition) { playAnimation(); } }); return; } long playTime = setStartTime ? (long) (progress * animator.getDuration()) : 0; animator.start(); if (setStartTime) { animator.setCurrentPlayTime(playTime); } }

那么它是怎么通过这个属性动画去实现绘制的呢？在LottieDrawable的构造方法里，设置了属性动画的监听器，然后将进度传给setProgress：

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()); } } }); } public void setProgress(@FloatRange(from = 0f, to = 1f) float progress) { this.progress = progress; if (compositionLayer != null) { compositionLayer.setProgress(progress); } }

可以看到动画过程中会不断触发setProgress，setProgress中调用了CompositionLayer的setProgress，然后再通过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); } }

各个图层收到通知之后，再处理后回调给LottieDrawable：

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(); } } @Override public void onValueChanged() { invalidateSelf(); } private void invalidateSelf() { lottieDrawable.invalidateSelf(); }

LottieDrawable收到这些图层的通知就会调用invalidateDrawable来不断刷新自己：

@Override public void invalidateSelf() { final Callback callback = getCallback(); if (callback != null) { callback.invalidateDrawable(this); } }

以上是Lottie动画绘制的逻辑，时序图如下：

Lottie时序图

那么Lottie是怎么将这些Json数据跟动画关联起来的呢？After Effect制作动画的原理是将动画分为很多个图层，且每个图层有各自的细节动画，这样叠加合成最终的效果。那么Lottie也是同理，分为很多个图层(Layer)，我们看下Json的外层结构如下：

{ "v": "4.6.0", //bodymovin的版本 "fr": 24.291553280921, //帧率 "ip": 0, //起始关键帧 "op": 84.0029442951, //结束关键帧 "w": 100, //动画宽度 "h": 100, //动画高度 "ddd": 0, "assets": [...] //资源信息 "layers": [...] //图层信息 }

Lottie会通过Json里的数据，解析出动画需要的关键帧信息，并且还有各个图层的动画数据，我们依旧是由表及里，从LottieAnimationView的setAnimation()开始看：

public void setAnimation(String animationName) { setAnimation(animationName, defaultCacheStrategy); } public void setAnimation(final String animationName, final CacheStrategy cacheStrategy) { //...省略部分代码 compositionLoader = LottieComposition.Factory.fromAssetFileName(getContext(), animationName, new OnCompositionLoadedListener() { @Override public void onCompositionLoaded(LottieComposition composition) { if (cacheStrategy == CacheStrategy.Strong) { STRONG_REF_CACHE.put(animationName, composition); } else if (cacheStrategy == CacheStrategy.Weak) { WEAK_REF_CACHE.put(animationName, new WeakReference(composition)); } setComposition(composition); } }); }

通过工厂模式从LottieComposition的Factory里读取我们Asset中的Json文件，并且将其转换为LottieComposition对象，那么看下LottieComposition:

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; }

LottieComposition其实就相当于Json和我们动画属性的一个转换器，将我们的Json数据解析成我们需要的内存数据，然后根据数据创建出一个或多个图层，再结合我们刚才分析的属性动画，实现最终各种酷炫的效果。

总结

Lottie是一个强大的动画库，许多代码实现比较复杂或者难以实现的动画，通过Lottie都能轻易实现，开发效率大大提高，并且后期万一要更换动画，同样十分方便。又或者可以将动画Json通过网络下发，实现动态更换客户端的动画效果。

参考

Lottie，让动画如此简单

GitHub：GitHub-ZJYWidget CSDN博客：IT_ZJYANG 简书：Android小Y 在 GitHub 上建了一个集合炫酷自定义View的项目，里面有很多实用的自定义View源码及demo，会长期维护，欢迎Star~ 如有不足之处或建议还望指正，相互学习，相互进步，如果觉得不错动动小手给个Star，谢谢~

【本文地址】

Lottie for Android：一个解放开发者双手的动画神器

Lottie for Android：一个解放开发者双手的动画神器

今日新闻

推荐新闻