经典动画原则:把「自然」翻译成引擎参数

其余各页讲「引擎能算什么」,这页反过来:迪士尼总结的经典动画原则——那些让运动「像真的」的经验法则—— 具体对应引擎的哪个参数。每条原则配一个「朴素 ⇄ 应用原则」可切换的对照,看同一段运动加上原则前后的差别。 与 CSS 侧的设计准则 好动画的七条准则互为表里:那边讲取舍,这边讲手法。

缓入缓出 slow in & slow out

真实物体启动要加速、停下要减速,匀速运动反而最不自然。引擎里就是把整体 ease 从 linear 换成 easeInOut。这是最基础也最常被忽略的一条,细节见缓动。

预备动作 anticipation

大动作之前先反向蓄力一下 (出拳前先收手),观众的眼睛被预告、动作更有力。引擎里就是在关键帧序列前面插一个 反向的途经点:x: [0, -蓄力, 目标],蓄力段占一小段时间。

挤压与拉伸 squash & stretch

有弹性的物体在受力时形变而体积守恒:下落时纵向拉伸,触地一刻横向铺开、纵向压扁。引擎里是给 scaleX / scaleY 各排一条反相的关键帧,与位置同步 (触地点最扁)。 transform-origin 设在底部,压扁才像贴着地面。

跟随与重叠 follow-through & overlapping

主体停下时,附属部分 (尾巴、衣摆) 因惯性继续往前、再回弹归位——这就是次要动作与重叠。 引擎里:主体用 easeOut 干脆停住,尾巴改用弹簧 (type: 'spring') 带过冲地追上来,两者起点相同、落定不同步。

弧线 arcs

生物的肢体绕关节转动,运动轨迹几乎都是弧线而非直线;直线位移看起来机械。引擎里让位置的两个分量各走各的: x 匀速推进、y 走一条 [0, -拱高, 0] 的抛物线,合成出弧。沿任意曲线运动的通法见 沿路径运动。