jQuery 缓动函数——变量的理解 [英] jQuery easing function — variables' comprehension

问题描述

jQuery 的缓动功能是如何工作的?举个例子:

How does the easing function for jQuery work? Take for example:

easeInQuad = function (x, t, b, c, d) {
    return c*(t/=d)*t + b;
};

这是如何工作的?每个参数代表什么?我将如何为动画实现一些愚蠢的缓动?

How does that work? What does each parameter hold? How would I implement some dumb easing for an animation?

另外，我如何将缓动模式附加到 jQuery，将其加载到 $.easing 中是否足够好?

Also how would I attach an easing pattern to jQuery, is loading it into $.easing good enough?

推荐答案

根据jQuery 1.6.2源码，缓动函数的含义如下.该函数在动画期间的不同时间点被调用.在它被调用的瞬间，

According to the jQuery 1.6.2 source, the meaning of the easing function is as follows. The function is called at various points in time during the animation. At the instants it is called,

• x 和 t 都表示相对于动画开始的时间.x 表示为 [0,1] 范围内的浮点数，其中 0 是开始，1 是结束.t 以动画开始后的毫秒数表示.
• d 是动画的持续时间，在 animate 调用中指定，以毫秒为单位.
• b=0 和 c=1.

• x and t both say what the time is now, relative to the start of the animation. x is expressed as a floating point number in the range [0,1], where 0 is the start and 1 is the end. t is expressed in milliseconds since the start of the animation.
• d is the duration of the animation, as specified in the animate call, in milliseconds.
• b=0 and c=1.

据我所知，jQuery 并没有让你直接控制动画 step 函数的调用时间，它只让你说如果我在时间 t 被调用，那么我应该到目前为止通过整个动画."因此，例如，您不能要求您的对象在移动速度更快的时候更频繁地重绘.另外，我不知道为什么其他人说 b 是起始值而 c 是变化——jQuery 源代码不是这么说的.

As far as I can see, jQuery doesn't give you direct control over when the animation step function is called, it only lets you say "if I am called at time t, then I should be thus far through the entire animation." Therefore you cannot, for example, ask for your object to be redrawn more frequently at times when it is moving faster. Also, I don't know why other people say b is the start value and c is the change -- that's not what jQuery source code says.

如果你想定义你自己的缓动函数来做与easeInQuad一样的事情，例如，

If you wanted to define your own easing function to do the same as easeInQuad, for example,

$.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>

这篇关于jQuery 缓动函数——变量的理解的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！