3

我正在画布上画一个非传统的时钟。时间由秒环、秒针、分钟环和小时环表示。我正在使用 webkit/mozRequestAnimationFrame 在适当的时间进行绘制。我想修改第二个环以快速动画到下一秒(125ms - 250ms)并使用二次缓动(而不是那个可怕的快照)。

就像 Raphael JS Clock 动画它的第二个环一样,除了它使用不同的缓动:http ://raphaeljs.com/polar-clock.html

JS Fiddle 链接(必须在 Chrome、Firefox 或 Webkit Nightly 中查看):

  1. 小提琴:http: //jsfiddle.net/thecrypticace/qmwJx/

  2. 全屏小提琴: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;
}
4

1 回答 1

1

这是一门数学课:

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 解决方案或选择以下之一:

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);

希望这是您正在寻找的。

于 2011-09-19T00:41:32.020 回答