今回は、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>ログイン後にコピー
このメソッドは互換性のために処理する必要があります:
単純な互換性:
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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
