使用 Javascript 创建自定义缓动

Create Custom Easing using Javascript

本文关键字：自定义 创建 Javascript 使用      更新时间：2023-09-26

我正在尝试创建自定义缓动函数，但我遇到了一些困难。换句话说，数学让我感到困惑...

我希望我的函数增加页面中某些元素的宽度，并且增量值需要随着元素索引的增加而减小。

请考虑以下值：

50, 150, 230, 280, 310, 330

虽然我很欣赏可能不可能生成这些确切的值，但我本质上想要一个接近这些值的函数。

这是我到目前为止所拥有的：

$('.something').each(function(i){
    var scale = Math.round(30*(i/10)*(2-(i/10)));
    dimension = scale*dimension;
    console.log(dimension);
});

这可能非常容易，但我今天正在努力了解数学，所以任何帮助将不胜感激

这是一个现场演示，展示了如何使用二次缓出函数来实现类似于您所描述的曲线。

var out = document.getElementById("output");
// t: current time, b: beginning value, c: change in value, d: duration
function easeOutQuad(t, b, c, d) {
		return -c *(t/=d)*(t-2) + b;
}
for (var i = 0; i < 1; i+=0.1) {
  out.innerHTML += Math.round(easeOutQuad(i, 50, 280, 1)) + "<br>";
}
<div id="output"></div>

向

@c微笑大喊大叫，以在评论中链接jQuery easeOutQuad函数，这是本演示的基础。

你可以浏览Robert Penner的缓动函数生成器。它对于创建自定义缓动函数可能非常有用：

// generated example
function(t, b, c, d) {
    var ts=(t/=d)*t;
    var tc=ts*t;
    return b+c*(63.2425*tc*ts + -185.23*ts*ts + 198.58*tc + -93.89*ts + 18.2975*t);
};
相关文章：