blurrr 中文文档 下载 App

Blurrr 曲线编辑器——让关键帧动画从"线性"变"自然"

为什么需要曲线

默认情况下,Blurrr 的关键帧之间是线性插值——动画以恒定速度从起始值变到结束值。这在几何上是正确的,但在视觉上往往显得机械、不自然。

真实世界的运动是有加速度和减速度的:

曲线编辑器就是用来控制这个"速度变化"的工具。

打开曲线编辑器

在时间轴上展开某条关键帧轨道后:

  1. 选中一个关键帧标记
  2. 点击时间轴上方的「曲线」按钮
  3. 弹出曲线编辑器面板,显示该参数的速度曲线

曲线类型速查

Blurrr 内置了多种常用曲线预设:

曲线类型效果典型用途
线性 (Linear)恒定速度,无加速减速机械运动、匀速镜头、数据可视化
缓入 (Ease In)开头慢,然后加速物体下落、汽车起步、镜头拉远
缓出 (Ease Out)开头快,然后减速物体停止、汽车刹车、镜头推近
缓入缓出 (Ease In Out)两头慢,中间快大多数动画的首选,最自然的过渡
弹性 (Elastic)末尾有过冲回弹卡通感、UI 元素弹出效果
弹跳 (Bounce)末尾有多次递减回弹物体落地、娱乐化效果
指数 (Exponential)变化越来越快倒计时、数值快速增长

逐点调节

除了用预设曲线,还可以手动调节单个关键帧的入手柄和出手柄:

这和 After Effects 的贝塞尔手柄逻辑完全一致。如果你用过 AE 的曲线编辑器,Blurrr 的手感几乎一样。

曲线对视觉效果的影响

用同一个动画(位置从左到右移动 2 秒)对比不同曲线类型的观感差异:

曲线类型视觉感受
线性机械匀速移动,像在轨道上滑
缓入缓出先慢后快再慢,自然加减速,最接近真实运动
缓入开始很慢,后半段突然加速冲过去
缓出前半段高速移动,接近终点时减速停下
弹性接近终点时会"冲过头"一点再回来

实战建议:90% 的动画用缓入缓出就够了。弹性和弹跳在娱乐化、卡通感场景下用效果好,但滥用会显得杂乱。

曲线编辑器快捷键

实战案例:入场动画曲线调节

一个典型的淡入缩放入场动画,推荐的曲线设置:

参数起始关键帧曲线结束关键帧曲线
缩放 (0% → 100%)缓入缓出缓出(让停下更自然)
不透明度 (0% → 100%)缓入缓出线性(透明度渐变不需要弹性)
位置 (从下往上移动)缓入(像被重力拉起)缓出(到位后减速)

全部用同一个曲线类型反而会让动画显得单调——不同参数配合不同曲线,才有"质感"。