前言：我们在做项目的时候，动效设计，是UI设计当中不可或缺的一环。从最初的追求炫酷效果，到现在利用动效来提升产品的用户体验。而随着硬件基础的逐步升级，动效在软件设计中的重要性也越来越大。但是对于动效的开发，一直是设计与开发之间相爱相杀的过程，要么是效果太过炫酷不能实现，要么是实现成本太大直直接砍掉需求，要么就是实现出来效果和设计效果的差太多，这也是一直困扰着设计和开发的世纪难题。

那么，就来看看今天的lottie动画吧，或许能解决你的难题！

目录：

1.什么是lottie

2.lottie的实现原理

3.lottie的实现形式，矢量非矢量

4.矢量lottie渐变怎么修复

5.lottie支持与不支持

1.什么是lottie？

Lottie是一个可以解析使用【bodymovin】插件从 Adobe After Effects中导出的格式为 json 的文件，并在 iOS、Android、macOS、React Native 和 Windows 中进行解析使用的动画渲染库。Lottie动画不仅可以100%还原动画效果，而且不需要设计标注动画路径和时间，开发直接可以调用，并且能够完美还原动画效果。

是不是听起来很心动？其实Lottie之前有很多人应该也看了一些介绍和一些软件安装的方法，这里就不作过多冗余的介绍。希望工作项目中经常涉及到动效设计，但是还在用gif图或者png序列的同学多一种实现动画的方式。

下面是官网提供的参考动画样式

2.lottie的实现原理

lottie使用json文件来作为动画数据源，通过查看sample中给出的json文件，把图片中的元素进行来拆分，并且描述每个元素的动画执行路径和执行时间。Lottie的功能就是读取这些数据，然后绘制到屏幕上。

听起来有些复杂？

我们可以理解为lottie是一个播放器，只要开发把播放器部署到相应的环境里，然后我们设计把lottie文件给到开发，开发在相应的环境中进行播放就可以了。就这么简单。

3.1 lottie动画的实现形式，非矢量lottie

非矢量lottie是用位图导入Ae做的动画，放大一定程度会产生须模糊和虚边效果（所以建议导入的时候，就按照预计缩放的最大图片进行导入，这样图片就不糊产生模糊和虚边）导出的时候生成一个文件夹和一个json文件。

优点: 能够实现更加复杂，且颜色更加丰富的动画，承载的信息量也更大。

缺点: 内存相比于矢量lottie动画内存更大，占用加载资源更多。

解决方案:在导入ae之前，保证质量的情况下尽量去压缩png图片大小。做好动画之后，用Ae先倒出PNG序列，然后再新建画布把PNG序列导入之后Ae中用lottie插件导出lottie动画，亲测过文件大小能减少30%。

https://tinypng.com

可以在这个网站压缩图片

3.2.矢量lottie

矢量lottie是用Ae中的形状绘制出的动画或者Ai中导入Ae中转化成图形做成的动画，这种动画能够全部转化成代码，所以这种动画导出的时候只有一个date.json文件，没有文件夹。

优点: 体积小，可能只有几KB，加载时耗内存小，矢量图放大缩小不会产生虚边。

缺点: 渐变色和透明渐变支持较差，有很多复杂的效果以及插件属性不支持。

综合两种Lottie动画的类型，在不同的场景中可以使用不同的解决方案，例如在比较简单的点赞动画或者高频率使用的loading动画，这种可以使用矢量lottie去设计。如果是banner图动画，或者运营广告的微动效设计，这种里面信息复杂，可以用非矢量lottie动画图设计。

4.矢量lottie渐变怎么修复？

上述是针对纯色的颜色填充动画，因为lottie我在做的过程中，遇到了很多兼容性问题，它需要兼容ios、安卓、以及前端，所以渐变色兼容的时候遇到了变成黑白色的问题。造成变黑白的原因是因为RGB颜色为16进制颜色编码，而编码器对于lottie的编码解析只能解析2进制编码，这样就需要我们把16进制编码转换成2进制编码了，才能识别渐变色

那么这种效果怎么解决？怎么由黑白的变成彩色的渐变呢？

别急！我们一点点来分析

首先我们用文本编辑器打开json文件，用搜索（快捷键command+F）搜索（0.1.1.1.0.0.0.0）这串编码，

这时候我们会看到一串这个编码

What？这谁能看得懂，一脸懵逼好么

别着急，咱们慢慢分析。首先其他我们先不看，只看[0,1,1,1,1,0,0,0]，我们知道常用的色彩模式有HSB和RGB。而本示例中的渐变参数如下，只要我们找到对应关系就能发现其中的秘密。

第1位0，代表渐变起始位置，后面跟着三个1，代表颜色RGB的色值。第4位1代表渐变结束位置，后面跟着3个0代表颜色RGB色值

好了，既然我们能够知道对应的颜色是哪个数字了，接下来就让我们把16进制的数值转化成浮点2进制的数值就可以了。

怎么转化呢？也非常简单

位置是0%就写0，位置是100%就写1

RGB颜色每个色值除以255(结果保留3位小数)就得到了我们想要的2进制色值

最终我们得到了这些数值，然后我们对应刚才的数值做一下替换

最终重新预览一下，渐变颜色恢复，就大功告成了！！！

我们可以到这里去预览我们的动画

https://lottiefiles.com/

5.lottie支持与不支持

由于这个插件技术还不太成熟，lottie动画在兼容三端的时候有一些兼容性问题，即便这样，也能满足我们大部分的App动画需求。

其实有一个能百分百的兼容解决方式，就是无论我们做的动画多么复杂，我们都导出png序列，然后再导入Ae内导出非矢量的lottie动画。但是那样会占用CPU过大，体验也会受到影响，所以在使用的时候就需要统筹兼顾了。大家可以自己试试

最后说一下这个插件的一些不足：

1、对一些AE的属性支持不够完全，一些常用属性都不支持，例如修剪路径等等

2、对系统平台版本限制，如 iOS8 及以上，安卓 API14 及以上。

3、对可交互的动画暂时还不行，主要是以播放类型动画。

因为还存在一些不足和问题，希望 Airbnb 和大家能一起完善这个开源库，让更多酷炫、体验更好的动画得以实现。给用户带来绝佳的体验。

最后我把兼容适配的表格放在了结尾下载链接，大家可以下载保存以后做lottie避免踩坑。

总结：

无论多么完美的动画都会对手机CPU有一定的影响，所以权衡好利弊再去利用动效提升产品用户体验才能更好的达到预期的效果，好的动画是能够带来数据的增长和转化率的，所以善于使用动画来提升数据也是设计师必备的一项技能。如果对接技术的时候，开发不知道如何部署和控制动效，直接吧这个链接给他们就可以了。Lottie官方介绍和开发文档：http://airbnb.io/lottie/#/README

Powered by Froala Editor