资讯专栏INFORMATION COLUMN

这样做动画交互,一点都不费力!

Meathill / 2874人阅读

摘要:图层信息第一层动画图层图层类型动画该图层起始关键帧该图层结束关键帧开始第层动画如何动起来时序图利用属性动画控制进度,每次进度改变通知到每一层,触发重绘。对于简单的动画,在实际使用时性能不太明显。

</>复制代码

  1. 本文由云+社区发表

    作者:paulzeng

  2. 导语: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 文件添加依赖

</>复制代码

  1. dependencies {
  2. compile "com.airbnb.android:lottie:2.1.0"
  3. }
2.添加 Adobe After Effects 导出的动画文件

Lottie默认读取Assets中的文件,我们需要把动画文件react.json 保存在app/src/main/assets文件里。(文件比较大,只展示了部分内容,文件链接)

</>复制代码

  1. {
  2. "v": "4.6.0",
  3. "fr": 29.9700012207031,
  4. "ip": 0,
  5. "op": 141.000005743048,
  6. "w": 800,
  7. "h": 800,
  8. "ffffd": 0,
  9. "assets": [ ],
  10. "layers": [
  11. {
  12. "ffffd": 0,
  13. "ind": 0,
  14. "ty": 4,
  15. "nm": "center_circle",
  16. "ks": {...},
  17. "ao": 0,
  18. "shapes": [...],
  19. "ip": 0,
  20. "op": 900.000036657751,
  21. "st": 0,
  22. "bm": 0,
  23. "sr": 1
  24. },
  25. {...},
  26. {...},
  27. {...}
  28. ]
  29. }
3.使用Lottie

在布局文件中直接添加Lottie的LottieAnimationView控件,即可在界面显示React logo动画效果

</>复制代码

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动画文件

</>复制代码

  1. StringBuilder stringBuilder = new StringBuilder();
  2. BufferedReader bufferedReader = new BufferedReader(new FileReader(new File(JSON_PATH + "react.json")));
  3. String content = null;
  4. while ((content = bufferedReader.readLine()) != null){
  5. stringBuilder.append(content);
  6. }
  7. JSONObject jsonObject = new JSONObject(stringBuilder.toString());
  8. animationView.setAnimation(jsonObject);
  9. animationView.loop(true);
  10. animationView.playAnimation();
2.加载SDCard图片

</>复制代码

  1. animationView.setImageAssetDelegate(new ImageAssetDelegate() {
  2. @Override
  3. public Bitmap fetchBitmap(LottieImageAsset asset) {
  4. try {
  5. FileInputStream fileInputStream = new FileInputStream(IMAGE_PATH + asset.getFileName());
  6. return BitmapFactory.decodeStream(fileInputStream); ///把流转化为Bitmap图片
  7. } catch (Exception e) {
  8. Log.e(TAG, "", e);
  9. }
  10. return null;
  11. }
  12. });
3.加载SDCard字体

</>复制代码

  1. animationView.setFontAssetDelegate(new FontAssetDelegate(){
  2. public Typeface fetchFont(String fontFamily) {
  3. Typeface customFont = Typeface.createFromFile(FONT_PATH + fontFamily);
  4. return customFont;
  5. }
  6. });
4.缓存动画

</>复制代码

  1. /*
  2. * Lottie内部有两个缓存map(强引用缓存,弱引用缓存),在动画文件加载完成后会根据设置的缓存策略缓存动画,方便下次使用。
  3. */
  4. animationView.setAnimation(animation, LottieAnimationView.CacheStrategy.Strong); //强缓存
  5. animationView.setAnimation(animation, LottieAnimationView.CacheStrategy.Weak); //弱缓存
四、Lottie实现原理

设计师把一张复杂的图片使用多个图层来表示,每个图层展示一部分内容,图层中的内容也可以拆分为多个元素。拆分元素之后,根据动画需求,可以多带带对图层或者图层中的元素做平移、旋转、收缩等动画。

Lottie的使用的资源是需要先通过bodymovin( bodymovin 插件本身是用于网页上呈现各种AE效果的一个开源库)将 Adobe After Effects (AE)生成的aep动画工程文件转换为通用的json格式描述文件。Lottie则负责解析动画的数据,计算每个动画在某个时间点的状态,准确地绘制到屏幕上。

导出的json动画描述文件:

</>复制代码

  1. {
  2. "v": "4.6.0",
  3. "fr": 29.9700012207031,
  4. "ip": 0,
  5. "op": 141.000005743048,
  6. "w": 800,
  7. "h": 800,
  8. "ffffd": 0,
  9. "assets": [ ],
  10. "layers": [
  11. {...},
  12. ]
  13. }

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外部结构

