我正在尝试创建自定义缓动函数,但遇到了一些困难。换句话说,数学让我感到困惑......
我希望我的函数增加页面中某些元素的宽度,并且增量值需要随着元素索引的增加而减小。
考虑这些值:
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-smile 链接 jQuery easeOutQuad function在评论中,该演示基于此。
关于javascript - 使用 Javascript 创建自定义缓动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34797064/