恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

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

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
AE避坑 | AE动效落地时常见问题解析和注意事项
9.1°
2022-08-11 | 原创文章 / 经验/观点 / | 举报 | 1462 26 9 0

今天将我们在工作中遇到的AE动效落地时经常遇到的问题有哪些?该如何解决这些问题?进行集中的分析解答,以避免在后续的工作中即时避坑。


上次分享回顾:

《玩转动效 | AE常用动效落地必备指南》


常见问题列表:


Q1:Bodymovin导出lottie动画,渐变色丢失问题?

Q2:导出lottie动画,文字错位或不显示问题?

Q3:Sketch文件导入AE后圆角问题?

Q4:AE里如何单独修改某个圆角大小?

Q5:如何将1个图层/预合成拆分成多段/多个?

Q6:AE如何修改合成尺寸的问题?

Q7:升级了新Mac系统后打不开MOV/MP4文件?

Q8:AE元素中心点偏移,不在元素中心点的问题?

Q9:AE内如何断开锚点的问题?

Q10:动画有用到位图,在导出lottie动画时,如何导出只有一个.json文件的动画?



Q1:Bodymovin导出lottie动画,渐变色丢失问题?

解决方法:那是问题我们通常使用的 AE 都是中文版本,所以图层属性的命名默认也是中文的,只要我们把对应的图层渐变属性名称“渐变填充”重命名为英文“Gradient Fill”,然后渐变色就正常了;

如果是“渐变描边”则需要改为“Gradient Stroke”即可。

注意⚠️:英文不用区分大小写

命名更改后:如果存在多个渐变效果,可以分别命名“Gradient Fill 1”“Gradient Fill 2”“Gradient Fill 3”...以此类推


Q2:Bodymovin导出lottie动画,文字错位或不显示问题?

AE里面,用bodymovie导出动画后发现文字总是对不齐、文本框移位、文字显示不完全。尤其是两个icon有前后关系叠加的时候容易出现错位,是因为AE中有很多字体如果直接导出 json ,会出现不兼容问题。

其实在bodymovie的设置中,已经有一个功能,是可以解决这个问题的,这个功能就是“字体图形化”,但是在我使用过程中发现,这个功能有点不稳定,有点挑文字,有的文字转换很成功,有的文字还是会缺失或显示不全全,所以我还是建议用以下2个解决方法:

解决方法1:在 sketch 中直接对文字进行转曲;转曲后文字变成了矢量图形。

解决方法2:在AE中,选中文字图层,右键>创建>从文字创建图形即可。


Q3:Sketch文件导入AE后圆角问题?

解决方法:因为AE里形状的四个圆角只能都是一样,不能分别设置不同的圆角大小。如果要几个圆角大小不一样,要在导入AE之前先拼合下,导入之后不会出问题。

选中图形,然后选择“图层 - 结合 - 拼合

如果你是Figma文件导入AE,则需要:选中图形 - 右键 - Flatten


Q4:AE里如何单独修改某个圆角大小?

解决方法:AE的圆角大小只支持一个圆度,如果要更改圆度属性,形状的圆角都会一起变化,没办法单独改变其中一个的圆角大小;如果想要单独更改其中一个的圆角大小,就要进行以下操作:


1、先选中矩形路径图层 — 右键 — 转换为贝塞尔曲线路径

2、选中路径,用选择工具 (快捷键 V) , 在画面视图中框选需要更改的圆角

3、按下快捷键 CMD+T , 调出变形工具,跟其他软件一样,拖动操控点,就可以更改圆角啦。


Q5:如何将1个图层/预合成拆分成多段/多个独立的图层?

有时候我们做效果时,经常会需要把一个图层或者预合成拆分从多段,需要的效果是上图中:时间线前(标记1)和时间线后(标记2),然在1个图层中的动画,拆成2个图层显示,那改如此拆开呢?

其实很简单,只需要选种图层,将时间线拖到你需要拆开的位置,然后快捷键:Command+shift+D(win系统:command+shift+D),即可拆成2个图层


Q6:AE如何修改合成尺寸的问题?


有时候我们做了一个动效,但是要修改下尺寸,或者下载的模板尺寸不是自己想要的。比如原尺寸是1280*720,现在想要改到1920*1080,直接在合成设置修改话改完后发现,合成里的各个图层尺寸并不能随之更改,结果位置完全错乱;接下来就得一个图层一个图层的调整,去重新适配新的合成尺寸,其实完全没有这么做,太费时费力。

解决方法:其实AE里直接内置了一个脚本,可以很方便的解决这个头疼的问题,我们可以在文件-Scripts(脚本),然后找到AE自带的脚本:“Scale Composition”

打开Scale Composition后的选项是这样的

