插值:中间值怎么求
插值是动画最底层的要素:给定起点 from、终点 to 和进度 p∈[0,1],求中间值。不同类型的值有不同
的「怎样算中间」——数字按比例线性取;带单位的字符串先拆出数字再插值后回贴单位;颜色最微妙:
直接对 sRGB 通道取平均,中点会发灰发暗,要先回到线性光空间混合再编码回来。拖动进度条,看三种值
在同一个 p 下各自的中间结果。
→
数字 0 → 100:线性插值
100
mix(0, 100, p) = 50
带单位:10px → 200px
105px
颜色:线性光 (引擎默认) vs 朴素 sRGB 平均
线性光
朴素 sRGB
当前 p 处 · 线性光
当前 p 处 · sRGB
√(from² + (to²−from²)·p)) 近似回到线性光,中点更亮、更符合直觉。
@vega/anim — 按值的形态自动选择插值方式
插值算出的「值」要随时间推进,就由缓动或弹簧来塑形;
一串途经值的插值见关键帧。引擎里的 interpolate(input, output)
还能把任意标量区间 (如滚动位置) 重映射到任意值,是滚动驱动的基础。