3、动效设计工具：After Effects基础、Principle基础、Figma原型动效、Lottie与SVG动画

做UI动效设计，工具是绕不开的坎。我见过不少设计师，手绘草图很漂亮，一到落地就卡壳。说白了，工具不是目的，但选对工具能让你少走一半弯路。

这一章，我挑四个最常用的工具来讲。它们各有侧重，也各有脾气。我个人习惯是：AE做复杂动效，Principle做交互原型，Figma做快速验证，Lottie和SVG做最终交付。你想想看，一个动效从构思到上线，基本就是这条路径。

3.1 After Effects基础：动效的工业标准

AE在动效界的地位，就像Photoshop在修图界。几乎所有的复杂动效，最后都要回到AE里打磨。我刚开始学的时候，被它的时间线和关键帧搞得头晕，后来发现，其实核心就几个东西。

3.1.1 关键帧与缓动曲线

关键帧是动效的骨架。你告诉AE「这里开始，那里结束」，剩下的由它来补间。但真正让动效活起来的，是缓动曲线。

默认的线性运动，看起来像机器人。你需要手动调整曲线，让运动有「呼吸感」。我在项目中遇到过一个问题：一个弹窗弹出动画，怎么调都觉得生硬。后来发现是缓动曲线太对称了。改成「快进慢出」后，瞬间顺眼了。

3.1.2 表达式入门

表达式是AE的进阶玩法。说白了，就是用代码控制动画。比如让一个元素始终跟随鼠标，或者让两个图层的运动同步。

// 让图层A的旋转跟随图层B的位置
thisComp.layer("图层B").transform.position[0]

嗯，这里要注意：表达式不是必须的。但如果你要做批量修改或者复杂联动，它能救你一命。我曾经用表达式一次性调整了50个图层的入场时间，手动做的话，估计要加班到天亮。

3.2 Principle基础：交互原型的利器

AE擅长做「看」的动效，但不太擅长做「用」的动效。Principle就不一样了，它天生就是为交互原型设计的。

我记得第一次用Principle做原型，只花了半小时就做出了一个完整的页面切换动效。AE里可能要折腾半天。为什么？因为Principle的驱动逻辑是「事件」，而不是「时间线」。

3.2.1 驱动与组件

在Principle里，你不需要手动打关键帧。你只需要告诉它：「当用户点击这个按钮时，那个面板滑上来」。剩下的，Principle会自动生成过渡动画。

• 驱动（Drive）： 把一个属性的变化绑定到另一个属性上。比如，滚动位置驱动透明度。
• 组件（Component）： 复用动效模块。我习惯把「点赞动画」做成组件，多个页面共用。

3.3 Figma原型动效：从设计到动效的无缝衔接

Figma这几年发展很快，它的原型动效功能也越来越强。虽然比不上AE和Principle那么专业，但胜在「快」和「轻」。

你想想看，设计师在Figma里画完界面，直接就能加动效，不用切换工具。这种流畅感，对快速迭代特别重要。

3.3.1 智能动画与变体

Figma的「智能动画」功能，是我用得最多的。它可以根据两个画板之间的差异，自动生成过渡动画。比如，一个按钮从「默认态」到「悬停态」，你只需要做好两个画板，Figma会自动补间。

// 使用技巧
1. 确保两个画板中的图层名称一致
2. 图层结构也要保持一致
3. 触发方式选择「点击」或「悬停」

我在项目中遇到过一个问题：智能动画有时候会「跳帧」。后来发现，是因为图层名称不一致。Figma是靠名称来匹配图层的，名称对不上，它就会乱动。

3.4 Lottie与SVG动画：让动效真正跑起来

前面讲的都是设计工具，但动效最终要落地到代码里。Lottie和SVG，就是连接设计与开发的桥梁。

3.4.1 Lottie：设计师的福音

Lottie是Airbnb开源的一个库，它可以把AE导出的JSON文件直接渲染成动画。这意味着，设计师在AE里做的复杂动效，开发可以直接用，不用重新写代码。

我个人习惯是：在AE里做好动效，用Bodymovin插件导出JSON，然后交给前端。前端只需要引入Lottie库，几行代码就能跑起来。

// 前端调用Lottie动画
import lottie from 'lottie-web';

lottie.loadAnimation({
  container: document.getElementById('animation'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'data.json' // 设计师导出的文件
});

3.4.2 SVG动画：轻量级的选择

如果你的动效比较简单，比如一个图标旋转、一条线描边，SVG动画是更好的选择。它不需要引入额外的库，文件体积也小。

SVG动画的核心是「stroke-dasharray」和「stroke-dashoffset」。说白了，就是控制线条的「画」和「擦」。

/* 描边动画示例 */
.path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 2s ease forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

我曾经用SVG动画做了一个加载图标，只有2KB，比Lottie的JSON文件小了10倍。对于性能敏感的场景，比如移动端H5，SVG动画是首选。

3.5 工具选择建议

说了这么多，到底该用哪个？我整理了一个表格，方便你对照选择。

工具	适用场景	学习成本	输出格式
After Effects	复杂动效、品牌动画	高	视频、JSON
Principle	交互原型、页面切换	中	视频、原型文件
Figma	快速验证、团队协作	低	原型链接
Lottie	跨平台动画落地	低（对开发）	JSON
SVG动画	轻量级、高性能场景	中	HTML/CSS

最后说一句：工具是死的，人是活的。别被工具束缚住，动效设计的核心永远是「感觉」和「逻辑」。你想想看，用户不会关心你是用AE还是Principle做的，他们只关心这个动效好不好用、舒不舒服。

嗯，这一章就到这里。下一章我们聊聊动效的「设计原则」，那才是真正决定动效好坏的东西。