3

Javascript/HTML5 の window.requestAnimFrame について 2 つの質問がありました

  1. window.requestAnimFrame と window.requestAnimationFrame に違いはありますか?

  2. window.requestAnimFrame/AnimationFrame は document.onload = または img.onload = 関数に似ています

わかりにくいかもしれませんが、もしよろしければ教えていただけないでしょうか？ありがとう

4

2 に答える 2

6

window.requestAnimFrame と window.requestAnimationFrame に違いはありますか?

はい、requestAnimFramewindow オブジェクトに追加されたカスタムの非公式プロパティですが、W3C が「スクリプトベースのアニメーションのタイミング制御」requestAnimationFrameの WindowAnimation セクションで提供する HTML5 キャンバスの公式標準の一部です。

しかし、彼らは同じことをします。ポール・アイリッシュは怠惰な瞬間を得ました (その場合、彼はそれをrAFIMO と呼ぶべきでした:-)) - または - 彼は、メソッドを書いた時点でブラウザーで内部的に保護されているというリスクに遭遇したくありませんでした ( Opera の Erik Möller は、フルネームを使用するこのポリフィルの独自のバージョンを作成しました)。

polyfill 、shim、shiv 、 monkey -patch、duck-punching、shaking the bag (! 誰がこれらの名前を思いついたの??) は、とにかく、この場合、さまざまなブラウザーの機能を統一しようとします。

たとえば、 requestAnimationFrame が実験的な状態で実装されていたとき、メソッドはさまざまなブラウザーでプレフィックスとして付けられました。mozRequestAnimationFrameFirefox/AurorawebkitRequestAnimationFrame用、Chrome や Safari などの WebKit ブラウザーoRequestAnimationFrame用、Opera 用など。

したがって、メソッドを呼び出す必要があるたびにこれをテストする代わりに、ポリフィルの並べ替えでこれらをマージするか、利用可能なものを選択して、単一の共通の名前付き呼び出しにし、将来のプレフィックスなしの実装も同様に機能するようにします。

公式の名前付きメソッドがブラウザで利用可能になったときに機能するため、将来の変更を心配することなく、ポリフィルが使用する名前を使用できることを意味します。

(この点に関して朗報です: Chrome と Firefox は現在、このメソッドをプレフィックスなしで出荷しています。他のブラウザーもおそらくそれに続くでしょう)。

window.requestAnimFrame/AnimationFrame は document.onload = または img.onload = 関数に似ていますか?

あまり。これは簡単な方法です。

document.onload = function;
img.onload = function;

一方、ポリフィルは次のことと同等です。

var myVar = var1 || var2 || var3;

( ||= JavaScript では OR ) wheremyVarは、1 つだけが設定されている場合、最初に定義された値になります (これらの変数が何であるかに応じて、これ以上のものがあるため、これは非常に単純化された言い方であることに注意してください)。

したがって、window.requestAnimFrame(またはwindow.requestAnimationFrame) は、最初に使用可能な定義済みメソッドを設定するように単純に「要求」します。ここでは、プレフィックスなしが優先されます。

window.requestAnimationFrame = window.requestAnimationFrame;

存在するように設定しますが、存在しない場合は、代替値を指定する必要があります。

window.requestAnimationFrame = window.requestAnimationFrame ||
                               Window.mozRequestAnimationFrame ...

したがって、window.requestAnimationFrame存在しない場合は、moz プレフィックスなどで試行します。この OR の結果はwindow.mozRequestAnimationFrame、利用可能な場合に設定さwindow.requestAnimationFrameれ、その他のプレフィックス付きオプションについても同様です。

存在しない場合は最後の手段として、setTimeout代わりにフォールバックが設定されます。この場合、署名に互換性があるため、これは機能します（引数として呼び出す関数を取ります）。

その結果、呼び出すことができwindow.requestAnimationFrame(または Pauls polyfill の場合window.requestAnimFrame)、プレフィックス付きのメソッドをサポートしているかどうかに関係なく、どのブラウザーでも機能します。

(私はいつも requestAnimationFrame を入力するのにうんざりしていたので、間違いなく Paul を疑います.. :-| )

于 2013-09-27T18:47:00.753 に答える
6
  1. window.requestAnimFrame を完全に忘れる必要があります。window.requestAnimationFrame については気にしないでください。
    すべてのブラウザーがそれをネイティブに実装しているわけではなく、実験的な機能として実装しています。その場合、メソッド名の前にプレフィックスを付けます。FF の場合は mozRequestAnimationFrame、Chrome/Safari の場合は webkitRequestAnimationFrame などです。
    ポリフィルは、ブラウザーが実験的と見なすかどうかを気にせずに、rAF に簡単にアクセスできるようにこれらの命名を正規化する方法です。
    これは時間の無駄に思えるかもしれませんが、現時点では、すべての rAF バージョンが同じように動作するわけではありません。たとえば、Firefox がミリ秒のタイムスタンプを使用する場合、Chrome の rAF はサブミリ秒 (マイクロ秒の精度) のタイムスタンプで関数をコールバックします。

キャンバス ライブラリで使用するポリフィルは次のとおりです。

// requestAnimationFrame polyfill
(function() {
var  w=window,    foundRequestAnimationFrame  =    w.requestAnimationFrame ||
                               w.webkitRequestAnimationFrame || w.msRequestAnimationFrame ||
                               w.mozRequestAnimationFrame    || w.oRequestAnimationFrame  ||
                                        function(cb) { setTimeout(cb,1000/60); } ;
window.requestAnimationFrame  = foundRequestAnimationFrame ;
}());

2) onload と rAF は大きく異なります。コメントで述べたように、rAF は画面の次の垂直同期 (VSYNC) を待って (描画) コードを実行します。したがって、基本的に、rAF は画面の準備に関するものであり、onload はドキュメントの準備に関するものです。

于 2013-09-27T20:19:28.143 に答える