jQuery动画增加数字效果慢下来近端

Question

我想在x秒之后改变动画速度，从快到慢直到结束。但是，这个不起作用。

请帮帮我。

$('.holder').each(function() {
  var speed = 15000;

  function change() {
    speed = 2000;
  }
  setTimeout(change, 2000);
  $(this).prop('Counter', 0).animate({
    Counter: $(this).data('number')
  }, {
    duration: speed,
    easing: 'swing',
    step: function(now) {
      $(this).text(Math.ceil(now).toLocaleString('en'));
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3 class="holder" data-number="1000000"></h3>

Answer 1

根据我的评论，您的代码不起作用，因为原始speed值已用于实例化jQuery动画队列，您无法修改它并假设jQuery动画将“监视”更新的设置。 jQuery .animate()方法似乎也没有API允许在动画设置已经运行时进行更改。

最好的解决方案是实际创作自己的缓动功能。由于它在数学上可能很复杂，因此实际上可以使用第三方插件，例如bez。该插件返回一个cubic-bezier函数，允许您设置值的补间/插值方式。

如果您希望您的值在开始时快速变化而在结束时变慢，您可以使用的示例立方贝塞尔曲线为cubic-bezier(.20, 1, .20, 1)：

p / s：您可以使用此网站来使用不同的参数来获得所需的插值：http://cubic-bezier.com

如上所述，如果您使用$ .bez插件创建缓动函数，则只需调用：$.bez([0.2,1,0.2,1])即可。只需在easing方法中将其作为.animate参数提供：

$('.holder').each(function() {
  setTimeout(change, 2000);
  $(this).prop('Counter', 0).animate({
    Counter: $(this).data('number')
  }, {
    duration: 15000,
    easing: $.bez([0.2,1,0.2,1]),
    step: function(now) {
      $(this).text(Math.ceil(now).toLocaleString('en'));
    }
  });
});

见下面的概念验证：

/*!
 * Bez @VERSION
 * http://github.com/rdallasgray/bez
 *
 * A plugin to convert CSS3 cubic-bezier co-ordinates to jQuery-compatible easing functions
 *
 * With thanks to Nikolay Nemshilov for clarification on the cubic-bezier maths
 * See http://st-on-it.blogspot.com/2011/05/calculating-cubic-bezier-function.html
 *
 * Copyright @YEAR Robert Dallas Gray. All rights reserved.
 * Provided under the FreeBSD license: https://github.com/rdallasgray/bez/blob/master/LICENSE.txt
 */
(function(factory) {
  if (typeof exports === "object") {
    factory(require("jquery"));
  } else if (typeof define === "function" && define.amd) {
    define(["jquery"], factory);
  } else {
    factory(jQuery);
  }
}(function($) {
  $.extend({ bez: function(encodedFuncName, coOrdArray) {
    if ($.isArray(encodedFuncName)) {
      coOrdArray = encodedFuncName;
      encodedFuncName = 'bez_' + coOrdArray.join('_').replace(/\./g, 'p');
    }
    if (typeof $.easing[encodedFuncName] !== "function") {
      var polyBez = function(p1, p2) {
        var A = [null, null], B = [null, null], C = [null, null],
            bezCoOrd = function(t, ax) {
              C[ax] = 3 * p1[ax], B[ax] = 3 * (p2[ax] - p1[ax]) - C[ax], A[ax] = 1 - C[ax] - B[ax];
              return t * (C[ax] + t * (B[ax] + t * A[ax]));
            },
            xDeriv = function(t) {
              return C[0] + t * (2 * B[0] + 3 * A[0] * t);
            },
            xForT = function(t) {
              var x = t, i = 0, z;
              while (++i < 14) {
                z = bezCoOrd(x, 0) - t;
                if (Math.abs(z) < 1e-3) break;
                x -= z / xDeriv(x);
              }
              return x;
            };
        return function(t) {
          return bezCoOrd(xForT(t), 1);
        }
      };
      $.easing[encodedFuncName] = function(x, t, b, c, d) {
        return c * polyBez([coOrdArray[0], coOrdArray[1]], [coOrdArray[2], coOrdArray[3]])(t/d) + b;
      }
    }
    return encodedFuncName;
  }});
}));


$('.holder').each(function() {
  $(this).prop('Counter', 0).animate({
    Counter: $(this).data('number')
  }, {
    duration: 15000,
    easing: $.bez([0.2,1,0.2,1]),
    step: function(now) {
      $(this).text(Math.ceil(now).toLocaleString('en'));
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3 class="holder" data-number="1000000"></h3>