我正在画布上画一个非传统的时钟。时间由秒环、秒针、分钟环和小时环表示。我正在使用 webkit/mozRequestAnimationFrame 在适当的时间进行绘制。我想修改第二个环以快速动画到下一秒(125ms - 250ms)并使用二次缓动(而不是那个可怕的快照)。
就像 Raphael JS Clock 动画它的第二个环一样,除了它使用不同的缓动:http ://raphaeljs.com/polar-clock.html
JS Fiddle 链接(必须在 Chrome、Firefox 或 Webkit Nightly 中查看):
小提琴:http: //jsfiddle.net/thecrypticace/qmwJx/
全屏小提琴:http: //jsfiddle.net/thecrypticace/qmwJx/embedded/result/
任何帮助将不胜感激!
这很接近,但仍然很生涩:
var startValue;
if (milliseconds < 500) {
if (!startValue) startValue = milliseconds;
if (milliseconds - startValue <= 125) {
animatedSeconds = seconds - 0.5 + Math.easeIn(milliseconds - startValue, startValue, 1000 - startValue, 125)/1000;
} else {
animatedSeconds = seconds;
}
drawRing(384, 384, 384, 20, animatedSeconds / 60, 3 / 2 * Math.PI, false);
} else {
drawRing(384, 384, 384, 20, seconds / 60, 3 / 2 * Math.PI, false);
startValue = 0;
}