Sketch动效教程：精通下拉展开与收起动画的制作技巧368

在现代用户界面设计中，动效已不仅仅是锦上添花，更是提升用户体验、引导用户交互、传达品牌个性的核心要素。一个平滑、自然的动效能够让界面变得生动起来，减少用户的认知负荷，并带来愉悦的操作感受。在Sketch这款强大的设计工具中，虽然它最初以静态设计闻名，但通过其内建的“Smart Animate”（智能动画）功能以及与其他原型工具的结合，我们完全可以制作出各种高质量的动效，其中“下滑展开”或“下拉收起”动效是UI中极为常见且实用的一种。

本文将作为您的设计软件专家，深入浅出地讲解如何在Sketch中从零开始制作出专业级的下滑动效。无论是用于手风琴式（Accordion）列表、下拉菜单（Dropdown Menu）、信息展开（Expandable Content）还是通知面板（Notification Panel），您都将掌握其核心原理与制作技巧。

一、理解Sketch动效的核心：Smart Animate与画板状态

在深入实践之前，我们需要先了解Sketch制作动效的底层逻辑。Sketch并非专业的动效工具（如After Effects），它的动效能力主要基于“状态切换”和“图层属性插值”：
画板（Artboards）代表不同状态： 在Sketch中，每一个画板都可以被看作是UI的一个“状态”。例如，一个画板代表了“收起”状态，另一个画板则代表了“展开”状态。
Smart Animate（智能动画）自动插值： 这是Sketch动效的核心。当您在两个画板之间建立连接并选择Smart Animate时，Sketch会智能地识别两个画板中*相同命名的图层*，并自动计算这些图层从一个状态到另一个状态的属性变化（位置、大小、旋转、不透明度、填充颜色、描边等），然后生成平滑的过渡动画。
热区（Hotspots）与链接（Links）触发交互： 您需要在画板上设置一个可点击的区域（热区），将其链接到另一个画板，从而触发状态切换和随之而来的动画。

因此，制作下滑动效的关键在于：精心设计好“起始状态”和“目标状态”的画板，并确保在两个画板中需要动画的图层拥有完全一致的名称。

二、制作一个简单的手风琴式下滑展开动效

让我们通过一个具体的案例来实践：制作一个点击标题后内容下滑展开的手风琴（Accordion）组件。

2.1 准备工作：创建初始UI元素

1. 新建Sketch文件： 打开Sketch，创建一个新的文件，并创建一个适合手机屏幕尺寸的画板（例如 iPhone 14）。
2. 创建标题区域：
* 绘制一个矩形作为背景（例如，宽375px，高60px，填充浅灰色）。
* 在矩形上添加一个文本图层，输入“点击展开内容”（例如，字体大小18pt，居中对齐）。
* 在标题右侧添加一个向下的小箭头图标（可以使用形状工具绘制，或导入一个SVG图标）。
* 将这三个元素（背景矩形、文本、箭头）编组，命名为“Header”。
3. 创建内容区域（初始隐藏）：
* 在“Header”组下方，绘制另一个矩形作为内容背景（例如，宽375px，高150px，填充白色）。
* 在内容背景上添加一个文本图层，输入一些占位符内容（例如，“这里是展开后的详细内容。这是一个演示如何制作下滑动效的例子。”）。
* 将内容背景矩形和文本图层编组，命名为“Content”。
* 重要一步： 此时，“Content”组应该紧挨着“Header”组的下方。我们将这个内容区域的“Y”坐标设置为使其完全隐藏在“Header”组之下，或者更简单的方法是，将其高度暂时设置为0，确保它不占据空间，但在展开后需要恢复其原始高度。

现在，您应该有一个画板，上面只有一个“Header”组和一个紧跟其后的“Content”组，且“Content”组是“收起”状态（可能高度为0或位于Header下方且不可见）。将这个画板命名为“Accordion – Closed”。

2.2 设计目标状态：内容展开

1. 复制画板： 选中“Accordion – Closed”画板，按住 `Alt` 键拖动复制一份，命名为“Accordion – Open”。
2. 展开内容：
* 在“Accordion – Open”画板中，选中“Content”组。
* 将其高度调整为完整显示内容（例如，恢复到150px），并调整其Y轴位置，使其在“Header”组下方正常显示。
* 如果您的画板上还有其他元素（例如，手风琴下方的另一个组件），它们也应该向下移动相应的距离，以模拟真实界面的内容推移效果。
3. 调整箭头方向： 选中“Header”组中的箭头图标。在“Accordion – Open”画板中，将其旋转180度，使它指向上方（表示内容已展开，点击可收起）。

现在，您有了两个画板：“Accordion – Closed”和“Accordion – Open”，分别代表了手风琴的收起和展开状态。所有需要动画的图层（如内容组的位置和大小、箭头图标的旋转）在两个画板中都保持了相同的图层名称。

2.3 连接画板并应用Smart Animate

1. 从“Closed”到“Open”的链接：
* 回到“Accordion – Closed”画板。
* 选中“Header”组（或者只选中标题文本或箭头，取决于您希望哪个区域可点击）。
* 在右侧的Inspector面板中，切换到“Prototype”（原型）选项卡。
* 点击“Hotspot”工具，在“Header”组上拖拽一个热区。
* 在右侧面板的“Links to”下拉菜单中，选择“Accordion – Open”画板。
* 在“Animation”下拉菜单中，选择“Smart Animate”。
* 您可以调整“Easing”（缓动曲线，例如“Ease Out”通常比较自然）和“Duration”（持续时间，例如300ms）。
2. 从“Open”到“Closed”的链接（回弹动效）：
* 回到“Accordion – Open”画板。
* 同样地，选中“Header”组，添加一个热区。
* 将其链接到“Accordion – Closed”画板。
* “Animation”选择“Smart Animate”，并保持与上一步相同的Easing和Duration。

