生产环境中的动效落地之插件-lottie

阅读大约需要7-8分钟

本篇文章主要讲解了何为lottie、lottie的优势和劣势、平台兼容性、及简单的教程。

一、简介

Lottie 是Airbnb开源的一个面向 iOS、Android、React Native 的动画库，可以实时渲染After Effects动画，并以Bodymovin作为json导出，允许应用程序像使用静态图像一样轻松使用动画，一款协同合作的高效软件。

图片来源于-lottie

二、lottie的优势和劣势

优势：

1.支持通过网络加载JSON文件，这对A / B测试很有用。

2.开发效率高—代码实现简单，更换动画方便，易于调试和维护，可以使用动画进度功能通过手势驱动，并且可以通过更改简单值来操纵动画速度。

3.数据源多样性—可从assets,sdcard,网络加载动画资源，能做到不发版本，动态更新。

4.能够导出一份JSON文件，并且支持跨平台使用，android,ios,react native通用。

劣势：

1.对设计师的要求较高，需要有一定得AE软件基础。

2.一些特殊场景难以胜任，比如遮罩里面的一些效果，ios平台下的形状运算等等效果不是很好。(后面会出详细的支持及不支持及各个平台的图示)

3.相对于属性动画，在展示大动画时帧率较低。

三、制作动画

1. 由于lottie是一款基于AE使用的插件，所以对设计的AE功底较为考验，需要先安装bodymovin，为后续导出JSON文件做准备

1.安装bodymovin，同时需要安装AE插件ZXP Installer。

2.在下载的文件包里找到build/extension/bodymovin.zxp，之后打开zxp Installer ，将插件拖入zxp中，会有步骤提示，之后就安装好了

3.打开AE在窗口/扩展里找到插件。

插件位置

4.选中需要导出的合成，点击bodymovin，进入导出JSON的界面，选定需要导出的合成,（我的较多，在最下面一个），之后点击Render，就可以生成一份JSON文件了，可以和开发愉快玩耍了。

导出JSON文件窗口

5.如想在线查看还可以继续登录在线预览窗口进行查看，同时手机可以下载Lottie Preview，可以扫描网站上的二维码在手机上进行预览。（如动效有问题，可回到AE继续调整）

lottie在线预览窗口

附件：lottie官网：https://airbnb.design/introducing-lottie/

四、lottie在各个平台的兼容性（多图）

形状图层

填充

插值

描边

变换

蒙版

轨道遮罩

合并路径

其他