RequestAnimationFrameの出現の前に、一般的にSetimeOutとSetIntervalを使用しているのに、HTML5は新しいRequestAnimationFrameを追加するのですか?
利点と特性:1)RequestAnimationFrameは、各フレームのすべてのDOM操作を集中し、1回の書き換えまたは返品で完了し、再塗装またはリターンの時間間隔は、ブラウザの更新頻度を厳守しています。
2)非表示または目に見えない要素では、RequestAnimationFrameは再ドローまたはリターンを行いません。つまり、CPU、GPU、およびメモリ使用量が少ないことを意味します。
3)RequestAnimationFrameは、アニメーション専用にブラウザによって提供されるAPIです。ブラウザはメソッド呼び出しを自動的に最適化し、ページがアクティブ化されていない場合、アニメーションはCPUの費用を自動的に一時停止し、効果的に節約します。
一言で言えば、このようなものは高く、立ち往生していません。フレームレートは、さまざまなブラウザーに従って自動的に調整されます。あなたが理解していないか理解していないなら、それは問題ではありません。最初にそれを使用することを学びましょう!
RequestAnimationFrameの使用方法は?
使用方法は、タイマーのsettimeoutに似ています。
var timer = requestanimationframe(function(){console.log( 'タイマーコード');});});パラメーターはコールバック関数であり、戻り値は整数であり、タイマーの数を表すために使用されます。
< UAA -COMPATIBLE CONTERT = IE = EDGE> <Title> Document </title> <script> window.onload(){var ainput = document.queeryselectollll(input)、timer = null; (){Timer = RequestAnimationFrame(function say(){console.log(1); timer = requestanimationframe(fay);};}; ainput [1] .onclick = function(){can clanimationframe(timer);}}} < /script> </head> <body> <入力タイプ=ボタン値= open> <入力タイプ=ボタン値=クローズ> </body> </html>CancelAnimationFrameは、タイマーの電源を切るために使用されます
この方法は互換性がある必要があります。
簡単な互換性:
window.requestanimframe =(function(){return window.requestanimationframe || window.webkitrequestanimationframe || window.mozrequestanimation || function(callback){window.settimeout(callback、1000 /60);};});ブラウザがAnimationFrameがわからない場合は、SettimeOutの互換性を使用してください。
3つの異なるタイマー(SettimeOut、SetInterval、RequestAnimationFrame)を使用して、進行状況バーの読み込みを実現します
1。SETINTERVALメソッド: < UAA -Compatibleコンテンツ= Edge> <title> div {height:40px; 30px /40px 'Microsoft yahei';} < /style> <script> windol.onload = function(){var obtn = document.queryselector(input)、obox = document.queryselec tor(div)、timer = null、curwidth = 0、getStyle = function(obj、name、value){if(obj.currentstyle){return obj.currenttenle [name];} else {retcomputedStyle(obj、obj、false)[name];}}; OnClick = function(){Timer); 1000){obox.width = obox.offsetwidth + 'px'; <p> <入力タイプ=ボタン値= go> </p> </body> </html>第二に、setimeoutメソッド<script> window.onload = function(){var obtn = document.queryselector(input)、obox = document.queryselector(div)、timer = null、getsty le = function(obj、name、value){if(obj。 currenstyle){currentStyle [name];} ; Timer = setimeout(function go(){curwidth = parseint(getStyle(obox、 'width')); if(curwidth <1000){obox。style.width= obox.offset + 10 + 'px'; obox。 inerhtml = parseint(getStyle(obox、 'width')) /10 + '%'(go、1000 /60);}スクリプト> 3。RequestAnimationFrameメソッド< UAA -Compatibleコンテンツ= Edge> <title> div {height:40px; 30px /40px 'Microsoft yahei';} < /style> <script> windol.onload = function(){var obtn = document.queryselector(input)、obox = document.queryselec tor(div)、timer = null、curwidth = 0、getStyle = function(obj、name、value){if(obj.currentstyle){return obj.currenttenle [name];} else {retcomputedStyle(obj、obj、false)[name];}}; OnClick = cancelAnimationFrame(タイマー)= '0') .OffsetWidth + 10 + 'px';} else {cancelAnimationFrame(Timer);}}}} </script> </head> <body> 0%</div> <p > <入力タイプ=ボタン値= go> </p> </body> </html>