三个选项分别代表新的缩放比例、新的合成宽度、新的合成高度,按需求选择合适的即可。(指的都是等比缩放到相应的尺寸)

使用起来也非常简单,总结一下:

1. 首先在项目面板选中要修改尺寸的合成

2. 设置好要修改的数值(比如这里我设置成了将新的合成宽度改为1920)

3. 最后点击”Scale”按钮即可


Q7:升级了新Mac系统后打不开MOV/MP4文件?


很多小伙伴在更新了最新的Mac OS系统后,发现AE导出的MOV格式视频打不开,如下图:

解决方法:导出的时候,更改下视频编解码器即可解决;在“输出模块设置 — 格式选项 — 视频编解码器” 选择 “Apple ProRes 4444”


Q8:AE元素中心点偏移,不在元素中心点的问题?



如果你使用的是2018版本以上的AE,那么只需要在首选项里设置一下即可,首选项-常规-在新形状图层上居中放置锚点,下次绘制形状时,中心点自动居中到图形中心。

如果你使用的是2017及以前版本的AE,在绘制形状图层的时候,中心点默认是在画板中间的,如下图:


解决方法一:选择平移(锚点)工具 快捷键 Y ,选中中心点,按住 cmd (win系统ctrl) + 鼠标左键,此时移动会自动吸附到此形状的各个角跟中心点,在中心时松手即可。

解决方法二:使用 Motion 脚本快速居中中心点


Q9:AE内如何断开锚点的问题?


在AI里面如果你画完图形之后,不要某些边,可以用直接选择工具选择之后删除即可;但是在AE里面删除之后是不对的。

例如我要删除一个圆形最下方的一个锚点,首先 选中圆形 — 找到圆形路径 — 右键 转换为贝塞尔曲线。

然后用选择工具框选要删除的锚点,删除后变成了这样子:你会发现他们还是连在一起的,那么要怎么断开?

继续选中路径属性,框选工具框选这两边的锚点,右键 蒙版和路径形状 - 已关闭 取消勾选即可。

然后就会达到我们想要的理想的效果,如下图这里只是以圆形为例,其他任何图形都可以用这种方法删除锚点,然后断开哦。

注:你也可以直接使用修剪路径的方式,变成你想要的图形


Q10:动画有用到位图,在导出lottie动画时,如何导出只有一个.json文件的动画?


当我们在动效中有用到位图资源时,bodymovie默认导出动画的最终文件为:1个json文件 + 1个images个文件,如下图:

很多时候我们在做lottie动画的和开发交付动画效果的时候,开发那边会说:只要1个json文件就行”,那我们该如何处理呢?

其实在bodymovie的设置里面就有这样一个功能,叫做“转成base64—将图片包含在json文件中

只要勾选了这个选项后,我们导出后的文件就会只有一个.json的文件。


Q11:同一个json,iOS和Android设备不兼容json文件的问题?


同一个json文件,预览没有问题,但是在iOS和安卓设备上的效果不一致。

解决方案:部分安卓系统引用高版本 lottie 库会出现不兼容问题,所以安卓需要导出旧版格式,但还是会出现不兼容问题,这里推荐降级方案,把 Body movin 版本号换成5.1.12版,基本可以解决问题。


输出lottie的注意事项:


1、首先明确自己想要做什么动画,在官方文档上查询lottie支持的属性效果。

官方属性查询:http://airbnb.io/lottie/#/supported-features

lottie支持导出的AE属性(中文文档):https://www.yuque.com/lottie/document/supported-features

2、为避免 Bodymovin 输出后预览出错,所以在输出前确保你的所有文件确保命名和图层名为英文,避免包含中文、空格、特殊符号等等。

3、Bodymovin 输出时根据实际情况勾选对应的输出设置,如“图片资源设置”“导出旧版本的 Json 格式”等。

4、导出后json文件一定要进行预览自查,用 Bodymovin 导出文件后,上传到https://lottiefiles.com/preview中进行预览,可以手机扫码二维码在手机上预览,检测是否有问题。


Powered by Froala Editor

微信公众号:UI严选

创建于:2022-08-11

收藏

26人已收藏

小小方方

微信公众号:UI严选

  • 91

    作品

  • 7222

    粉丝

  • 20

    关注

  • 玩转动效 | AE常用动效落地必备指南
  • Photoshop如何打开、编辑和导出Webp格式图片的方法
  • AI教程-如何制作3D立体环形文字效果
  • 竞品分析 I 如何从设计角度出发做竞品分析?

    猜你喜欢

      2022-08-11 | 原创文章 / 经验/观点 / | 举报 | 1462 26 9 0

      AE避坑 | AE动效落地时常见问题解析和注意事项

      9.1°

      你确定要举报AE避坑 | AE动效落地时常见问题解析和注意事项

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2022年08月11日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      9
      26
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录