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倒数平滑动画

回答

相关问题