Jquery 倒计时平滑动画

Question

有没有办法用这个脚本来制作流畅的动画？

我的意思是每个间隔都会删除一部分计时器，但我只是觉得它很突然。有没有办法让它更像是在画自己而不是在跳跃？

这是代码

var countdown = $("#countdown").countdown360({
radius: 60,
seconds: 20,
label: ['sec', 'secs'],
fontColor: '#FFFFFF',
autostart: false,
onComplete: function () {
  console.log('done');
}
});

countdown.start();

$('#countdown').click(function() {
  countdown.extendTimer(2);
});

我知道我可以添加类似的内容，但是在哪个元素上......？

        -webkit-backface-visibility: hidden;
        transition: -webkit-transform @transition-length;
        transition: -ms-transform @transition-length;
        transition: transform @transition-length;

http://jsfiddle.net/johnschult/gs3WY/

Answer 1

您需要覆盖导致四舍五入到秒的函数的内部结构。因此，在调用 countdown.start() 之前添加此代码:

// Replace draw function so it rounds to 1/10 of a second
countdown._draw = function () {
    var secondsElapsed = Math.round((new Date().getTime() - this.startedAt.getTime())/1000),
        tenthsElapsed = Math.round((new Date().getTime() - this.startedAt.getTime())/100)/10,
        endAngle = (Math.PI*3.5) - (((Math.PI*2)/this.settings.seconds) * tenthsElapsed);
    this._clearRect();
    this._drawCountdownShape(Math.PI*3.5, false);
    if (secondsElapsed < this.settings.seconds) {
        this._drawCountdownShape(endAngle, true);
        this._drawCountdownLabel(secondsElapsed);
    } else {
        this._drawCountdownLabel(this.settings.seconds);
        this.stop();
        this.settings.onComplete();
    }
 }

// Proxy start function so it uses a smaller time interval
var oldStart = countdown.start;
countdown.start = function() {
    oldStart.call(this);
    clearInterval(this.interval);
    this.interval = setInterval(jQuery.proxy(this._draw, this), 100);
};

JSFiddle here .更流畅的动画。您还可以为您希望的间隔添加一个参数，而不是像我那样使用相同的两个函数对 1/10 秒进行硬编码。