モバイルエンドアニメーション--requestAnimationFrame

window.requestAnimationFrame() ブラウザに指示します - あなたは映画をやりたい、とブラウザが指定したコールバック関数は次の再描画の前にアニメーションを更新呼び出す必要です。コールバック関数は、ブラウザに一度再描画される前に、実行メソッドは、引数としてコールバック関数を渡す必要があります

注：次の再描画ブラウザの前に次のフレームアニメーションを更新し続けたい場合は、コールバック関数自体が再び呼び出さなければなりませんwindow.requestAnimationFrame()

あなたがアニメーションを更新する準備ができたら、あなたは、このメソッドを呼び出す必要があります。これは、ブラウザが次の次を再描画する前に、アニメーション機能の方法（すなわち、コールバック関数）に渡す、あなたを呼び出すようになります。死刑執行のコールバック数は、通常1秒間に60回ですが、ほとんどのブラウザは、W3C勧告に従うには、処刑のコールバック番号は、一般的にブラウザ画面に一致するように周波数を更新します。ときのパフォーマンスとバッテリ寿命を向上させるためには、ほとんどのブラウザではので、requestAnimationFrame() バックグラウンドのタブまたは非表示で実行している<iframe> 時間で、requestAnimationFrame() パフォーマンスとバッテリ寿命を改善するための呼び出しを中止すること。

コールバック関数が渡されるDOMHighResTimeStampパラメータはDOMHighResTimeStamp、現在であることを示して requestAnimationFrame() トリガーされるコールバック関数をソートする時間が。同じフレームにおいて、コールバック関数の複数、それらの各々は、いくつかの時間のために消費されたコールバック関数の計算にも負荷の動作中に、同じタイムスタンプを受信します。タイムスタンプはミリ秒単位の10進数、1ミリ秒（1000μs）の最小精度です。

语法：window.requestAnimationFrame（コールバック）。

参数：callbackアップデート機能（すなわち、上記のコールバック機能）次の再描画の前に呼び出されたアニメーションフレーム。コールバック関数が渡されたDOMHighResTimeStampという主張をperformance.now()示し、同じ戻り値、requestAnimationFrame() コールバック関数を実行するための時間の始まりを。

戻り値： long 整数、要求ID、コールバックリスト固有の識別子。非ゼロ値は、他の意味です。あなたは、この値を渡すことができます window.cancelAnimationFrame() コールバック関数をキャンセルします。

例1：

VaRの開始= nullを。
VaRの要素=のdocument.getElementById（ 'SomeElementYouWantToAnimate' ）。
element.style.position =「絶対」。

機能ステップ（タイムスタンプ）{
   もし =開始（スタート！）のタイムスタンプと、
  VAR進捗=タイムスタンプ- スタート。
  element.style.left = Math.min（進行/ 10、200）+ 'PX' 。
  もし（進捗<2000 ）{ 
    window.requestAnimationFrame（ステップ）。
  } 
} 

window.requestAnimationFrame（ステップ）。

例2：

<！DOCTYPE HTML > 
< HTML のlang = "ZH-CN" > 
< ヘッド> 
    < メタのcharset = "UTF-8" > 
    < メタ名= "ビューポート" コンテンツ= "幅=デバイス幅、初期スケール= 1、maximum-スケール= 1、最小スケール= 1、ユーザスケーラブル= NO」> 
    < タイトル> 2.2移动端动画</ タイトル> 
    < スタイル> 
        * { 
            パディング：0 。
            マージン：0 ; 
        }
        ■は{ 
            幅：100pxに。
            高さ：100pxに。
            背景色：赤。
            / * 位置：絶対; 
            トランジション：左マージン左1S; * / 
            / * トランジション：1秒を変換します。* / 
        } 
    </ スタイル> 
</ ヘッド> 
< 身体> 
    < ボタンのID = "BTN" >スタート</ ボタン> 
    < div要素のid = "箱" クラス= "ボックス" > </ divの> 

    < スクリプト> 
        // VARのボクセル=のdocument.getElementById（ '箱'）、
        //      btnEl =のdocument.getElementById（ 'BTN'）; 
        // VAR DEST = window.innerWidth - 100。

        // btnEl.addEventListener（ 'クリック'、関数（）{ 
        //      移動（ボクセル、DEST）; 
        // }、偽）。

        // 関数move（EL、位置）{ 
        //      el.style.transform = 'translate3d（' +位置+ 'PX、0、0）'。
        // } 

        VAR requestAnimationFrameの= window.requestAnimationFrame || 
            窓。|| 
            window.mozRequestAnimationFrame || 
            window.msRequestAnimationFrame || 
            window.oRequestAnimationFrame || 
            関数（FN）{ 
                たsetTimeout（FN、16 ）。
            }。
        VaRのボクセル= のdocument.getElementById（' ボックス' ）、
            btnEl = のdocument.getElementById（' BTN ' ）;
        VAR DEST = window.innerWidth -  100 、
            スピード=  10、
            位置=  0 。

        btnEl.addEventListener（' クリック' 、関数（）{ 
            requestAnimationFrameの（ステップ）; 
        }、偽）。

        関数移動（EL、位置）{ 
            el.style.transform =  ' translate3d（'  + 位置+ ' PX、0、0）' 。
        } 

        関数のステップ（）{
             場合（位置< DEST）{ 
                位置+ =速度;
                移動（ボクセル位置）。
                requestAnimationFrameの（ステップ）。
            } 他{ 
                位置= DEST。
                移動（ボクセル位置）。
            } 
        } 

    </ スクリプト> 
</ ボディ> 
</ HTML >

JS最高のアニメーションを実現requestAnimationFrameのです。

setTimeoutよりrequestAnimationFrameの、2つの主な利点があるのsetInterval：
1、各フレーム内のすべてのDOM操作が完了するか、再描画に戻り、再描画または直後の時間間隔を返すように一緒にrequestAnimationFrameのであろう一般に、ブラウザのリフレッシュレート、毎秒60のフレームの頻度。
図2に示すように、隠されたまたは不可視要素、requestAnimationFrameのはもちろん、CPU、GPUとメモリ使用量の少ないを意味し、再描画または逆流することはないであろう。

例3：

VAR DIS = 0 ;
関数アニメーション（）{ 
  requestAnimationFrameの（関数（）{ 
      div.style.left = ++ DIS;
       もし（DISX <50 ）アニメーション（）; 
  }）   
} 
アニメーション（）。

モバイルエンドアニメーション--requestAnimationFrame

おすすめ