前言
官网地址:airbnb.design/lottie/
Lottie是一种新的开发动画的方式. 学会使用Lottie,会极大改善你和开发小哥哥撕逼的情况, 因为动画我们都给做好了他只需要给播放一下就好了!!
有一个 LottieFiles 的网站,其内提供了很多设计师上传的 Lottie 动画,并提供预览的效果,只要我们看中了,就可以下载下来使用,非常的方便。 本文主要介绍设计对于Lottie的使用方法,开发的使用方法会在文章末尾有链接介绍(对于一个设计来说前端还好,后端真心头大,天书一样,o(╥﹏╥)o)
从AE开始(AE大神可自行跳过)
1.安装AE
After Effects(尽量选择17以后的版本)
具体下载地址在这我就不多介绍了,万能的度娘能让你找到各式各样的下载地址还有破解器(当然直接Adobe官网购买正版的土豪例外)
2.安装bodymovin插件
想了解此插件可以参看该插件的GitHub页面.
选项1:
从aescripts + aeplugins下载: http ://aescripts.com/bodymovin/
点击链接进入网站下载(ps:价格改成0 ,就是免费喽)
选项2:
从adobe商店 creative.adobe.com/addons/prod… CC 2014及以上版本获取。
选项3:
提取内容并/ build / extension
获取.zxp文件
安装:
- 使用aescripts.com上的ZXP安装程序。
-
手动安装
-
先关闭AE;
-
用WinRAR或类似软件打开
bodymovin.zxp
文件,并将解压后的文件夹直接复制到
C:\Program Files (x86)\Common Files\Adobe\CEP\extensions
或者是C:<username>\AppData\Roaming\Adobe\CEP\extensions
下,
对于MAC机器路径是
/Library/Application\ Support/Adobe/CEP/extensions/bodymovin
-
修改注册表.对于Windows,打开注册表修改器,找到
HKEY_CURRENT_USER/Software/Adobe/CSXS.6
,并在此路径下添加一个名为PlayerDebugMode的KEY
,并赋值为1;
对于MAC,打开文件~/Library/Preferences/com.adobe.CSXS.6.plist
并在末尾添加一行,键为PlayerDebugMode,值为1; -
设置AE 无论以何种方式安装bodymovin插件,都需要在AE的
编辑->首选项->常规
中勾选允许脚本写入文件和访问网络
(默认不开启)
-
开始制作动画
具体制作的动画就看各个设计师在自由发挥了,在此就不多做介绍了,毕竟本文不是AE教学,就先拿已完成的文件做案例
导出json格式文件
窗口-扩展-Bodymovin
(由于没办法截图,只能用手机拍了o(╥﹏╥)o)
- 然后就弹出Bodymovin页
- 设置页默认选中第二个就好了,按照我之前听过一个大佬说过,软件如果有默认选项,那么选默认总是没错的. 这里我们之间选择默认的第二个,其它只是特殊需求情况下需要改选的.
- 点击渲染, 这里我保存在桌面, 出现了一个后缀.json的文件(一定要选中最最前面的绿点!一定要选中最最前面的绿点!一定要选中最最前面的绿点!)
- 到这里,整个Lottie的动画导出就结束了.接下来只要将你的json文件交付给开发就好了, 他们会在代码中添加Lottie库来加载我们制作的动画.-
开发使用方法
由于本人是设计,开发的那些代码完全看不懂,在此放上两个链接,有兴趣的大佬可以看一看
lottie使用教程
lottie介绍及使用相关(翻译)