HTML5 は新しいタイマー requestAnimationFrame を作成し、実際のプログレスバーを作成します-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

HTML5 は新しいタイマー requestAnimationFrame を作成し、実際のプログレスバーを作成します

一个新手

May 15, 2018 pm 05:26 PM

html5 タイマー

requestAnimationFrame が登場する前は、一般に setTimeout と setInterval を使用していましたが、なぜ html5 で新しい requestAnimationFrame が追加されたのでしょうか?

利点と機能:

1) requestAnimationFrame は各フレーム内のすべての DOM 操作を集中させ、1 回の再描画またはリフローで完了します。再描画またはリフローの時間間隔はブラウザーの更新頻度に厳密に追従します

2) 非表示または非表示要素、requestAnimationFrame は再描画またはリフローされません。これはもちろん、CPU、GPU、メモリの使用量が少なくなります

3) requestAnimationFrame は、ブラウザーによって特別に設計されています。アニメーションによって提供される API は、ブラウザーの実行中にメソッド呼び出しを自動的に最適化します。、ページがアクティブ化されていない場合、アニメーションは自動的に一時停止され、CPU オーバーヘッドを効果的に節約します。一言で言えば、これはパフォーマンスが高く、さまざまなブラウザーに応じてフレームレートを自動的に調整します。理解できなくても、理解していなくても、これはブラウザのレンダリング原理に関係するものです。まずは使い方を学びましょう！

requestAnimationFrameの使用方法?

使い方はタイマーsetTimeoutに似ていますが、時間間隔パラメータを設定する必要がない点が異なります

var timer = requestAnimationFrame( function(){
             console.log( &#39;定时器代码&#39; );
                      } );

ログイン後にコピー

パラメータはコールバック関数であり、戻り値はタイマー番号を表すために使用される整数です。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload = function(){
            var aInput = document.querySelectorAll( "input" ),
                timer = null;
            aInput[0].onclick = function(){
                timer = requestAnimationFrame( function say(){
                    console.log( 1 );
                    timer = requestAnimationFrame( say );
                } );
            };
            aInput[1].onclick = function(){
                cancelAnimationFrame( timer );
            }
        }
    </script>
</head>
<body>
    <input type="button" value="开启">
    <input type="button" value="关闭">
</body>
</html>

ログイン後にコピー

cancelAnimationFrame タイマーをオフにするために使用されます

このメソッドは互換性を処理する必要があります:

単純な互換性:

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

ログイン後にコピー

ブラウザがAnimationFrameを認識しない場合は、互換性のためにsetTimeoutを使用します

3つの異なるタイマー(setTimeout、setInterval)を使用します。、requestAnimationFrame) はプログレスバーの読み込みを実装します

1. setInterval メソッド:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        p{
            width:0px;
            height:40px;
            border-radius:20px;
            background:#09f;
            text-align:center;
            font:bold 30px/40px &#39;微软雅黑&#39;;
            color:white;
        }
    </style>
    <script>
        window.onload = function(){
            var oBtn = document.querySelector( "input" ),
                oBox = document.querySelector( "p" ),
                timer = null, curWidth = 0,
                getStyle = function( obj, name, value ){
                    if( obj.currentStyle ) {
                        return obj.currentStyle[name];
                    }else {
                        return getComputedStyle( obj, false )[name];
                    }
                };
            oBtn.onclick = function(){
                clearInterval( timer );
                oBox.style.width = &#39;0&#39;;
                timer = setInterval( function(){
                    curWidth = parseInt( getStyle( oBox, &#39;width&#39; ) );
                    if ( curWidth < 1000 ) {
                        oBox.style.width = oBox.offsetWidth + 10 + &#39;px&#39;;
                        oBox.innerHTML = parseInt( getStyle( oBox, &#39;width&#39; ) ) / 10 + &#39;%&#39;;
                    }else {
                        clearInterval( timer );
                    }
                }, 1000 / 60 );
            }
        }
    </script>
</head>
<body>
    <p>0%</p>
    <p><input type="button" value="ready!Go"></p>
</body>
</html>

ログイン後にコピー

2. setTimeout メソッド

<script>
        window.onload = function(){
            var oBtn = document.querySelector( "input" ),
                oBox = document.querySelector( "p" ),
                timer = null, curWidth = 0,
                getStyle = function( obj, name, value ){
                    if( obj.currentStyle ) {
                        return obj.currentStyle[name];
                    }else {
                        return getComputedStyle( obj, false )[name];
                    }
                };
            oBtn.onclick = function(){
                clearTimeout( timer );
                oBox.style.width = &#39;0&#39;;
                timer = setTimeout( function go(){
                    curWidth = parseInt( getStyle( oBox, &#39;width&#39; ) );
                    if ( curWidth < 1000 ) {
                        oBox.style.width = oBox.offsetWidth + 10 + &#39;px&#39;;
                        oBox.innerHTML = parseInt( getStyle( oBox, &#39;width&#39; ) ) / 10 + &#39;%&#39;;
                        timer = setTimeout( go, 1000 / 60 );
                    }else {
                        clearInterval( timer );
                    }
                }, 1000 / 60 );
            }
        }
    </script>

ログイン後にコピー

3. requestAnimationFrame メソッド

rrリー

以上がHTML5 は新しいタイマー requestAnimationFrame を作成し、実際のプログレスバーを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。