怎样用工具调整缓动曲线？

本文目录导读：

1. 前端开发（CSS/Web动画）
2. 专业 UI/动效设计软件
3. 游戏引擎（Unity & Unreal Engine）
4. 核心调整技巧（原理通用）
5. 新手快速入门流程

调整缓动曲线（Easing Curve，也称动画曲线或贝塞尔曲线）是让动画从“死板”变得“生动”的关键，根据你使用的工具不同（如前端代码、UI动效软件或游戏引擎）,操作方式有所区别。

以下是主流的几种工具及其调整方法：

前端开发（CSS/Web动画）

在 Web 开发中，最常用的是 CSS cubic-bezier() 函数。

• 理论： 曲线由两个控制点（P1, P2）决定，格式为 cubic-bezier(x1, y1, x2, y2)。
• 在线可视化工具（最推荐）：
  • cubic-bezier.com：业界标准工具，你可以直接用鼠标拖拽曲线上的两个控制点手柄，右侧会实时预览动画效果，满意后直接复制生成的 cubic-bezier 代码。
  • Easing Functions Cheat Sheet：提供了大量预设曲线（如 ease-in-out, ease-out）的交互式演示。
• 浏览器开发者工具（Chrome DevTools）：
  1. F12 打开开发者工具。
  2. 在 Elements（元素）面板中，找到应用了 transition 或 animation 的 CSS 规则。
  3. 点击 transition-timing-function 属性值旁边的紫色小方块图标。
  4. 会弹出一个可视化编辑器，你可以直接用鼠标拖拽曲线控制点,调整时页面会实时响应。
• 手动代码示例：

  /* 一个先快后慢再快结束的弹跳效果 */
  .element {
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  }

专业 UI/动效设计软件

这类软件提供了最直观的曲线编辑器。

• Figma：
  • Smart Animate（智能动画）： 在两个不同状态的 Frame 之间创建原型交互。
  • 调整方法： 在 Prototype（原型）面板中，选中连接线，在右侧的 Easing 下拉菜单中，选择 Custom Bezier（自定义贝塞尔）,然后直接拖拽曲线图上的两个锚点手柄即可。
• Adobe After Effects：
  • 图形编辑器（Graph Editor）： 这是业界最强大的曲线调整工具。
  • 操作： 选中一个关键帧 > 右键 > 关键帧辅助 > 缓入/缓出。
  • 精调： 点击时间轴面板上的 Graph Editor 按钮（图标像曲线图），你会看到速度曲线（Value/Speed graph），直接拖拽曲线手柄，可以精确控制某时刻的速度变化（例如制造“弹跳”或“回弹”效果）。
  • 注意： AE 中分“值曲线”和“速度曲线”,调整速度曲线更常用。
• Sketch：
  • 在原型交互面板中，选择 Animated 后，即可在下方设置 Easing 类型,同样支持自定义贝塞尔曲线。

游戏引擎（Unity & Unreal Engine）

游戏引擎的曲线调整通常用于控制角色移动、摄像机跟随、UI 动画等。

• Unity：
  • Animation 窗口： 打开 Window > Animation > Animation。
  • Curves（曲线）模式： 在动画窗口中，点击 Curves 按钮,你会看到每个动画属性的变化曲线。
  • 调整方法： 你可以直接选中曲线上的关键帧，然后拖拽出现的切线手柄（白色或蓝色的小点）来调整曲线斜率，在 Inspector 面板中还可以精确输入数值。
  • Animation Curve 组件： 在脚本中，你可以定义一个 public AnimationCurve 变量，在 Inspector 中点击该变量，会弹出一个内嵌的曲线编辑器,你可以直接在上面绘制自定义曲线。
• Unreal Engine：
  • Timeline 节点（蓝图）： 在蓝图脚本中，创建一个 Timeline 节点。
  • 调整方法： 双击打开 Timeline，它包含一个曲线编辑器，你可以右键添加关键帧，然后拖拽调整手柄，曲线代表输出值随时间的变化，你还可以在曲线中添加额外的点，形成复杂的“弹跳”或“回弹”效果。

核心调整技巧（原理通用）

无论用哪个工具，调整的核心都在于控制速度的变化：

1. 缓入（Ease-in / Deceleration）：

   • 曲线形状： 曲线开始平缓，末端陡峭。
   • 效果： 物体从静止缓慢加速，最后快速达到终点（例如汽车启动）。
   • 调整要点： 将曲线的第一个控制点拉向靠近起点（X 轴小，Y 轴小）。

2. 缓出（Ease-out / Acceleration）：

   • 曲线形状： 曲线开始陡峭，末端平缓。
   • 效果： 物体从高速快速启动，然后缓慢减速直至停止（例如刹车）。
   • 调整要点： 将曲线的第二个控制点拉向靠近终点（X 轴大，Y 轴大）。

3. 制作弹性效果（Bounce/Spring）：

   • 方法： 将第一个控制点的 Y 值拉到负数（低于 0），或第二个控制点的 Y 值拉到大于 1。
   • 结果： 物体会在终点处来回抖动（超调）,就像弹簧或皮球落地一样。
   • 举例 CSS： cubic-bezier(0.68, -0.55, 0.27, 1.55)（第一个 Y 为负，末端 Y 大于 1，产生明显的弹跳）。

4. 使用预设：

   • 大多数工具都内置了 ease, ease-in, ease-out, ease-in-out, linear 等基本选项，在尝试自定义前,可以先用它们快速验证效果。

新手快速入门流程

1. 先选工具： 如果你在写网页，直接打开 cubic-bezier.com，如果你在设计 UI 原型，用 Figma，如果做复杂动效，用 AE。
2. 从预设开始： 先试试 ease-out（缓出，自然减速）,这是最常用的。
3. 尝试拖拽： 在曲线编辑器中，拖动手柄，让曲线在起点陡峭、终点平缓（缓出），或者反过来（缓入）。
4. 尝试“出界”： 把手柄拖出曲线方框（让 Y 值小于 0 或大于 1），体验弹簧/弹跳效果。
5. 实时预览： 所有专业工具都支持实时预览。不要盯着代码看，要看物体的实际运动轨迹。

通过反复拖拽和预览，你很快就能掌握调整缓动曲线的“手感”。

标签： 缓动曲线 工具调整