Sketch 推出 Smart Animate 新功能 可在原型设计中加入流畅的动画效果

Sketch 发布 Smart Animate 新功能，用于在设原型计中加入流畅的动画效果。通过 Smart Animate，用户可以在多个画板之间对相同名称的图层进行动画过渡，使设计变得更加生动和互动。

智能动画会在多个画板中寻找名称相同的图层，并在它们之间过渡时为这些图层的变化创建动画。如果您曾使用过 Keynote 的 Magic Move，那么对这个功能会感到非常熟悉！

主要功能

1. 动画过渡：Smart Animate 可以在多个画板之间对具有相同名称的图层进行自动动画过渡。例如，当一个形状在两个画板中大小或位置不同，Smart Animate 会自动生成大小或位置的过渡动画，使转换过程平滑自然。
2. 自动识别图层变化：Smart Animate 会自动识别不同画板中相同图层的变化，并基于这些变化生成动画。无需手动设置复杂的动画路径，极大地简化了动画创建流程。
3. 自定义动画参数：用户可以根据需要设置动画的持续时间和缓动效果（如线性、加速等），以控制动画的速度和流畅性。这样可以让动画效果更加符合设计需求和用户体验。
4. 适用于各种交互效果：Smart Animate 可以用于各种交互场景，如按钮点击后的页面过渡、菜单展开、信息显示等，帮助设计师实现流畅的过渡动画，让用户体验更加直观。
5. 复杂的动画控制：除了基本的大小、位置和透明度的动画，Smart Animate 还支持更复杂的动画，如旋转、颜色变化等。这使得设计师能够通过简单的操作实现丰富的动画效果。
6. 提高设计的视觉效果和互动性：通过 Smart Animate，设计师可以为他们的原型添加视觉上的动感效果，让用户更直观地感受到设计的动态变化，提升整体的用户体验和交互性。

案例展示

1. 动画过渡

• Smart Animate 可以在多个画板之间对具有相同名称的图层进行自动动画过渡。例如，当一个形状在两个画板中大小或位置不同，Smart Animate 会自动生成大小或位置的过渡动画，使转换过程平滑自然。

在这个示例中，我们有一个在两个画板中名称相同的椭圆形图层——唯一的区别是它们的大小不同。使用智能动画创建过渡效果时，椭圆会平滑且逐步地增大。

• Smart Animate 会自动识别不同画板中相同图层的变化，并基于这些变化生成动画。无需手动设置复杂的动画路径，极大地简化了动画创建流程。
• 要设置智能动画，请确保所有要进行动画的图层在多个画板中名称相同。然后，当您从一个图层或画板链接到另一个时，在检查器的原型选项卡中选择智能动画作为动画类型。您还可以设置动画的持续时间和缓动类型，以定制动画效果。

• 用户只需确保需要动画的图层在不同画板中拥有相同的名称，并在“Prototype”选项卡中选择 Smart Animate 作为动画类型即可。还可以设置动画的持续时间和缓动类型，进一步自定义动画效果。

2. 进度动画

• Smart Animate 可以用于表示加载进度，例如通过指纹验证时，使用动画填充指纹的不同部分，帮助用户理解进度。

3. 渐进式信息展示

• 通过 Smart Animate，用户可以选择何时展示更多信息，例如在音乐播放器中，当用户点击某个专辑时，显示曲目列表和其他详细信息。不同元素根据图层位置和透明度进行动画，创建动态的用户体验。

4. 动画微调

• Smart Animate 还可以用于微调设计的细节，增加“打磨”效果。例如，在一个应用的引导页面中，随着用户的操作，图像和元素会随着步骤移动、旋转或变形，为用户带来更加直观的引导体验。

5. 在导航中使用智能动画

• 智能动画的一个常见应用是导航设计。在此示例中，重现了经典的 macOS 侧边栏，带有可折叠的项目。给侧边栏按钮添加了一个悬停状态。

官方介绍：https://www.sketch.com/blog/smart-animate/