Question

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

我的意思是每个intervale移除一个计时器的大块但我只是突然发现它。有没有办法让它更像是画画而不是跳跃？

这是代码

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秒。

Jquery倒计时平滑动画

1 个答案: