作者 / Jonas Naimark, Material Design 团队动效设计师, Google

如果您阅读过之前的文章《剥茧抽丝做 UI 动效，其实很简单》，相信已经明白了 Material 动效中的一些基础细节以及设计时要考虑的要点。这次我打算更进一步带着大家进入到我们团队的日常工作中。

After Effects 是我们团队为 Material 指南创建动效示例的主要工具，我也已经用它完成了不少 UI 设计。但这里我也依然打算让大家觉得轻松和容易上手，于是我决定打包分享我的 Material 动效 After Effects 源文件:

• Material 动效 AE 源文件

  https://storage.googleapis.com/material-design/downloads/Motion-Sticker-Sheet.aep

打开源文件之后您会看到里面包含了 UI 常用的基础控件以及各种转场动效示例。而使用这些元件也只需要在画布上拖拽组合，下面我来为大家逐步说明。

将素材导入 AE

想要制作动画，自然需要基础的图片素材。我们团队中的大多数视觉设计师都使用 Sketch，但这个软件默认和 AE 并不兼容。

值得庆幸的是，Adam Plouff 开发了一个插件来解决这个兼容性问题。我用这个插件把我们的 Material 组件库从 Sketch 导入 AE。这些素材位于源文件的 Components 文件夹中。

• Adam Plouff 的插件 AEUX

  https://aeux.io/

创建 UI

打开源文件中的组件库，您就可以通过拖拽将一个个控件放进 AE 的 comp (composition，合成) 中去，从而快速搭建出一个完整的 UI。

• AE 官方文档: 合成

  https://helpx.adobe.com/cn/after-effects/using/composition-basics.html

定制组件

通过拖拽完成 UI 只是开始——现在我们需要对它进行定制，以便满足各种设计与美学方面的需求。AE 元件的主属性 (Master Properties) 在这里就派上大用场了。这个功能经常被动画制作者们忽视，但其实您可以用它可以创建一个能够快速调整的可重用的动画素材，而且无需复制原始素材。它的运行原理类似于在 Sketch 中对元件 (symbol) 进行覆盖编辑 (override)。说到具体的例子上，我们经常通过更改图标、颜色和阴影来定制应用栏。考虑到这一点，我将这三个项目添加为这个组件的可编辑主属性。

△ 快速修改图标、背景色和边缘裁切

每个组件中的若干主属性都支持时间轴动画 (这些组件见 AE 源文件中的 Baseline UIs 文件夹)，接下来也就不难猜到了——放手去制作 Material 风格的动效。

转场动效

具体到转场动效的制作，我在 AE 源文件的 Navigation transitions 文件夹中给出了许多动效模式的样例。如果您对这些转场模式中的参数或者加减速规律还不太熟悉，不妨再回去阅读我的上一篇文章。

△ 给出来的一些转场动画实例

首先要说明一下，每个属性的基础 comp 里的动画都没有设置缓动 (easing)。因为我会在父级 comp 中对时间轴进行重新映射，以应用缓动动画，并设置所有嵌套关键帧的播放持续时间。这种做法可以快速调整缓动动画和整个转场的持续时间，因为只需要调节两个重映射关键帧就能够控制整个转场动画。

您可以使用这个简单的方法把一个统一的缓动曲线应用到所有的动画之中。整个转场里都会持续存在的元素会在整个时间轴里存在。需要淡出的元素会在动画加速的时候消失，接下来淡入的元素会在减速时进入画面。更具体的动画细节您可以参考 Material 动画规范中的相应章节:

• Material 动效之转场缓动

  https://material.io/design/motion/choreography.html#sequencing

上面提到的方法可以用于大多数的 Material 转场效果。当然，较为复杂的转场或高度风格化设计的动效有可能导致 comp 无法正常工作，但这种情况不太常见。

After Effects 是一款灵活性极高的工具，很难说哪一个工作流程是绝对正确的。面对动画制作方面的工作需求，每个设计师都会拥有属于自己的独特而高效的做法。我希望这里分享的这些技巧能激发出大家的创意，并帮助大家成为更有效率的动效设计师。

如果您在动效设计方面有什么经验或者疑问，欢迎在评论区和我们分享。我们期待着大家设计出精彩且极具个性的 Material 动效！

 点击屏末 | 阅读原文 | 了解 Material 动效的更多基础准则

推荐阅读

• Google 设计师们聊设计文化

• Google 设计师分享: 7 个您需要收藏的设计资源

• 通过 UI 设计自定义外形来展示品牌个性