为你揭秘 Google的动效设计师是怎么制作 UI 动效的

我一篇文章《动效设计没那么难！谷歌动效设计师带你门》当中，已经通际的案例，分享动效设计并不难的原因。我们着力推动 Material Design ，也希望计能够更好地使用所熟悉和喜爱的 Material 动效理，来计出更好的产品。为了更好地计动效，队使用 Adobe After Effect 作为计动效的主要工。因此，在今的文章当中，会享的工作流程、巧和计的方法。

先下载我的 AE 文档

下载我所准备这个基本 Sticker Sheet 文档，你能够看到我是如何使用简化后工作流来完成项目（下是概述）。它含组 Material 组件，基准 UI 组件和导航转场动画。

戳这下载 ? 提取码：cyw5

将素材导入到 AE

首先，需要制作动效的相关素材。队中绝大多数的视觉计都喜欢使用 Sketch 来计 UI，而这款 UI 计工默认是不支持 AE 的。值得庆幸的是，Adam Plouff 制作了一款通款工的插件，戳这获取。借助这款插件，可以将的 Material 组件从 Sketch 导入 AE 当中。这些素材，你可以在之前所提供的 Sticker sheet 组件文件夹中找。

创建 UI

有了库中的这些基础组件之后，你可以通过拖拽快速构建 UI ，并且将它整进新的 AE comp 当中去。

下面的案例就是将 Sketch UI组件直接拖拽到一个 AE comp 当中。

自定义组件

这些基准组件为你提供了良好的基础，现在你可以拿它来创建各种 UI。这是 AE 中主属性（Master Properties）这一功能最令人侧目的地方。这一经常被忽略的功能，其实可以快速创建出高度可复用的个组件素材，创建好了之后就无需来回复制始的素材了。它在功能上，非常近 Sketch 中的符号（Symbols）的使用方式。举个例，APP 的底部菜栏是最常见的UI组件，它经常会随着 APP 的变化而出现图标、色彩、阴上的变化。考虑这一点，直将这三个属性添加为主属性。

△ 使用主属性快速调整组件的示例

通向每个组件添加主属，我就能将 UI 界面快速地转化为成组的动画。同样的，你也以在 Baseline UIs 文件夹中找到素材。

使用主属自定义组件，来创建 UI 动效合集。

动画转场过渡

现在，我们已经建立创建 UI 动画的一个基的工流，接下来我们就以动画效果。在 Navigation Transitions（导航转场渡） 个文件夹当中，有详细的范例，演示何在 AE 中使用 Material Design 的运动模式。果你对种运动模式感兴趣，以详细阅读一下前一篇文章《动效设计没么难！让谷歌动效设计师带你门》。

△ 使用Material 运动模式所的导航转场渡效果

在开始的时候，有的属性都是没有缓画的。然后，父合成组通过时间重映射和设置键帧的持续时长来实现缓的效果。这个时候可非轻松快速地调整缓和持续时长，因为为了控制整个转场过渡的效果，只需要映射两次键帧就够了。而这是将缓曲线应到有元素的画当中的一种简单的方法。这样一来，有的的元素都会具有相似一致的规律。离开界面的元素随着速曲线离开 UI 界面，而进入界面的元素则随着曲线减缓而进入 UI 界面。你可在「Complex choreography」（复杂的画编）这一节当中阅读更多的相容。

这种方法可应于几乎有符合 Material 规律的过渡效，创一致的视觉体验。当然，这套方法是没法处更复杂或者格的画效果和流程的，但是这种情况并见。

AE 一非常灵活的具，因此我们也很难某动画效果的制作流程绝对确的，但目，我们借这套流程可以非常高效制作动画效果。每设师都独特高效的动画制作方法，我希望我的方法能够帮一效率高的动效设师。