suchen

Heim  >  Artikel  >  Web-Frontend  >  Tipps zur Verwendung des H5-Timers requestAnimationFrame

Tipps zur Verwendung des H5-Timers requestAnimationFrame

php中世界最好的语言
php中世界最好的语言Original
2018-03-27 11:37:523363Durchsuche

Dieses Mal gebe ich Ihnen Tipps zur Verwendung des TimersrequestAnimationFrame von H5 und zu den Vorsichtsmaßnahmen bei der Verwendung des H5-Timer-RequestAnimationFrame. Hier ist ein praktischer Fall, werfen wir einen Blick darauf.

Bevor requestAnimationFrame erschien, verwendeten wir im Allgemeinen setTimeout und setInterval. Warum hat HTML5 also einen neuen requestAnimationFrame hinzugefügt?

Vorteile und Funktionen:

1) requestAnimationFrame konzentriert alle DOM-Operationen in jedem Frame. Es wird in abgeschlossen ein Neuzeichnen oder Umfließen, und das Zeitintervall des Neuzeichnens oder Umfließens folgt eng der Aktualisierungsfrequenz des Browsers

2) In versteckten oder unsichtbaren Elementen wird requestAnimationFrame nicht neu gezeichnet oder umfließen, was natürlich weniger CPU bedeutet, GPU- und Speichernutzung

3) requestAnimationFrame ist eine vom Browser speziell für Animationen bereitgestellte API. Der Browser optimiert den Methodenaufruf automatisch zur Laufzeit. Wenn die Seite nicht aktiv ist, wird die Animation automatisch angehalten CPU-Overhead sparen

In einem Satz: Dieses Ding hat eine hohe Leistung, friert den Bildschirm nicht ein und passt die Bildrate automatisch an verschiedene Browser an. Wenn Sie es nicht verstehen oder nicht verstehen, spielt es keine Rolle. Diese Sache hängt mit dem Browser-Rendering-Prinzip zusammen. Lassen Sie uns zuerst lernen, es zu verwenden!

Wie verwende ich requestAnimationFrame?

wird ähnlich wie der Timer setTimeout verwendet. Der Unterschied besteht darin, dass der Zeitintervallparameter nicht festgelegt werden muss. 

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

Der Parameter ist eine Callback-Funktion , und der Rückgabewert ist eine Ganzzahl, die verwendet wird, um die Nummer des Timers darzustellen. 

<!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 wird zum Schließen des Timers verwendet.

Diese Methode muss die Kompatibilität verarbeiten:

Einfache Kompatibilität: 

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

Wenn der Browser AnimationFrame nicht erkennt, verwenden Sie setTimeout aus Kompatibilitätsgründen.

Verwenden Sie 3 verschiedene Timer (setTimeout, setInterval, requestAnimationFrame), um das Laden eines zu implementieren Fortschrittsbalken

1. setInterval-Methode: 

<!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-Methode 

<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-Methode 

 <!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>
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben, achten Sie bitte auf andere Verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Ausführliche Erklärung von Drag & Drop in H5

Verwenden von Canvas, um den Sperreffekt in Videos zu erzielen

Das obige ist der detaillierte Inhalt vonTipps zur Verwendung des H5-Timers requestAnimationFrame. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：H5 implementiert benutzerdefinierte Pfadanimationen in CanvasNächster Artikel：H5 implementiert benutzerdefinierte Pfadanimationen in Canvas

In Verbindung stehende Artikel

Mehr sehen