[練習]request Animation Frameの使用

従来のJSコントロールのアニメーションの多くは、setIntervalまたはsetTimeoutを使用して、一定の時間ごとに要素の位置を更新してアニメーションの効果を達成していたが、このような方法では動画のフレームレートを正確に制御することはできず、主流のブラウザはこれら2つの関数で実現されるアニメーションに対して一定の最適化があったにもかかわらず、それらの性能の問題を補うことはできなかった.主な原因は、JavaScriptの単一スレッド機構が、ブロックがある場合にはミリ秒まで正確にトリガできない可能性があるからです.requestAnimationFrame()方法は、高性能動画の需要を満たすために提供されるAPIであり、setIntervalによって制御されるアニメーションの呼び出し間隔はプログラマによって設定され、requestAnimationFrame()は呼び出し間隔を設定する必要がなく、ブラウザの描画されたフレームレートに自動的に続く(一般ブラウザの表示フレームレートは60 fpsであり、フレーム間隔16.7 msあたり).
過去のsetIntervalがコントロールしていた動画とrequestAnimationFrame()の効果の対比については、ここで「エレン」というスレッドの中の栗を引用する.住所は動画request Animation Frame
set IntervalアニメーションDEMOrequest Animation FrameアニメーションDEMO
以上の二つのデモをクリックして、前者が点卡顿であることを明らかに感じられます.後者はもっと流暢です.
また、requestAnimationFrame()は、非表示または非可視要素において、再描画またはリフローを行わず、オーバーヘッドを大幅に低減する.この方法の他の詳細についてはMDN文書を参照してください.window.request Animation Frame
以上はすべてむだ话で、多く书いてようやく体得することができます.ここではこの方法で動画を揺らしてみました.
アニメ練習DEMO
JSコード:

//          
var box = document.getElementById('box')
shake(box, 500, 15)

//      ：    ，    ，    
function shake(elm, dur, distance) {
  if (elm) {    
     var dur = dur || 500
     var distance = distance || 10   
//     
    var original_css = elm.style.cssText
    elm.addEventListener('click', ani, false)
  } else {
    return 'no param'
  }

  function ani() {
    var start = null
   requestAnimationFrame(act)
//requestAnimationFrame     callback        ，            
    function act(time_stamp) {
      if(start === null) start = time_stamp
      var elapsed = time_stamp - start
      if ((elapsed / dur) < 1) {
      //  4PI，      ，           
        elm.style.transform = 'translateX(' + distance * Math.sin((elapsed / dur) * 4 * Math.PI) + 'px' + ')'
        //          ID       
        var time_id = requestAnimationFrame(act)
      } else {
      //     ，    
        elm.style.cssText = original_css
        cancelAnimationFrame(time_id)
      }
    }
  }
}

実際の開発では、もちろんcssアニメーションを使用して、cssアニメーションの性能が優れています.しかし、いくつかの複雑なアニメーションについては、一時停止、継続などの複雑なインタラクションが必要です.まだrequestAnimationFrameが必要です.張鑫旭大神のこの文章の中でCSS 3アニメはそんなに強くて、request Animation Frameは毛糸用がありますか?この方法を詳しく説明しました.また彼のデモにも直感的な栗があります.
この方法の他の参考資料markの下で:より性能の良いjsアニメーションの実現方式——request Animation Frame HTML 5の秘密を探る:request Animation Frameでウェブアニメーションを最適化する.