动画有助于定义设计中交互的感受,并在画板之间创建平滑且真实的过渡。
动画类型
有四种动画类型可供选择
- 瞬间。 此过渡会立即跳转到目标画板,没有缓动或持续时间选项。
-
滑动。 此过渡将一个画板滑到另一个画板之上。
-
溶解。 在两个画板之间提供交叉淡入淡出效果,当您想要一种没有移动的简单过渡时,这是一个不错的选择。
-
智能动画。 自动为具有匹配名称的图层的 位置、大小、旋转或形状的更改添加动画。
如何设置动画
- 创建交互 在两个画板之间,或者在一个图层和一个画板之间。
- 在原型选项卡中,转到交互部分中的动画。选择瞬间、溶解、智能动画或滑动。
如何设置智能动画
与其他动画一样,要设置智能动画,请在检查器中转到原型选项卡,并在动画下拉菜单中选择智能动画。您可以在位置、形状或大小等属性上应用智能动画。
但是,在设置智能动画时,还需要注意以下几点
- 确保要添加动画的图层位于画板内。
- 确保要添加动画的两个图层具有相同的名称和类型。智能动画将识别这两个画板上的这些图层之间属性的更改,并自动为它们添加动画。
- 如果除了位置、形状或大小的更改外,还有颜色、混合模式或滤镜(如阴影或模糊)的更改,Sketch 将自动为前者应用溶解动画,并为位置、形状或大小的更改保留智能动画。
- 不幸的是,您无法将智能动画应用于路径、边框、具有不同矢量点数量的形状、文本、渐变或叠加层。
缓动、持续时间和方向
对于瞬间、滑动和智能动画,您可以自定义:缓动。控制动画的速度,以创建更真实的过渡。使用缓动,您可以创建诸如从缓慢开始、加速、然后再次减速之类的效果。您可以从不同类型的缓动中进行选择
- 线性:动画将从开始到结束以恒定速度进行。
-
缓入:动画将从缓慢开始,加速到结束,然后突然停止。
-
缓出:动画将从快速开始,减速到结束,然后逐渐停止。
-
缓入缓出:动画将从缓慢开始,在中间加速,然后减速到结束。
- 缓入回弹/缓出回弹/缓入缓出回弹:动画经过目标后,将回弹到位。
持续时间。选择动画从开始到结束需要多长时间。
如果您使用的是滑动动画,可以选择画板从哪个方向滑动。您可以在动画下的方向部分找到它。