H5 タイマー requestAnimationFrame の使用上のヒント-H5 チュートリアル-php.cn

H5 タイマー requestAnimationFrame の使用上のヒント

php中世界最好的语言

リリース： 2018-03-27 11:37:52

オリジナル

3400 人が閲覧しました

今回は、H5 の timerrequestAnimationFrame の使い方についてのヒントをお届けします。H5 タイマー requestAnimationFrame を使用する際の注意事項は何ですか?実際の事例を見てみましょう。

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( '定时器代码' );
        } );

ログイン後にコピー

を設定する必要がない点が異なります。パラメータは

コールバック関数

で、戻り値はタイマー番号を表すために使用される整数です。

<!DOCTYPE html>
<html lang="en">
<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 lang="en">
<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 '微软雅黑';
            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 = '0';
                timer = setInterval( function(){
                    curWidth = parseInt( getStyle( oBox, 'width' ) );
                    if ( curWidth < 1000 ) {
                        oBox.style.width = oBox.offsetWidth + 10 + 'px';
                        oBox.innerHTML = parseInt( getStyle( oBox, 'width' ) ) / 10 + '%';
                    }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 = '0';
                timer = setTimeout( function go(){
                    curWidth = parseInt( getStyle( oBox, 'width' ) );
                    if ( curWidth < 1000 ) {
                        oBox.style.width = oBox.offsetWidth + 10 + 'px';
                        oBox.innerHTML = parseInt( getStyle( oBox, 'width' ) ) / 10 + '%';
                        timer = setTimeout( go, 1000 / 60 );
                    }else {
                        clearInterval( timer );
                    }
                }, 1000 / 60 );
            }
        }
    </script>

ログイン後にコピー

3. requestAnimationFrame メソッド

 <!DOCTYPE html>
<html lang="en">
<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 '微软雅黑';
            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(){
                cancelAnimationFrame( timer );
                oBox.style.width = '0';
                timer = requestAnimationFrame( function go(){
                    curWidth = parseInt( getStyle( oBox, 'width' ) );
                    if ( curWidth < 1000 ) {
                        oBox.style.width = oBox.offsetWidth + 10 + 'px';
                        oBox.innerHTML = parseInt( getStyle( oBox, 'width' ) ) / 10 + '%';
                        timer = requestAnimationFrame( go );
                    }else {
                        cancelAnimationFrame( timer );
                    }
                } );
            }
        }
    </script>
</head>
<body>
    <p>0%</p>
    <p><input type="button" value="ready!Go"></p>
</body>
</html>

ログイン後にコピー

読んでいただいたと思いますこのケースはすでにメソッドをマスターしています。さらにエキサイティングな情報については、php 中国語 Web サイトの他の関連記事にご注意ください。

推奨読書:

H5 でのドラッグアンドドロップの詳細な説明

キャンバスを使用してビデオで弾幕効果を実現する

以上がH5 タイマー requestAnimationFrame の使用上のヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。