一种简单的缓冲动画函数实现

最新推荐文章于 2022-09-18 16:59:02 发布

原创最新推荐文章于 2022-09-18 16:59:02 发布 · 392 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#函数 #动画

js 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种用于角度插值的勒普函数实现，该函数能够智能地选择最短路径进行角度变换，避免了跨越180°时的大跨度变换。文中还提供了具体的实现代码，并讨论了在不同场景下如何正确应用该函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

0x01 从大到小

335（src） —> 23（dest）

src = dest + Math.abs(src -dest) * ratio

0x02 从小到大

35（src） —> 335（dest）

src = dest - Math.abs(src -dest) * ratio

0x03 简写

src = dest + (src - dest) * ratio

0x04 应用在角度上

如果应用在角度变换，就要留意，尤其是当跨度大于180°时，如从335 --> 15，如果用上面的函数，会绕一个大圈，为方便理解，可以用如下办法

function lerpAngle(aim, cur, ratio) {
    var dt = cur - aim;

    if (dt > Math.PI) {
        //从小到大   35 --> 335
//      console.log(translateToAngle(aim), translateToAngle(cur), dt);
        return aim - (Math.PI * 2 - dt) * ratio;
    }
    if (dt < -Math.PI) {

        //从大到小 325 --> 5
//      console.log(translateToAngle(aim), translateToAngle(cur), dt);
        return aim + (Math.PI * 2 - Math.abs(dt)) * ratio;
    }
    return aim + dt * ratio


}

function translateToAngle(param) {
    return 360 * (param / (2 * Math.PI));
}