新增:智能动画 — 为您的原型带来动感。 了解更多

跳过导航

添加动画

上次更新于 2024 年 9 月 17 日
阅读时间:2 分钟

动画有助于定义设计中交互的感受,并在画板之间创建平滑且真实的过渡。

动画类型

有四种动画类型可供选择

  • 瞬间。 此过渡会立即跳转到目标画板,没有缓动或持续时间选项。
  • 滑动。 此过渡将一个画板滑到另一个画板之上。

  • 溶解。 在两个画板之间提供交叉淡入淡出效果,当您想要一种没有移动的简单过渡时,这是一个不错的选择。

  • 智能动画。 自动为具有匹配名称的图层的 位置、大小、旋转或形状的更改添加动画。

如何设置动画

  1. 创建交互 在两个画板之间,或者在一个图层和一个画板之间。
  2. 在原型选项卡中,转到交互部分中的动画。选择瞬间溶解智能动画滑动

如何设置智能动画

与其他动画一样,要设置智能动画,请在检查器中转到原型选项卡,并在动画下拉菜单中选择智能动画。您可以在位置、形状或大小等属性上应用智能动画。

但是,在设置智能动画时,还需要注意以下几点

  • 确保要添加动画的图层位于画板内。
  • 确保要添加动画的两个图层具有相同的名称和类型。智能动画将识别这两个画板上的这些图层之间属性的更改,并自动为它们添加动画。
  • 如果除了位置、形状或大小的更改外,还有颜色、混合模式或滤镜(如阴影或模糊)的更改,Sketch 将自动为前者应用溶解动画,并为位置、形状或大小的更改保留智能动画。
  • 不幸的是,您无法将智能动画应用于路径、边框、具有不同矢量点数量的形状、文本、渐变或叠加层。

缓动、持续时间和方向

对于瞬间、滑动和智能动画,您可以自定义:缓动。控制动画的速度,以创建更真实的过渡。使用缓动,您可以创建诸如从缓慢开始、加速、然后再次减速之类的效果。您可以从不同类型的缓动中进行选择

  • 线性:动画将从开始到结束以恒定速度进行。
  • 缓入:动画将从缓慢开始,加速到结束,然后突然停止。

  • 缓出:动画将从快速开始,减速到结束,然后逐渐停止。

  • 缓入缓出:动画将从缓慢开始,在中间加速,然后减速到结束。

  • 缓入回弹/缓出回弹/缓入缓出回弹:动画经过目标后,将回弹到位。

持续时间。选择动画从开始到结束需要多长时间。

如果您使用的是滑动动画,可以选择画板从哪个方向滑动。您可以在动画下的方向部分找到它。