跳过主要内容

估算缓动何时达到特定值。

缓动函数接受一个归一化的进度值(0-1)并返回对应的缓动值,但如果你想了解该缓动值何时会达到特定比例,例如 0.7,"power2.out"当线性进度只有大约 0.33 时可能会达到 0.7。此函数允许你输入该 0.7 值,并得到对应的线性进度值(在这个例子中是 0.33):

function easeToLinear(ease, ratio, precision = 0.0001) {
ease = gsap.parseEase(ease);
let t = 0,
dif = ratio - ease(t),
inc = dif / 2,
newDif;
while (Math.abs(dif) > precision) {
newDif = ratio - ease((t += inc));
newDif < 0 !== inc < 0 && (inc *= Math.max(-0.5, newDif / dif));
dif = newDif;
}
return t + ((ratio - ease(t + inc)) / dif) * -inc;
}

更实际的用途:假设你正在使用某种缓动来将一个值从 100 动画到 500,"power2.out"并且你想估算出根据该缓动效果在何时会到达 250 的线性进度值(介于 0 到 1 之间),你可以像这样使用此函数:

let from = 100,
to = 500,
targetValue = 250,
progress = easeToLinear(
"power2",
(targetValue - from) / (to - from),
0.00001
);
无噪 Logo
无噪文档
中文文档 · 复刻官网
查看所有 ↗