jquery缓动swing liner控制动画过程不同时刻的速度

当我们需要使用jQuery来控制动画的速度时，通常需要使用缓动（easing）函数，这些函数可以控制动画在特定时间段内的变化速度，从而提高动画的视觉效果和用户体验。

在jQuery中，常见的缓动函数有swing和linear两种。其中，swing函数在动画开始和结束时速度较慢，而在中间速度较快，类似于钟摆上的运动；而linear函数则保持恒定的速度不变。在进行缓动动画时，可以使用该函数对动画对象属性进行渐变计算。

下面是一个jQuery缓动函数使用的示例：

$("#btnAnimate").click(function() {
  $("div").animate({
    left: "+=50px",
    top: "+=50px"
  }, 1000, "swing");
});

在这个示例中，当按钮#btnAnimate被点击时，div元素将会移动左上角±50像素，动画时间为1000毫秒，缓动函数为swing。

除了swing和linear，还有很多其他的jQuery缓动函数，比如easeIn，easeOut等，可以根据需要进行选择和使用。

另外，如果需要自定义缓动函数，也可以使用easing插件。这个插件可用于创建自定义缓动函数，以便让你使用自己的算法来控制动画过程中的速度。

下面是一个使用自定义缓动函数的jQuery动画示例：

$.extend($.easing, {
  customEasing: function (x,t,b,c,d) {
    var s=1.70158;var p=0;var a=c;
    if (t==0){return b;}
    if ((t/=d/2)==2){return b+c;}
    if (!p){p=d*(.3*1.5);}
    if (a < Math.abs(c)){ a=c;var s=p/4;}
    else{ var s = p/(2*Math.PI) * Math.asin (c/a);}
    if (t < 1){ return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;}
    return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
  }
});

$("#btnAnimate2").click(function() {
  $("div").animate({
    left: "+=100",
    top: "+=100"
  }, 1000, "customEasing");
});

在这个示例中，我们使用了easing插件来自定义了一个缓动函数customEasing。在#btnAnimate2按钮被点击时，div元素将会移动左上角±100像素，动画时间为1000毫秒，并使用自定义的缓动函数customEasing。