对于动效设计相信大家都并不陌生了，很多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