Overlord:AI与AE互导

Overlord不仅可以实现AI导入AE,还能随时从AE导回AI修改

动效精品教程(动效指南)(1)

最新的Overlord支持路径、形状、参数图形、剪切关系、文本、甚至大部分的渐变参数,可以设置导成子图层还是独立图层。

官网链接:https://www.battleaxe.co/overlord

AEUX:Sketch导入AE

导入前在Sketch里将图层整理好,导入AE后图层关系也是一目了然

动效精品教程(动效指南)(2)

官网链接:https://aeux.io/

Motion Tools:常用功能合辑

它将很多常用操作整合到一个面板上,并且可以跳过繁琐的常规操作。包括快速调整曲线、定位图层锚点、克隆关键帧、制作回弹效果、错位图层序列、生成多图层空对象等。

动效精品教程(动效指南)(3)

动效精品教程(动效指南)(4)

锚点是元素变换时的基准点,更改锚点也是高频操作。Motion Tools不仅可以快速修改图层锚点,并且支持多图层批量操作。

动效精品教程(动效指南)(5)

官网链接:https://motiondesign.school/products/motion-tools/

Auto Crop:预合成裁切

新转成的预合成尺寸总是占满画布,不方便做动画且干扰其他图层选择。手动调节的话会影响元素的位置、位移等属性,Auto Crop很好地解决了这个问题,能够将预合成裁切至适合当前元素的尺寸。关键是即使是带有动画的预合成,效果也完全不会被影响。

动效精品教程(动效指南)(6)

官网链接:https://aescripts.com/auto-crop

Auto Sway:飘动效果

动效精品教程(动效指南)(7)

官网链接:https://aescripts.com/autosway

Trapcode Particular:粒子效果

AE自身带有粒子效果器,点击“效果 → 模拟 → CC Particle World ”就是。但更强大的是Particular”。

动效精品教程(动效指南)(8)

动效精品教程(动效指南)(9)

官网链接:https://www.maxon.net/zh/red-giant-complete/trapcode-suite

高品质导出Bodymovin:Lottie格式输出

Bodymovin能够将AE中矢量图形做成的动效导成json文件,变成一串纯粹的代码,再被Lottie渲染还原出来。这就让“尺寸”和“帧率”摆脱了以往体积的束缚,导出的即使是又高清又流畅的大图,也可以保持很小的体积。

动效精品教程(动效指南)(10)

(在“Bodymovin”选中需要导出的合成,点击“Render”渲染导出即可)

官网链接:https://aescripts.com/bodymovin/

PAG:完整的动画工作流

PAG(Portable Animated Graphics )是一套完整的动画工作流,在动画导出与渲染方面和Lottie相似,但更进一步的是,PAG还引入了视频序列帧结合矢量的混合导出能力,这就保证了PAG能支持AE的所有特性和效果。

另外PAG还提供完善的桌面预览工具、性能监测可视化、运行时可编辑等特点,能很好的打通设计与开发之间,从创作到素材交付上线的流程。

动效精品教程(动效指南)(11)

官网链接:https://pag.io/

|Gifgun:导出小巧高清的Gif图

Gif格式因为不支持半透明区域且容易有锯齿,如今的实际开发中已经有了Apng、Lottie等很多更好的替代方案,但在网页浏览、文档编辑等许多场景,还是需要使用Gif来演示动效或者作为封面缩略图

动效精品教程(动效指南)(12)

官网链接:https://aescripts.com/gifgun/

Aftercodecs:导出小巧高清的MP4

AE本身不支持直接导出MP4,很多时候只能先导出体积庞大的MOV格式,再通过第三方软件转成MP4。

Adobe自家的多媒体编码软件Media Encoder,也可以完美导出MP4格式

这里推荐使用更实用的MP4导出软件 — Aftercodecs。安装后在输出模块设置里,就能找到对应的导出项了,并且导出的MP4也是小巧高清的。

动效精品教程(动效指南)(13)

官网链接:https://aescripts.com/aftercodecs/

用空对象调整元素

当我们想调整的元素已经打上过关键帧,这时直接调整元素的位置或缩放属性,就会影响到原本的效果,使用空对象就可以解决这一问题。

动效精品教程(动效指南)(14)

整体拉伸关键帧

关键帧比较多时,按住alt 键,用鼠标拖动最末尾的关键帧,可以对所选关键帧进行整体等比拉伸

动效精品教程(动效指南)(15)

快速定位图层中心锚点

按住CTRL双击“平移锚点工具”,即可使图层锚点快速对位到图层中心。

动效精品教程(动效指南)(16)

还有更直接的方法,就是在“首选项”里将“在新形状图层上居中放置锚点”打上勾,以后新建的形状层锚点都会自动对齐图层中心啦。

动效精品教程(动效指南)(17)

视频素材循环

新置入一段想要循环的视频素材时,很多人习惯将素材复制多次,或者通过时间重映射打上关键帧后在添加循环表达式。其实并不需要这么麻烦,在项目窗口右键对应的素材,选择“解释素材 → 主要”,在弹出窗口直接就可以设置素材循环次数。

动效精品教程(动效指南)(18)

After Effects官方快捷键大全:https://helpx.adobe.com/cn/after-effects/user-guide.html/cn/after-effects/using/keyboard-shortcuts-reference.ug.html

播放型动效输出

例如常见的APP底部导航点击效果,icon动效在用户点击时触发播放,这个效果在输出时就是固定的,不受任何其他因素影响,可以直接导出。

动效精品教程(动效指南)(19)

播放型动效有以下几种比较常见的输出格式:

动效精品教程(动效指南)(20)

Gif、Apng、Webp本质上都是将位图进行压缩和转换,而Lottie则是基于代码层面的动画渲染,PAG则结合了两者的特性。目前一般使用Apng、Lottie、和PAG就已经可以覆盖大部分的输出场景,是可以优先考虑的动图格式。

交互型动效标注

交互型动效是指变换内容跟我们的交互操作相关联的动效,并且包含无法由设计师直接导出的元素,比如用户的头像、名称等。

比如这个支付面板切换的效果,变换的元素中包含了用户的余额和绑卡信息,这些信息是无法由设计师输出的。

动效精品教程(动效指南)(21)

这种动效需要开发在代码侧还原。如果只是输出视频demo,开发同学很难将其中的细节(例如时间出入点、曲线速率等)还原出来。这就需要设计师有一份清晰的标注文档,将动效的细节参数跟开发更好的明确下来。

一份规范的动效标注文档,至少应该包含以下几个方面:

触发:在什么条件下触发动效,例如点击、双击、滑动、长按等;

对象:发生变换的对象,例如按钮、列表、文字等;

属性:具体变换的属性,例如位移、缩放、不透明度等;

参数:换化属性的具体参数,例如不透明度值从0到1;

时长:变换的起始时间点、持续时间;

曲线:变换的速率曲线,描述在固定的时长范围内,速度是如何变化的;

以上图的支付面板首次切换过程为例,我们的标注文档是这样的:

第一步定义好页面的起始和结束状态,并标明动效元素

动效精品教程(动效指南)(22)

第二步则是将各元素的运动细节用具体参数描述清楚

动效精品教程(动效指南)(23)

原文https://mp.weixin.qq.com/s/_GVSjWHv_4FaxJXjoTG7oQ

,