对于动效设计相信大家都并不陌生了，很多UI设计师为了使自己更加专业也会自学一些动效设计软件。
直接开门见山我想讲的是After Effects
After Effects非常牛逼的图形视频处理软件，能想到的炫酷吊炸天的效果AE都能搞定，但要明白观赏性强，程序员不能实现基本上等于白做。可牛逼的程序员哥哥们不答应了，前段时间Airbnb开源了一个项目“Lottie”能直接把在AE里设计的动画导出
svg / canvas / html + js程序员直接复制粘贴使用，傻瓜式一键导出。
不管那么多先看看他们的实例吧~
看到这些是不是很惊讶~变形、爆炸都能整出来。
想要完成一键导出，就得先完成下面的步骤把插件Bodymovin装好哦~~
方法1（最简单我就是这么装好的）
直接从商店获取！https://creative.adobe.com/addons/products/12557 CC 2014及以上。
如果需要最新的版本呢~就需要从下面的方法中去寻找啦~
选项2（推荐）
从repo下载ZIP。 提取内容并从“/ build / extension”获取.zxp文件 使用aescripts.com上的ZXP安装程序。
选项3：
关闭After Effects 将build / extension / bodymovin.zxp上的压缩文件解压缩到adobe CEP文件夹：
WINDOWS：
C：\ Program Files（x86）\ Common Files \ Adobe \ CEP \ extensions或
C： \ AppData \ Roaming \ CEP \扩展
MAC：
/库/应用程序\支持/使用Adobe / CEP /扩展/ bodymovin
（可以打开终端，输入：
CP -R YOURUNZIPEDFOLDERPATH /推广/库/应用程序\支持/使用Adobe / CEP /扩展/ bodymovin
然后键入：
ls / Library / Application \ Support / Adobe / CEP / extensions / bodymovin
以确保其正确复制类型） 编辑注册表项
WINDOWS：
打开注册表项HKEY_CURRENT_USER / Software / Adobe / CSXS.6，并添加一个名为PlayerDebugMode的键，类型为String，值为1.
MAC：
打开文件〜/ Library / Preferences / com.adobe。 CSXS.6.plist，并添加一个键为PlayerDebugMode的String类型的行，值为1。
选项4：
按照以下说明手动安装zxp：https : //helpx.adobe.com/x-productkb/global/installingextensionsandaddons.html
直接跳到“安装第三方扩展程序”
对于他们
转到编辑>首选项>常规>并选中“允许脚本写入文件和访问网络”
插件装好之后怎么运行呢？
1.打开您的AE项目，并在窗口>扩展> bodymovin上选择bodymovin扩展
2.将面板打开，选择合成选项卡。
3.选择要导出的合成
4.选择目标文件夹
5.单击“渲染”
6.查找导出的json文件（如果您的动画中有图像或AI图层，则会有一个带有导出文件的图像文件夹）
除此之外需要注意的是（自己的经验）：
1.AE预合成内不要有图片，因为客户端暂时无法识别图片。
2.如果你有任何图像或AI图层，你没有转换为形状（我建议你转换它们，所以他们导出为向量，右键单击每个图层，并执行：“从矢量图层创建形状”），他们将保存到相对于目标json文件夹的一个图像文件夹。请小心不要覆盖同一位置上的现有文件夹。
3.不能带有图层样式（如投影、发光等暂时都不支持）
4.不支持：图像序列，视频和音频
支持项
1.脚本支持前置，形状，实体，图像，空对象，文本
2.它支持掩码和反转掩码。也许其他模式会来，但它有巨大的性能打击。
3.它支持时间重新映射（是的！）
4.该脚本支持形状，矩形，椭圆和星星。
5.目前仅支持滑块效果。
6.表达式。查看维基页面了解更多信息。
7.没有层拉伸！不知道为什么，但拉伸一层与所有的数据混乱。
案例
http://codepen.io/collection/nVYWZR/
最后，这个库的开源地址在这里：
Android: https://github.com/airbnb/lottie-android
iOS: https://github.com/airbnb/lottie-ios
ReactNative: https://github.com/airbnb/lottie-react-native
更多惊喜欢迎关注我的公众号哟～
Powered by Froala Editor