如何用AE导出程序员可以复用的代码


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


觉得有用可以帮帮点赞哦~~~~


上一篇 下一篇