</>复制代码

  1. {
  2. "v": "4.6.0", //bodymovin的版本
  3. "fr": 29.9700012207031, //帧率
  4. "ip": 0, //起始关键帧
  5. "op": 141.000005743048, //结束关键帧
  6. "w": 800, //动画宽度
  7. "h": 800, //动画高度
  8. "ffffd": 0,
  9. "assets": [...] //资源信息
  10. "layers": [...] //图层信息
  11. }
  12. //解析json的源码
  13. static LottieComposition fromJsonSync(Resources res, JSONObject json) {
  14. Rect bounds = null;
  15. float scale = res.getDisplayMetrics().density;
  16. int width = json.optInt("w", -1);
  17. int height = json.optInt("h", -1);
  18. if (width != -1 && height != -1) {
  19. int scaledWidth = (int) (width * scale);
  20. int scaledHeight = (int) (height * scale);
  21. bounds = new Rect(0, 0, scaledWidth, scaledHeight);
  22. }
  23. long startFrame = json.optLong("ip", 0);
  24. long endFrame = json.optLong("op", 0);
  25. float frameRate = (float) json.optDouble("fr", 0);
  26. String version = json.optString("v");
  27. String[] versions = version.split("[.]");
  28. int major = Integer.parseInt(versions[0]);
  29. int minor = Integer.parseInt(versions[1]);
  30. int patch = Integer.parseInt(versions[2]);
  31. LottieComposition composition = new LottieComposition(
  32. bounds, startFrame, endFrame, frameRate, scale, major, minor, patch);
  33. JSONArray assetsJson = json.optJSONArray("assets");
  34. parseImages(assetsJson, composition); //解析图片
  35. parsePrecomps(assetsJson, composition);
  36. parseFonts(json.optJSONObject("fonts"), composition); //解析字体
  37. parseChars(json.optJSONArray("chars"), composition); //解析字符
  38. parseLayers(json, composition); //解析图层
  39. return composition;
  40. }

(2)解析图片资源

</>复制代码

  1. LottieImageAsset类封装图片信息
  2. "assets": [ //资源信息
  3. { //第一张图片
  4. "id": "image_0", //图片id
  5. "w": 58, //图片宽度
  6. "h": 31, //图片高度
  7. "u": "images/", //图片路径
  8. "p": "img_0.png" //图片名称
  9. },
  10. {...} //第n张图片
  11. ]
  12. static LottieImageAsset newInstance(JSONObject imageJson) {
  13. return new LottieImageAsset(imageJson.optInt("w"), imageJson.optInt("h"), imageJson.optString("id"),
  14. imageJson.optString("p"));
  15. }

(3)解析图层

Layer封装图层信息,现在lottie只支持PreComp,Solid,Image,Null,Shape,Text这6中图层。

</>复制代码

  1. "layers": [ //图层信息
  2. { //第一层动画
  3. "ffffd": 0,
  4. "ind": 0, //layer id 图层 id
  5. "ty": 4, //图层类型
  6. "nm": "center_circle",
  7. "ks": {...}, //动画
  8. "ao": 0,
  9. "shapes": [...],
  10. "ip": 0, //inFrame 该图层起始关键帧
  11. "op": 90, //outFrame 该图层结束关键帧
  12. "st": 0, //startFrame 开始
  13. "bm": 0,
  14. "sr": 1
  15. },
  16. {...} //第n层动画
  17. ]
2.如何动起来

Lottie时序图:

利用属性动画控制进度,每次进度改变通知到每一层,触发LottieAnimationView重绘。

(1)利用属性动画计算进度

这里用到了属性动画来产生一个0~1的插值,根据不同的插值来设置当前动画进度。

代码如下:

</>复制代码

  1. public LottieDrawable() {
  2. animator.setRepeatCount(0);
  3. animator.setInterpolator(new LinearInterpolator());
  4. animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
  5. @Override
  6. public void onAnimationUpdate(ValueAnimator animation) {
  7. if (systemAnimationsAreDisabled) {
  8. animator.cancel();
  9. setProgress(1f);
  10. } else {
  11. setProgress((float) animation.getAnimatedValue());
  12. }
  13. }
  14. });
  15. }

(2)通过CompositionLayer把进度传递到各个图层

</>复制代码

  1. @Override
  2. public void setProgress(@FloatRange(from = 0f, to = 1f) float progress) {
  3. super.setProgress(progress);
  4. if (timeRemapping != null) {
  5. long duration = lottieDrawable.getComposition().getDuration();
  6. long remappedTime = (long) (timeRemapping.getValue() * 1000);
  7. progress = remappedTime / (float) duration;
  8. }
  9. if (layerModel.getTimeStretch() != 0) {
  10. progress /= layerModel.getTimeStretch();
  11. }
  12. progress -= layerModel.getStartProgress();
  13. for (int i = layers.size() - 1; i >= 0; i--) {
  14. layers.get(i).setProgress(progress);
  15. }
  16. }

