使用 Intel® Animation Interpolator 原型化 Android 动画

引言

近几年来，现代用户界面设计发生了翻天覆地的变化，丰富的动画交互已成为常态。在屏幕空间有限且用户期望易于使用的移动设备上，动画可以极大地提高应用程序的吸引力、流畅性，甚至可用性，因为它们可以引导用户的注意力来解释其内在的工作原理。Google 最新的 Android* Material Design 指南因此高度强调了动画的使用。然而，动画在实现之前很难可视化，并且对于新手开发者或非程序员来说，实现动画可能会非常耗时。

Intel® Animation Interpolator 帮助设计师和开发人员制作 Android 用户界面动画的原型。用户无需任何编程即可创建动画、在设备上播放动画并实时调整其参数。一旦动画达到理想状态，其参数设置就可以传递给程序员，以便在 Android 应用中实现。

Intel® Animation Interpolator 有什么作用？

Intel Animation Interpolator 使用以下类型的动画在 Android 设备上为单个图形块设置动画：

• Translation：水平移动块。
• Opacity：淡入/淡出块。
• Scale：在垂直和水平轴上放大/缩小块。
• Rotation：围绕中心旋转块 270 度，顺时针和逆时针方向交替。

用户可以为每种动画类型修改三个参数：

1. 动画的**持续时间**（以毫秒为单位）。
2. 要应用的**插值**。插值定义了正在设置动画的属性（水平位置、不透明度、缩放或旋转）的值如何随时间变化。更多详情请参见下文。
3. 动画的**因子**（某些动画类型可能不适用）。这会修改动画在其持续时间内的变化方式。

插值本身是关键参数，因为它决定了块在一段时间内的外观：取决于所选动画类型，其位置、不透明度、缩放或旋转。

理解插值

在 Android 中，可以使用各种 API 来随时间更改对象的属性（或“设置动画”）。这些属性包括用户界面元素的尺寸、位置、旋转、缩放、不透明度等。例如，动画可以更改对话框的不透明度以实现淡入淡出效果；或者在用户滑动列表项时将其移出屏幕。

动画开始时，属性具有**初始值**，该值在动画期间会发生变化。动画结束时，属性将达到**目标值**（注意：这可能与初始值相同）。例如，您可以定义一个 100 毫秒的动画，将屏幕上的一个块从 x=0 移动到 x=100（其中 x 值代表像素位置）。动画开始时，块的 x 属性值为 0；动画结束时（100 毫秒后），块的 x 属性值为 100。

那么开始和结束之间呢？如果动画在 100 毫秒后简单地更新了块的 x 值，它就会瞬间出现在屏幕上。

这时就轮到插值发挥作用了。插值描述了一个值在动画过程中如何变化。更正式地说，插值是根据动画的已用时间，在动画的每个“步长”计算属性的中间值。在 Android 中，每个步长的默认长度为 10 毫秒（Android 的默认“帧刷新率”）。因此，对于上面的示例动画，插值需要应用 10（100/10）次来计算动画持续时间内的 x 值。

插值的输入是一个介于 0 和 1 之间的值，表示已过去的动画持续时间的比例（0 = 动画开始，1 = 动画结束）。返回值是另一个用于计算该时间点属性值的数字。通常，这也将介于 0 和 1 之间（但不必如此）。

所有这些都在 Android 文档中有很好的解释：https://developer.android.com.cn/guide/topics/graphics/prop-animation.html

Android API 提供了一个 **interpolator** 对象，该对象封装了插值并允许将其应用于动画。最简单的插值器是 **LinearInterpolator**：对于动画中的每一步，它返回一个与其输入值相等的值。对于上面的示例动画（在 100 毫秒内将 x 从 0 翻译到 100），在每个 10 毫秒的步长应用 **LinearInterpolator** 会返回这些值：

时间（毫秒）	输入值（已过去的动画比例）	插值函数返回的值	插值后的值 (x)
0	0	0	0
10	0.1	0.1	10
20	0.2	0.2	20
30	0.3	0.3	30
40	0.4	0.4	40
50	0.5	0.5	50
60	0.6	0.6	60
70	0.7	0.7	70
80	0.8	0.8	80
90	0.9	0.9	90
100	1	1	100

**LinearInterpolator** 的输入值和相应返回值可以绘制如下：

