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