Jquery倒數平滑動畫

有沒有用這個腳本來製作一個流暢的動畫的方法？Jquery倒數平滑動畫

由此我的意思是每個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/

來源

2015-04-05 Kiwimoisi

這是一個'canvas'，你必須深入'countdown360'的'JS'代碼才能達到你想要的。 – D4V1D 2015-04-05 06:56:26

我不認爲你可以不重寫代碼。該代碼計算時間並調整圓以匹配時間。你想要知道哪裏是下一站，並逐漸到達那裏。 – RST 2015-04-05 06:57:47

你需要重寫的，導致全舍入到第二功能的內部。因此，在調用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秒。

來源

2015-04-08 21:27:20

@Kiwimoisi，你有沒有測試我的解決方案？ – 2015-10-03 22:13:06

Jquery倒數平滑動畫

回答

相關問題