原文链接

本文翻译自 Pablo Stanley 的 Good to great UI animation tips，请参考原文阅读。

如何让 UI 动画从单纯的良好变得更加出色呢？在这里我将举一些实例。只需要将动画进行一些微调，就可以让其效果更佳。

下面列出的交互效果显示了状态之间的连续性，共享元素之间的关系，以及如何让用户关注你想让他们关注的地方。

为了创建这些动画，我遵循了 Material Motion、IBM’s Animation Principles 和 The UX in Motion Manifesto 中的指导原则。

所有交互都是使用 InVision Studio 的早期可访问版本处理的。

tab 切换

• 良好的动画可以让内容从一种状态淡入淡出到另一种状态。

• 出色的动画通过让内容在状态之间移动来显示过渡的连续性。

在设计诸如选项卡或弹出菜单之类的交互时，请尝试将内容的位置放置在相对于打开它的操作的位置。这样，您不仅可以为内容设置可见性动画，还可以为设置位置动画。另外还可以添加滑动手势，以从一种内容转移到另一种内容。

连接共享元素

• 良好的动画使用诸如向左推或向上滑动之类的过渡来在详情页面上显示内容。

• 出色的动画通过为共享内容设置动画来在两个状态之间建立联系。

在不同状态之间设置动画时，看看它们之间是否存在任何共享元素，如果有的话可以考虑通过某种动画将它们连接想来。使用 InVision Studio，在创建 Motion 过渡时，将自动连接在两个屏幕之间重复的组件。这使原型动画制作变得轻而易举。

可以查看 Motion Manifesto 以了解可以使用的动画类型。上面的示例结合了 Masking、Transformation、Parenting 和 Easing 几种动画效果。

级联效果

• 良好的动画会在内容进入屏幕时改变其位置和不透明度。

• 出色的动画会让每个分组或元素的外观错开。

要实现瀑布效果，请尝试对每个内容或每一组内容使用延迟效果。保持相同的缓动时间和持续时间，以便保持一致。不过，请不要层叠每个细节元素 -- 而是为内容组设置动画。保持动画快速且生动。Google 建议每个元素之间的间隔不超过 20 毫秒。查看 Material Motion 中的编排原理，以查看更多示例。