easeInQuad = function (x, t, b, c, d) {
return c*(t/=d)*t + b;
};
这是如何工作的?每个参数都代表什么?如果我要实现动画缓和效果,应该怎么做?
另外,如果我想将缓动模式附加到jQuery上,把它加载到$.easing中是否足够?
easeInQuad = function (x, t, b, c, d) {
return c*(t/=d)*t + b;
};
这是如何工作的?每个参数都代表什么?如果我要实现动画缓和效果,应该怎么做?
另外,如果我想将缓动模式附加到jQuery上,把它加载到$.easing中是否足够?
据我所见,jQuery并没有直接控制动画步骤函数被调用的时间,它只让您说“如果在时间t调用我,则我应该完成整个动画的这一部分”。因此,您不能要求在物体移动更快的时候更频繁地重新绘制它。另外,我不知道为什么其他人说b是起始值,c是变化量 - 这不是jQuery源代码所说的。
如果您想定义自己的缓动函数以执行与easeInQuad相同的操作,例如:
$.extend(jQuery.easing,{myfunc:function(x,t,b,c,d) { return x*x; }})
$('#marker').animate({left:'800px'},'slow','myfunc');
$.extend(jQuery.easing,{myfunc:function(x,t,b,c,d) { return x*x; }})
$('#marker').animate({left:'500px'},'slow','myfunc');
#marker { position: absolute; left: 10px; top: 50px; background: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='marker'>Hello World!</div>
一个具体的例子,
假设我们的初始值为 1000 ,我们想在 3 秒 内达到 400 :
var initialValue = 1000,
destinationValue = 400,
amountOfChange = destinationValue - initialValue, // = -600
duration = 3,
elapsed;
从0秒到3秒,让我们开始:
elapsed = 0
$.easing.easeInQuad(null, elapsed, initialValue, amountOfChange, duration)
//> 1000
elapsed = 1
$.easing.easeInQuad(null, elapsed, initialValue, amountOfChange, duration)
//> 933.3333333333334
elapsed = 2
$.easing.easeInQuad(null, elapsed, initialValue, amountOfChange, duration)
//> 733.3333333333334
elapsed = 3
$.easing.easeInQuad(null, elapsed, initialValue, amountOfChange, duration)
//> 400
相比简介:
$.easing.easeInQuad = function (x, t, b, c, d) {...}
x t b c d
| | | | |
null elapsed initialValue amountOfChange duration
NB1: 一个非常重要的事情是,elapsed
(t
)和duration
(d
)应该以相同的单位表达,例如:这里我们使用“秒”,但也可以使用“毫秒”或其他单位。这同样适用于initialValue
(b
)和amountOfChange
(c
),因此总结一下:
x t b c d
| | | | |
null elapsed initialValue amountOfChange duration
^ ^ ^ ^
+----------|----=unit=----|------------+
+----=unit=----+
NB2: 像@DamonJW一样,我不知道为什么这里有x
。它在Penner's equations中没有出现,并且在结果中似乎没有被使用:所以我们总是将其设置为null
t:当前时间,b:起始值,c:从起始值到结束值的变化量,d:持续时间。
它是如何工作的:http://james.padolsey.com/demos/jquery/easing/(表示CSS属性更改时的曲线)。
这是我如何实现一些愚蠢的缓动效果:http://www.timotheegroleau.com/Flash/experiments/easing_function_generator.htm(数学不是我的强项)。
您可以像这样扩展:http://code.google.com/p/vanitytools/source/browse/trunk/website/js/custom_easing.js?spec=svn29&r=29 - 已经足够好了!
这个插件实现了最常见的缓动函数:http://gsgd.co.uk/sandbox/jquery/easing/
查看了1.11版本的jQuery代码。x参数似乎表示“百分比”,与初始时间值无关。 因此,x始终为(0 <= x <= 1)(表示抽象系数),而t为x * d(表示经过的时间)。