这是一个数学问题:
drawRing(384, 384, 384, 20, seconds / 60, 3 / 2 * Math.PI, false);
这是绘制秒圈的线。所以问题是在任何给定时刻你都会有类似 34/60、35/60 等的情况。这意味着您的秒圈是 60/60,因此不使用毫秒,而是每秒绘制一次。
线性缓动解决方案:使秒循环 60 000 / 60 000 -> 60 秒,每次 1000 毫秒。还有数学:
drawRing(384, 384, 384, 20, ((seconds*1000)+milliseconds) / 60000, 3 / 2 * Math.PI, false);
In Out Quadric 解决方案或选择一个these http://www.gizma.com/easing/ :
Math.easeInOutQuad = function (t, b, c, d) {
t /= d/2;
if (t < 1) return c/2*t*t + b;
t--;
return -c/2 * (t*(t-2) - 1) + b;
};
我优化并更改了你的代码:
//+1 animation happens before the second hand
//-1 animation happens after the second hand
animatedSeconds = seconds+1;
if (milliseconds > 10) {
if (!startValue) { startValue = milliseconds; }
if (milliseconds - startValue <= 100) {
animatedSeconds -= -0.5+ Math.easeInOutQuad(milliseconds - startValue, startValue, 1000 - startValue, 125) / 1000;
}
} else {
startValue = 0;
}
drawRing(384, 384, 384, 20, animatedSeconds / 60, 3 / 2 * Math.PI, false);
希望这就是您正在寻找的。