25

jQuery 的缓动函数是如何工作的？举个例子：

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

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

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

4

5 回答 5

38

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

  • x 和 t 都表示现在的时间，相对于动画的开始。x 表示为 [0,1] 范围内的浮点数，其中 0 是开始，1 是结束。t 以自动画开始以来的毫秒数表示。
  • d 是动画的持续时间，在 animate 调用中指定，以毫秒为单位。
  • b=0 和 c=1。
缓动函数应返回 [0,1] 范围内的浮点数，称为 `r`。然后 jQuery 计算 `x=start+r*(end-start)`，其中 `start` 和 `end` 是调用 animate 时指定的属性的开始和结束值，并将属性值设置为 ` x`。

据我所知，jQuery 并没有让你直接控制何时调用动画 step 函数，它只让你说“如果我在时间 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>

于 2011-07-26T02:48:45.740 回答
21

一个具体的例子，

假设我们的初始值为1000 ，我们希望在3s内达到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 的方程中，也没有出现在结果中：让他总是设置为null

于 2012-08-04T12:30:26.707 回答
5

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 - 足够好！

于 2011-05-06T20:15:09.060 回答
0

这个插件实现了最常见的缓动功能： http: //gsgd.co.uk/sandbox/jquery/easing/

于 2011-05-06T20:40:07.897 回答
0

浏览了 1.11 的 jquery 代码。x 参数似乎意味着“百分比”，与初始时间值无关。因此，x 始终为 (0 <= x <= 1)（表示抽象系数），t 为 x * d（表示经过的时间）。

于 2014-09-02T15:21:38.290 回答