小雨点
作为视觉设计师你是否会遇到这样的问题,当需要做一个loading或者其他动效的时候,总会或多或少的出现一些问题,如何使用更轻量高效的Sketch直接将矢量图形转到AE制作动效, 如何不在受GIF导出的失真问题困扰,如何让开发完美还原我们的动效设计稿等,如果你也存在这些疑问,那以下介绍的2款插件就可以完美的解决我们现在的问题。

 

AEUX

AEUX是由 Google 团队推出的,运用在 Sketch 和 AE 的一组高效插件,能将 Sketch 里的图层以及整个画板一键导入到 AE 里,同时能在AE里解决图形分组和分层的问题,减少导出图片或者转入IIIustrator处理带来的不必要的重复动作。

 

以下是我做的一个简单小案例,通过此次案例将介绍怎么去更好的使用这个插件

首先在 Sketch 内将图层进行分组,在多图层的情况下,需要前期进行动效构思,根据构思在Sketch 里对图层进行分组,所做的分组将会是你在AE里的合成分组

 

分好组后该如何导入才能让两者图层统一?

• 方法一:直接复制选中图层

安装好插件后,打开 AEUX,选择你将导入到AE里的图层,点击 Send selection to Ae,同时在AE里打开安装的AEUX插件,在 BUILD COMP 区域出现了从 Sketch 导入的图层数量,勾选 Precomp groups,点击将自动加载入AE合成里
 
 
• 方法二:导出json文件
从 Sketch 的 AEUX 面板里点击 Export AEUX.json 导出 json 文件,打开 AE 的 AEUX 面板勾选中 Precomp groups,将导出的 json 拖入到 BUILD COMP 区域,或者点击 📎icon打开 json 文件 
这样导入到 AE 里的图层是以合成的形式展示 Sketch 里的分组。

 

避坑指南:

• 如果在sketch内,分组图层不在同一组内,导入AE后会出现变形和位移的情况

 

 如果 sketch 内形状图层有投影/渐变/point type 的编辑形状时,导入 AE 后将出现投影消失,渐变消失,形状异性的情况,在遇到这种情况时,会通过导出图片的方式处理

 

• 导入 AE 的 AEUX 面板时如果没有勾选 Precomp groups,多图层导入的情况下,组内的图层都会生成在 AE 中的同一个合成中。
 

Sketch 的 AEUX 面板其他功能介绍:

Detach symbols
这是一个解除 symbol 的功能,在sketch内如果没有解除 symbol,导入到 AE  里将出现图形位移和变形的情况
 
Flatten shapes
AEUX支持布尔运算,但是在一个组中混合不同的运算符(如添加然后减去)对于Ae来说比较困难。点击 Flatten shapes 可以合并布尔运算图形
 
Images to symbols
Sketch只能导出它在画板上看到的内容。如果在 sketch 内图像的一部分超出画板边界,复制到AE内部的图像将出现位移的情况。导出前点击 Images to symbols 不会发生被裁剪和位移的情况
 

AE 的 AEUX 面板其他功能介绍:

Come size multiplier:切换倍数
可以设置 sketch 画板的倍数合成
 
Auto build artboards:自动构建合成
导入前勾选此功能,在sketch的AEUX面板中复制图层后,在 AE 里不需要任何操作,它会自动复制图层导入到创建合成中
 
Convert to precomp:创建合成
同时选中单一图层,可以将他们建议一个新的合成
 
Un-Precomp group:解除合成分组
点击可以解除合成的分组,变成单一的一个一个的图层
 
Toggle Visibility:可以一键隐藏和显示所有的父级图层
 
Delete group layers 删除父级图层
 
AEUX 现在虽然有些上面所讲的功能不能支持,但是在一步步完善,希望可以帮助一些习惯用sketch画插图的设计师提高动效制作效率,减少不必要的操作步骤
 

Bodymovin

