新しいアニメーション機能requestAnimationFrameの

クラシックアニメーション

彼は古典的なアニメーション機能に最初にすべての、と言ってあまり話をしませんでした。

function animate(element, name, from, to, time) {
    time = time || 800; //默认0.8秒

    var style = element.style,
        latency = 60, // 每60ms一次变化
        count = time / latency, //变化的次数
        step = Math.round((to - from) / count), //每一步的变化量
        now = from;

    function go() {
        count--;
        now = count ? now + step : to;
        style[name] = now + 'px';

        if (count) {
            setTimeout(go, latency);
        }
    }

    style[name] = from + 'px';
    setTimeout(go, latency);
}

かかわらず、この関数の設計の制限のため、唯一のスタイルを変更するために、ユニットとしてPXできるよう。専用ビューのファンクションポイントの実装から、これは非常に古典的なアニメーションのアイデアすることができ、基本的なロジックは、以下のコンポーネントで構成されています。

起点値取得from及び終了値をtoアニメーションするために必要な時間によってtime、及び調査の各インターバルのためlatencyに必要な、計算された値の変化の数countおよび各変化の量step。
開き、setTimeout(fn, latency);次の調査にステッピングします。
次回の調査では、アニメーションが終わっていない場合は、次の調査を継続し、ステップ2に戻って、ステップたら、プロパティを設定します。

この機能は、非常にうまく機能し、サイトやシステムの数十万人を務め、コアjQueryのアニメーション機能が実際にしたsetInterval機能以外の何ものでもありません。

アニメーションの流暢さにもいくつかの問題になります上記の機能につながるより多くの注意、してきたがしかし、現在のシステムの複雑さが着実に増加して、より多くの、アニメーション。例えば100アニメーションを開いている間は、上記機能によれば、タイマは、これらのタイマーの間の演奏スケジュールに若干の影響を実行している間100が存在するであろうことは明らかです。通常の環境では、これらの約束の影響は何の関係もありませんが、この映画の中で流暢環境のための非常に高い要求を持っていますが、わずかな衝撃が悪いユーザ体験を生成することができます。

この場合、一部の開発者は、あるフレームの一元管理に基づいてアニメーションフレームワークを発明し、彼はアニメーションフレームをトリガーするタイマーを使用して、これらのフレームを登録するためのさまざまなアニメーションは、各フレームに複数のアニメーションを扱いますプロパティの変更。これは、タイマースケジューリングオーバーヘッドを減少させるという利点を有するが、フレーム、フレーム統合管理をアニメーション、開発者、APIの監視フレームを提供するため、開発、維持するために必要とされています。

ダイレクトブラウザのサポート

最終的には、ブラウザのメーカーは、それが実際にそれらによって行うことができ、およびブラウザベースのレベルは、次のようなより多くの最適化を、持つことができることを見出しました。

DOMのすべての操作の調査、および一度だけのレイアウト塗料用。
アニメーション要素が発生隠されている場合は、ペイントを行っていません。

だから、私たちが呼ばれ、ブラウザのAPIを立ち上げrequestAnimationFrame、この機能のために、MDC関連ページが簡単な言葉で、より詳細な説明があり、この機能は使用の2種類があります。

コールrequestAnimationFrameコールバックパラメータ、アニメーションは、コールバックを呼び出し、その後、次のフレームを渡し、関数。
パラメータは、直接、関数を呼び出して、次のフレームがトリガーされたときにアニメーションフレームを開始し、また、トリガーされます合格しないwindow.onmozbeforepaintイベントを登録することで、イベントをアニメーション化することができます。

第二の方法は、Firefox上で独自のイベントを依存しているように、及びbeforepaintイベントが基準に入らなかった、それが推奨されていないか、最初の方法の使用が優れています。この時点で、我々はそうアニメーションのロジックになることができます。

現在の時刻を記録しstartTime、アニメーションの始まりとしての時間を。
次のフレームを要求し、コールバック関数を取ります。
次のフレームがトリガされると、コールバック関数は、現在の時間の最初のパラメータであり、次いで、startTime所定の時間間隔とを比較しますellapseTime。
裁判官は、ellapseTime予め設定されたアニメーション時間を超えたtime超えた場合には、映画が終了し、。
変更のアニメーションプロパティの間の差を計算differ = to - fromし、その後に決定ellapseTime変更する必要がありますどのくらいの時間step = differ / time * ellapseTime。
位置の計算では変更のように見えるMath.round(from + step)、とスタイルに再割り当て。
次のフレームを要求し続けます。