缓动:把时间重新塑形
真实时间是均匀流逝的 (linear)。缓动 (easing) 不改变起点与终点,只把这条均匀的时间轴
重新映射成有快慢的值进度:先慢后快 (ease-in)、先快后慢 (ease-out)、两端慢中间快
(ease-in-out)。下拉里除经典的 power / circ / back,还有 sine (最温和)、expo
(最强烈)、elastic (弹片往复) 与 bounce (落地回弹) 几族。选一条曲线,
看画板上的形状与下面两颗小球的运动节奏如何一一对应——
橙球走选中的缓动,
蓝球是 linear 参考。
缓动曲线 (橙) vs linear 对角参考 (虚线)
两颗球同时出发、同时到达,差别只在中途的快慢
end
end
当前 ease(t) —
1 − easeIn(1 − t);
ease-in-out 是把 ease-in 关于中点镜像。所以引擎只需定义一条 in 曲线,out / in-out 由
reverseEasing / mirrorEasing 变换得到。
cubic-bezier(x1,y1,x2,y2) 是一条以时间为参数的曲线:给定 x (时间),并不能闭式求出
曲线参数,需要先用 Newton-Raphson 迭代反解、必要时二分回退,再代入求 y (值)。这正是浏览器
内部对 cubic-bezier() 所做的事。steps(n) 则把进度切成 n 级台阶,值不连续地跳变。
@vega/anim — 选一条缓动驱动动画
相关:把这套塑形换成物理系统就是弹簧;曲线作用的「值」从何而来见 插值;曲线如何被一个可暂停 / 反向的游标驱动见 播放控制。