javascript - 动画倒数/递增到特定数量

我目前正在递减/递增至目标数。我当前使用的一小段代码似乎产生了不一致的结果。必须有一种无需编写代码页即可实现的防弹方法。任何建议将不胜感激。

演示https://jsfiddle.net/d6anjubd/

var currentNum = $('p').text();
var targetNum = 0;

$({countNum: parseInt(currentNum)}).animate({countNum: parseInt(targetNum)}, {
    duration: 500,
    easing:'linear',
    step: function() {
        $('p').text(Math.floor(this.countNum));
    },
    complete: function() {
        console.log('finished count');
    }
});

您会注意到，如果在jsfiddle中按“运行”，它将不会总是以目标编号结尾，在这种情况下为0。

最佳答案

将行easing:'linear'更改为easing:'swing'对我来说有用。

猜测在如此短的间隔上线性缓动可能存在问题，例如当我增加动画（2000+）线性工作的持续时间时。

补充说明：目标和结果之间的误差量似乎也随两个数字之间的差值大小而变化（X越大，误差越大：（ABS（startValue-target）= X）。更大的距离意味着它需要进一步行进才能到达目标。

当目标与值之间的距离较大时，倒计时需要更多的时间进行倒计时也是合乎逻辑的。即：duration: 15 * currentNum

无论是目标还是目标数量，增加允许到达目标的时间以及行进所需的距离都会使我每次都能进行计算。