3

従来とは異なるリングクロックをキャンバスに描いています。時間は、セカンドリング、セカンドハンド、ミニッツリング、アワーリングで表されます。私はwebkit/mozRequestAnimationFrameを使用して適切なタイミングで描画しています。2番目のリングを変更して、次の1秒にすばやくアニメーション化（125ms〜250ms）し、2次イージング（恐ろしいスナップの代わりに）を使用します。

Raphael JS Clockが2番目のリングをアニメーション化するのと同じように、異なるイージングを使用する点が異なります：http: //raphaeljs.com/polar-clock.html

JSフィドルリンク（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/60000->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 に答える