由 Airbnb 开发的 Lottie 是一个将 After Effects 动画提供给任意一个 iOS,macOS,Android 还有 React Native 原生 APP 的文件库。
这些动画通过一个叫 Bodymovin 的开源 After Effects 插件,以 JSON 文件的形式进行输出。Lottie 通过 JSON 格式下载动画数据并实时提供给开发者。
下载安装
1.首先你需要下载AE,这里就不多说了,自行下载
我一般下载adobe的软件都是通过Adobe Creative Cloud,再用工具pj。
2.下载 bodymovin, 点击view raw即可
安装插件
在windows下,用以下方式安装该插件:
- 解压缩
bodymovin.zxp
文件,到C:\Program Files (x86)\Common Files\Adobe\CEP\extensions
目录下,mac用户解压到以下目录
/Library/Application\ Support/Adobe/CEP/extensions/bodymovin
- 配置注册表,按
win+R
,输入regedit
打开注册表,在注册表键值HKEY_CURRENT_USER/Software/Adobe/CSXS.6
增加一个类型为字符串(String),键值名为PlayerDebugMode
, 值设置为 1 。
- 打开AE,在
编辑->首选项->常规
中勾选允许脚本写入文件和访问网络
安装成功后,会在AE窗口->扩展
中看到bodymovin.
使用
打开一个AE文件,例如AE文件
点击窗口->扩展->bodymovin
设置好路径后,点击render
即可
生成完毕后,点击preview,还可以预览
WEB应用实例
生成好JSON文件后,在html文件中
引入lottie.js
,下载地址在这里
1 | <div id="task" style="width: 300px;background-color: cadetblue"></div> |
注意,如果你也用的上面AE例子的话,因为该动画是白色的,所以一定要给容器设置背景颜色,要不然就会看到白茫茫一片
还有一个要注意的点为,如果在本地测试,必须要在服务器上,否则会报错,因为它需要通过网络去请求动画文件。
除了上面的方式,官网还介绍了其他引用渲染方式
不过这种方式是生成的canvas。
1 | <div style="width: 300px;background-color: cadetblue" class="lottie" data-animation-path="task.json" data-anim-loop="true" data-name="test"></div> |
这里有两个必需设置的东西
- class要为“lottie”
- data-animation-path为json路径
lottie的一些方法
官网 上还介绍了其他一些方法
- play
- stop
- pause
- setLocationHref(href)
- setSpeed(speed)
等等,这里不多讲啦。
方法应用小实例
在上面的基础上,做一个效果
即鼠标放上去时才动画,离开则不动画了,比较简单,涉及一些方法的应用,直接上代码。
1 | <div id="bm" style="width: 200px;height: 300px;background-color: cadetblue"></div> |
好啦,基础使用就是这些了,不过Lottie虽然好用,但是并不是能转换所有的动画的,这点心里要有点数哟。