Question

我目前倒数/达到目标数字。我目前使用的一小段代码似乎产生了不一致的结果。必须有一种防弹方式来做到这一点，而无需编写代码页。任何建议都将不胜感激。

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。

Answer 1

将行easing:'linear'更改为easing:'swing'，这对我有用。

猜测在这种短暂的intervalls上线性缓动可能存在问题，就像我将动画的持续时间（2000+）线性工作增加到。

补充说明：目标和结果之间的误差量似乎也随着两个数字之差的大小而变化（X越大，误差越大：（ABS（startValue - target）= X）。这使得感觉更远的距离意味着它需要进一步前往目标。

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

使用行程所需的距离来增加到达目标的允许时间，无论目标或数量如何，我每次都可以进行计算。

动画倒计时/最多为特定数字

1 个答案: