缓动曲线:动画丝滑的秘密
两个关键帧之间的过渡,默认是匀速直线——机械、廉价、一眼假。真实世界的运动都有加速与减速:汽车起步慢、刹车慢、中间快;球落地弹起,先快后慢再回弹。缓动就是给动画加上的这份物理感,官方将其列为产品核心特性之一:「为更流畅的动态选择预设或自建时间曲线」。
预设缓动:先会用五款
在关键帧区段上打开缓动选项,会看到一批预设曲线。最常用的五种:
- 缓入(ease in):起步慢、越走越快——元素离场、加速冲刺;
- 缓出(ease out):起步快、缓缓停住——元素入场、镜头到位,入场动画首选;
- 缓入缓出:两头慢中间快,最自然的通用选择;
- 弹性(elastic):到位后来回震荡收敛——Q 弹的图标落位;
- 跳跃(bounce):像球落地一样弹跳衰减—— playful 风格、卡通感。
自定义曲线:进出的自由
预设之外,应用提供曲线编辑器:缓动区段以二维曲线呈现,横轴是时间、纵轴是属性进度,拖动曲线两端的手柄改变加减速的分布。曲线越陡变化越快,越平变化越慢。
两个实用心得:
- 过冲(overshoot):让曲线短暂超过终点再回落,动画有「甩到位再稳住」的利落感,标题入场极常用;
- 保存曲线:调好的曲线可以存为自定义预设,形成自己的动效节奏签名。
缓动叠加运动模糊
缓动解决「节奏」,运动模糊解决「残影」:快速运动配上基于速度的动态模糊,画面才有真实摄影的质感。两者都做,动画的完成度直接上一个台阶,见高频效果速查:模糊、发光、故障风与抖动。
一个检验标准
做完动画后用「盲测」检验:把手机拿远,只看动画能不能感到「力」的存在——物体是被什么力量驱动到位的?有力感,缓动就对了;像机器人匀速平移,回去加曲线。