使用智能动画为你的原型添加动态效果 — 现在可以在 Sketch 中使用

最近我们对 Sketch 中的原型功能进行了一些重大改进，并且认真听取了你的反馈 — 包括对动画的需求。通过我们的最新更新，我们推出了智能动画 — 为你的想法带来动态效果的最简单方法。

我们没有提供使用智能动画的分步指南，而是分享了一些它如何为你工作的实际示例。每个示例都包含一个 Sketch 文档，你可以下载或复制到你的工作区，以便你可以窥视幕后并了解我们是如何实现这些效果的。

但在我们深入研究这些示例之前，让我们先了解一下基础知识。

什么是智能动画？

智能动画会在多个画板上查找具有相同名称的图层，并在你切换它们时为其更改添加动画效果。如果你曾经使用过 Keynote 中的 Magic Move，那么你会感到宾至如归！

要设置智能动画，请确保任何你想要动画的具有更改的图层在多个画板上都具有相同的名称。当你从一个图层或画板链接到另一个图层或画板时，请在检查器中的“原型”选项卡下选择“智能动画”作为动画类型。你还可以设置持续时间和缓动类型来自定义事物的移动方式。

我们制作原型的目标始终是保持简单和快速。但动画是那些可以很容易地成为一个独立应用程序的领域之一（事实上，已经有很多不错的应用程序了）。通过智能动画，我们在为你提供更多选择和帮助你快速迭代想法之间取得了平衡。

了解了基础知识后，让我们看看在原型中使用智能动画的一些不同方法。

使用智能动画来指示进度

从旋转器到骨架，有很多方法可以使用动画来产生进度感。在此示例中，我们使用 Touch ID 风格的指纹来帮助用户了解，当他们登录到他们的银行应用程序时，他们的生物识别数据正在被检查。

在此示例中，我们能够改变指纹不同部分“填充”的速度，因为每个段的长度不同，而整体计时保持不变。

为了实现这种效果，我们需要充分利用蒙版，以及组和单独圆的旋转来填充大部分段。如果你想确切了解它是如何完成的，绝对值得探索演示文档。你还可以看到我们是如何实现扩展发光的 — 图层大小、边框不透明度和图层不透明度的巧妙组合。

使用智能动画进行渐进式披露

当你处理设计中的大量信息时，首先隐藏其中一些信息，并且仅在用户有意识地选择查看更多信息时才显示它，这可能是有意义的。在这个音乐播放器中，我们引入了关于专辑的更多细节（曲目列表、流派等），这些细节在图库视图中没有必要显示。

在这里，我们使用图层位置和不透明度来控制不同元素动画进入视图的方向。我们还添加了一个关闭图标，该图标使用“上一个画板”目标以反向播放动画序列并关闭模态。

查看演示文档，以更好地了解这个示例的工作原理 — 尤其是我们如何使用图层位置来控制每个元素的运动。

使用智能动画添加润色

这一个有点难以解释！有时，你工作中的那种“润色”感可能归结为真正做好的最小细节。在此示例中，我们为黑胶播放器配套应用程序整理了一个引导序列。当你浏览引导屏幕时，插图会移动和更改以可视化播放过程。

如果你打开演示文档，你将看到我们严重依赖图层位置，以便在你完成引导步骤时将元素移入和移出屏幕。一个方便的提示是使用键盘上的箭头键将元素移出你的画板，而不是单击并拖动。这可以防止它们自动“重新父级”到不同的画板或画布。

最后，为了实现旋转记录效果，我们为黑胶唱片的标签和颜色图层设置了非常高的旋转值 — 这样它们在最终过渡期间会旋转多次。

在导航中使用智能动画

在智能动画的所有用例中，这是一个非常常见的用例。在此示例中，我们重新创建了一个经典的 macOS 侧边栏，其中包含可折叠项目。如果你一直在关注其他示例，你就会很好地了解我们是如何完成这项工作的，但你可能还会注意到我们为侧边栏按钮提供了一个简洁的悬停状态。

与此帖中的许多其他示例一样，通过打开演示文档，你将看到我们在这里使用图层位置。还有一些旋转与 V 形一起进行，以显示侧边栏中的子项目。这一切都相当简单，但最终的结果是，我们现在可以在 Sketch 中模拟 macOS 风格的 UI 动画！

智能动画是你可以通过玩耍和试验来学习的功能之一，因此我们鼓励你这样做。无论你是想添加一些基本的移动，还是想做一些更高级的事情，智能动画都能做到，但更重要的是，它可以访问。

与往常一样，我们很想知道你对智能动画的看法 — 如果你有问题、建议，或者只是想分享你用它制作的东西，请前往论坛。