(3)通知进度改变

</>复制代码

  1. void setProgress(@FloatRange(from = 0f, to = 1f) float progress) {
  2. if (progress < getStartDelayProgress()) {
  3. progress = 0f;
  4. } else if (progress > getEndProgress()) {
  5. progress = 1f;
  6. }
  7. if (progress == this.progress) {
  8. return;
  9. }
  10. this.progress = progress;
  11. for (int i = 0; i < listeners.size(); i++) {
  12. listeners.get(i).onValueChanged();
  13. }
  14. }

(4)最终回调到LottieAnimationView的invalidateDrawable

</>复制代码

  1. @Override
  2. public void invalidateDrawable(@NonNull Drawable dr) {
  3. if (getDrawable() == lottieDrawable) {
  4. // We always want to invalidate the root drawable so it redraws the whole drawable.
  5. // Eventually it would be great to be able to invalidate just the changed region.
  6. super.invalidateDrawable(lottieDrawable);
  7. } else {
  8. // Otherwise work as regular ImageView
  9. super.invalidateDrawable(dr);
  10. }
  11. }

(5)最后触发LottieDrawable重绘

</>复制代码

  1. @Override
  2. public void draw(@NonNull Canvas canvas) {
  3. ...
  4. matrix.reset();
  5. matrix.preScale(scale, scale);
  6. compositionLayer.draw(canvas, matrix, alpha); //这里会调用所有layer的绘制方法
  7. if (hasExtraScale) {
  8. canvas.restore();
  9. }
  10. }
五、性能 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.可使用设计导出的字体

代码

</>复制代码

  1. animationView.setProgress(progress); //设置当前进度
  2. animationView.buildDrawingCache(); //强制缓存绘制数据
  3. 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实现思路和源码分析 - 简书

4.Most Popular - LottieFiles

此文已由作者授权腾讯云+社区在各渠道发布

获取更多新鲜技术干货,可以关注我们腾讯云技术社区-云加社区官方号及知乎机构号

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/100844.html

相关文章

  • ReactNative: 使用Animted API实现向上滚动时隐藏Header组件

    摘要:只能自己上了思路很清楚监听滚动事件,动态修改组件和组件的值当然,他们默认都是。插值对输入范围和输出范围之间做一个映射,通常使用线性插值,但也支持缓和函数。 想先推荐一下近期在写的一个React Native项目,名字叫 Gakki :是一个Mastodon的第三方客户端 (Android App) 预览 showImg(https://segmentfault.com/img/remo...

    Aklman 评论0 收藏0
  • 【算法日积月累】0-写在前面的话

    摘要:现在发出来的版本,我重新使用了语言实现。其实我之前介绍的老师课程也大量参考和使用算法这本书上的思路和例题。看这本书主要是让我觉得算法可以以比较轻松的方式入门。剑指这本书主要用于准备算法面试,在网络上备受好评。 我是一个半路出家的程序员,在我刚开始从事编码工作的头几年,我没有接触过算法和数据结构,觉得它们是只会在我找工作的时候用得到的知识。尽管有很多人跟我说过算法和数据结构无比重要,我也...

    flybywind 评论0 收藏0
  • 每周一点canvas动画——序

    摘要:每周一点动画是一个系列文章,本文并不对的做过多的介绍,我默认你已经了解基本的绘图,并在此告诉你如何使用简单的数学与物理知识创建相当酷炫的动画。下一节,我们就正式开始我们的动画之旅 《每周一点canvas动画》是一个系列文章,本文并不对canvas的API做过多的介绍,我默认你已经了解基本的canvas绘图API,并在此告诉你如何使用简单的数学与物理知识创建相当酷炫的动画。一说到物理和数...

    svtter 评论0 收藏0
  • Web项目如何防止客户端重复发送请求

    摘要:在项目中,有一些请求或操作会对数据产生影响比如新增删除更新,针对这类请求一般都需要做一些保护,以防止用户有意或无意的重复发起这样的请求导致的数据错乱。本文总结了一些防止客户端重复发送请求的方法。 在Web项目中,有一些请求或操作会对数据产生影响(比如新增、删除、更新),针对这类请求一般都需要做一些保护,以防止用户有意或无意的重复发起这样的请求导致的数据错乱。 本文总结了一些防止客户端重...

    fireflow 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<