恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

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

自译外文 分类: 教程 版权: 原作者: Hancooock 举报
23834 230 9 1
2020-09-08
160.4

对于动效设计相信大家都并不陌生了,很多UI设计师为了使自己更加专业也会自学一些动效设计软件。

直接开门见山我想讲的是After Effects

After Effects非常牛逼的图形视频处理软件,能想到的炫酷吊炸天的效果AE都能搞定,但要明白观赏性强,程序员不能实现基本上等于白做。可牛逼的程序员哥哥们不答应了,前段时间Airbnb开源了一个项目“Lottie”能直接把在AE里设计的动画导出

svg / canvas / html + js程序员直接复制粘贴使用,傻瓜式一键导出。

不管那么多先看看他们的实例吧~

Image title

Image title

Image title

Image title

看到这些是不是很惊讶~变形、爆炸都能整出来。

想要完成一键导出,就得先完成下面的步骤把插件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

Hancooock

78粉丝/32关注

当仁不让lv.2一鸣惊人收藏家lv.3勤学标兵lv.1原创小生
差点因为王者而耽误设计方案一起狼人杀

你确定要举报如何用AE导出程序员可以复用的代码

如果查出恶意举报,十天内禁止提交任何举报申请。

0/200

上传证据: 超过10M的附件请使用网盘地址

点击上传附件

对谁可见:

全部设计师
  • 全部设计师
  • 推荐设计师和认证设计师

您确认要推荐?

该作品发布时间:2020年09月08日

评分

完整度

启发性

勤奋性

排版布局

推荐心得

建议20-200字以内

0/200

扫描二维码
去手机端查看海报

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票

账号或密码错误,请重新输入

账号或密码错误,请重新输入

登录

账号或密码错误

发送验证码 120s 验证码错误

登录

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2020 UI.CN