在动效制作好后,通常我们会导出 mov 然后导入 PS 里生成 gif 格式,但是 gif 会出现质量过低的情况,比如渐变分层,边缘有毛边等情况,所以由2017年 Airbnb 团队开发的 lottie动效可以完美的解决这些问题,而实现 lottie 动画需要在 AE 中安装一款名为 Bodymovin的插件。
Bodymovin 以 Android/iOS 原生动画的形式在移动设备上渲染播放,在制作动效时导出 json 文件直接给到开发,可以帮助提高实现动效效率同时提高动效质量。
 

同时它还有很多的优点:

• 它可以支持 Android、iOS平台
• 导出的文件体积小,方便开发使用
• 实现效果佳,可以支持渐变等效果
 

但在使用中要有几点注意:

• 在使用前期,这种方法是否适合你现在所做的动效,lottie是针对矢量动画开发的,不太适合图片过多的情况,图片过多会增加文件负荷,所以最好是将图片转化为路径动画
• 在ae里导入到 Lottie 的图层不能识别矢量渐变
• 不能支持外置插件的效果,比如粒子、光效等
• 需要与前端开发沟通,他们是否愿意使用
• 导出给开发的文件中需要有完整视频参考,开发可以通过完整视频知道 loading 位置和效果,同时如果出现 json 导出错误的情况,开发可以查看,遇到不一样的地方可以询问设计师
• 开发完成后需要走查,看是否与你预期一致

 

所需软件

ZXP installer
• LottieFiles(移动版)
• 插件:bodymovin
 
下面是一组之前做的页面加载loading效果,开发小哥哥反馈:实现挺高效

 

步骤:
1.下载ZXP installer:https://aescripts.com/learn/zxp-installer/x

 

2.下载bodymovin:https://github.com/airbnb/lottie-web

 

3.下载之后,点开刚下载的ZXP,点开顶部file-open,打开bodymovin插件
 
4.当出现以下界面时代表已经安装成功

 

 意外情况:在用ZXP安装bodymovin插件的时候出现以下提示:
出现原因:没有通过Adobe Creative Cloud下载AE,需要重新通过Adobe Creative Cloud下载

 

5.打开AE,After Effect CC-首选项-常规,勾选允许脚本写入文件和访问网络

 

6.打开窗口-扩展查看是否添加成功

 

7.调出 Bodymovin 面板,选择需要导出的合成

 

8.点击你要保存的json文件地址,点击Render
 

9.点击Brown载入刚导出的json文件,检查动效是否有误

 

10.这时候就可以把json文件给到开发,如果AE合成中有图片,需要把图片放在文件夹内一起提供给开发,同时也会给到一个gif文件,如果实现有不一样的地方,开发可以询问设计师

 

11.如果想再移动端上浏览可以打开网址:https://www.lottiefiles.com/下载安装移动端客户端(Ios/Android)


12.注册登录成功后打开Lottie Preview添加AE里用bodymovin导出的json文件

13.打开手机里下载的Lottie App扫描右下角的二维码就完成啦~
 以上就是关于动效实现的一些插件小技巧,希望对有需要的设计师有一定的帮助,如果有不完善的地方,欢迎补充~

 

作者:罗大曼

 

转载请注明:学UI网 » 从AEUX到Bodymovin的插件小技巧

登录收藏
 
你可能喜欢的:
你不知道的Sketch黑科技-图文浮动居中你不知道的Sketch黑科技-图文浮动居中
Sketch 55 Beta版本探秘,看看都有什么新功能Sketch 55 Beta版本探秘,看看都有什么新功能
新手容易忽略的10个Sketch冷门技巧新手容易忽略的10个Sketch冷门技巧
这5大Sketch核心功能,作为UI设计师的你用对了吗?这5大Sketch核心功能,作为UI设计师的你用对了吗?
如何用sketch画好一个卡通吉祥物如何用sketch画好一个卡通吉祥物
Sketch提升效率的常用技巧和快捷键Sketch提升效率的常用技巧和快捷键
这四款Sketch插件一定不能错过这四款Sketch插件一定不能错过
Sketch 54 Beta版本探秘,看看都有什么新功能Sketch 54 Beta版本探秘,看看都有什么新功能
你不知道的Sketch黑科技-段落自动排版你不知道的Sketch黑科技-段落自动排版
你不知道的Sketch黑科技-智能排版你不知道的Sketch黑科技-智能排版