2.4 预览动效

现在，您可以点击Sketch工具栏上的“Play”按钮（或使用快捷键 `Cmd + P`），或在Sketch Mirror应用程序中预览您的原型。点击手风琴的标题区域，您会看到内容平滑地从下方展开，箭头也会相应旋转；再次点击，内容则会平滑收起。

三、高级技巧与注意事项

掌握了基本流程后，以下是一些能让您的下滑动效更专业、更灵活的高级技巧和注意事项：

3.1 图层命名的艺术与科学

这是Smart Animate成功的基石。Sketch会通过图层名称来匹配两个画板之间的元素。确保以下几点：
完全一致： 需要动画的图层（包括编组）在起始画板和目标画板中必须有完全相同的名称。例如，如果一个画板中的内容组叫“Content Group”，另一个画板中叫“Expanded Content”，Smart Animate将无法识别并动画化它们。
唯一性： 在同一个画板内，尽量保持图层名称的唯一性，尤其是在同一层级下。
编组与图层： Smart Animate可以动画化编组以及编组内的图层。如果您想动画化整个内容区域的位移和大小，请将其编组，并确保该编组在两个画板中名称一致。

3.2 恰当的缓动曲线（Easing Curves）与持续时间（Duration）

动画的“感觉”很大程度上取决于缓动曲线和持续时间。
Easing Curves：

Ease In： 动画开始时慢，然后加速。
Ease Out： 动画开始时快，然后减速（常用于元素进入视图）。
Ease In Out： 动画开始和结束都慢，中间快（常用于元素来回移动）。
Linear： 匀速运动，通常感觉比较机械。
Custom Cubic Bezier： 允许您通过曲线完全自定义缓动效果，实现独特的动画节奏。

对于下滑展开动效，Ease Out 或 Ease In Out 往往能提供最自然、最流畅的体验，让内容感觉像是“轻柔地落下”。 Duration：

太短： 动画会显得过于突兀，用户难以感知细节。
太长： 会让用户觉得操作迟滞，等待时间过长。
黄金法则： 对于大多数UI微交互，200ms到400ms是一个比较舒适的范围。具体取决于动画的复杂度和涉及的元素数量。

3.3 处理页面上其他元素的位移

当内容下滑展开时，其下方的其他UI元素通常需要随之向下推移，而不是被覆盖。在我们的手风琴示例中，当“Content”组展开时，如果下方有另一个手风琴或者其他组件，您需要在“Accordion – Open”画板中手动将这些元素向下移动，以确保它们在动画过程中看起来像是被推开的。Smart Animate会自动动画化这些元素的Y轴位移。

3.4 使用Overlays（叠加层）制作弹窗式下滑

虽然Smart Animate适合于改变当前页面布局的下滑，但如果您需要制作一个从屏幕顶部下滑进入的通知栏、或者从底部上滑进入的动作表单（Action Sheet），并且希望它能覆盖当前页面，而不是推开页面内容，那么“Overlay”（叠加层）功能会更适合：
创建一个新的画板作为叠加层的内容（例如，一个顶部通知栏）。
在原画板中，设置一个热区链接到这个新的叠加层画板。
在原型设置中，将“Animation”选择为“Overlay”，然后您可以选择“From Top”、“From Bottom”等进入方向，以及设置叠加层的背景（例如，带透明度的深色）。
注意： Overlay动画并非Smart Animate，它只是一种预设的进入/退出效果。如果您需要更复杂的叠加层内部动画，可能仍需结合Smart Animate在一个叠加层内部进行。

3.5 组件（Symbols）与动效

在Sketch中，组件是提高效率和保持一致性的强大工具。但Smart Animate通常是作用于组件的*实例*或*分离的实例*。
如果您希望整个手风琴组件都可复用并带有动画，可以创建一个主组件，并在主组件内创建不同的状态（例如，通过覆盖不同文本或显示/隐藏图层），但Smart Animate直接应用于组件实例之间的切换可能需要一些技巧。
更常见且直接的做法是：创建组件的不同“状态”作为独立的主组件（例如，“Accordion/Closed”和“Accordion/Open”），然后在页面上放置这些组件实例，并通过Smart Animate在这些实例之间切换。
或者，在需要动画化的组件实例上点击右键“Detach from Symbol”（分离组件），然后对其进行修改和动画化。

3.6 常见问题与排查

动画无效或不平滑： 90%的问题都出在图层命名不一致。仔细检查所有相关图层的名称。
元素突然消失/出现： 这通常是因为在其中一个画板中，某个图层被完全删除，或者其不透明度从0跳到100（或反之），而不是平滑过渡。确保需要动画的图层在两个画板中都存在，并调整其不透明度或大小。
动画方向错误： 检查您的链接方向，以及是否正确设置了起始和目标画板。

四、总结与展望

通过本文的讲解，您应该已经掌握了在Sketch中制作下滑动效的核心原理和具体步骤。从最基础的Smart Animate概念，到手风琴案例的实战，再到高级的图层命名、缓动曲线、Overlays和组件应用，您现在拥有了创建各种专业级下滑动效的能力。

动效设计是一个不断学习和实践的过程。多尝试不同的缓动曲线、持续时间，观察优秀的UI产品是如何运用动效的，并不断将这些经验应用到您的Sketch设计中。记住，动效的目的是为了改善用户体验，而不是为了炫技。一个恰到好处、行云流水的下滑动效，将极大地提升您设计的吸引力和可用性。

2025-11-10

---

下一篇：Sketch设计中如何高效审查与管理组件字体大小