x 轴是时间，y 轴是插值器返回的值。上图未能捕捉到属性值变化时动画的外观。对于 x=0 到 x=100 的平移动画，考虑块如何加速和移动：

• 时间为 0 时，速度为每毫秒 0 像素。
• 10 毫秒时，速度为每毫秒 1 像素。
• 它以该速率持续移动，直到时间达到 100 毫秒，然后突然停止。

这在抽象上很难可视化或理解；但这正是 Intel Animation Interpolator 可能有用之处。

使用 Intel Animation Interpolator 测试插值器

Intel Animation Interpolator 允许您选择一个标准的 Android 插值器并调整其参数，以便您所做的任何更改都能在屏幕上的动画中立即得到反映。这样可以轻松找到正确的插值器并进行调整，直到它产生所需的动画。（相比之下，直接在代码中制作动画原型既耗时又需要 Java* 编程技能。）

上图显示了 Intel Animation Interpolator，其中一个 **LinearInterpolator** 应用于平移动画。请注意，显示的图表与上一节的图表匹配。

运行动画时，屏幕顶部的块会向前和向后循环移动。在 Intel Animation Interpolator 中一旦看到这一点，作为真实动画序列的一部分，它立即会显得僵硬和不自然。这是因为使用线性插值的动画缺乏“真实运动”（http://www.google.com/design/spec/animation/authentic-motion.html）：人类习惯于看到物体需要时间来达到全速并逐渐减速。**LinearInterpolator** 会瞬间将平移加速到全速，在动画持续时间内保持该速度，然后立即减速停止。这种运动具有外星飞船的特征，而不是地球上可能看到的东西。

Intel Animation Interpolator 可以通过选择不同的插值器轻松调整动画：只需从应用程序左下角的下拉菜单中选择一个即可。图表会立即更新，显示动画随时间变化的“形状”。

上图显示了一个 **AccelerateDecelerateInterpolator**，这是 Android 动画默认使用的插值器。由此产生的平移动画感觉更自然：运动逐渐加速到全速，保持几毫秒不变，然后逐渐减速。

但是，在许多情况下，默认插值器可能不合适。为了说明 Intel Animation Interpolator 如何用于处理此类“现实世界”情况，这里有一个示例，展示了设计师如何使用该工具与开发人员沟通想法。

设计师

设计师通常使用图形应用程序制作动画，而不是通过编码。在某个阶段，动画必须转换为代码。但那时，设计师工具中使用的术语与实现 Android 代码所需的术语之间常常存在不匹配。

举个例子：设计工具通常使用“ease-in”（缓入）和“ease-out”（缓出）这两个术语来描述插值产生的曲线。这些术语并不直接出现在 Android API 中，但分别约等于 **AccelerateInterpolator**（加速插值器）和 **DecelerateInterpolator**（减速插值器）。但这并不一定对设计师或开发人员显而易见。

设计师可以使用 Intel Animation Interpolator 来尝试不同的插值器和参数，直到找到最符合其预期动画的那个，从而帮助缓和设计和开发之间的过渡。例如，下图显示了一个使用 Adobe Edge Animate* 设计的Ease Out/Quint（缓出/五次）曲线。

通过一些反复试验，可以使用 Intel Animation Interpolator 快速近似相同的曲线。

请注意，已调整**因子**字段以使曲线具有正确的形状。

引用 Intel 一位设计师的话说，Intel Animation Interpolator 使他能够“与开发人员使用相同的语言”。他可以找到正确的 Android 插值器并调整它以匹配他的设计，然后将插值器的名称和参数直接传达给开发人员。这反过来有助于缩短他的设计转化为代码的时间。

结论

用户界面动画可以为 Android 应用程序带来额外的深度和优雅。但是，制作动画原型通常可能既费力又耗时，并且在将设计的精细细节转换为代码时，这些细节可能会丢失。Intel Animation Interpolator 通过易于尝试不同的插值器和参数，并提供“实时”视觉反馈来展示它们的外观，从而启动了构建动画的初始阶段。这弥合了设计和实现之间的差距，提供了一个简单、富有创意的环境，设计师和开发人员可以在其中一起探索 Android 的动画功能。

Intel® Animation Interpolator 应用程序可在 Google Play 上免费下载。