HTML5는 새로운 타이머 requestAnimationFrame 실제 진행률 표시줄을 생성합니다.
- 一个新手원래의
- 2018-05-15 17:26:262384검색
requestAnimationFrame이 등장하기 전에는 일반적으로 setTimeout과 setInterval을 사용했는데, html5에서 새로운 requestAnimationFrame을 추가한 이유는 무엇일까요?
장점 및 특징:
1) requestAnimationFrame은 각 프레임의 모든 DOM 작업을 집중하여 한 번의 다시 그리기 또는 리플로우로 완료하며 다시 그리기 또는 리플로우 시간 간격은 브라우저 새로 고침 빈도를 밀접하게 따릅니다.
2) 숨김 또는 보이지 않음 요소, requestAnimationFrame은 다시 그려지거나 리플로우되지 않습니다. 이는 물론 CPU, GPU 및 메모리 사용량이 적음을 의미합니다.
3) requestAnimationFrame은 브라우저가 실행 중일 때 애니메이션에서 제공하는 API가 자동으로 메소드 호출을 최적화합니다. , 페이지가 활성화되지 않으면 애니메이션이 자동으로 일시 중지되어 CPU 오버헤드를 효과적으로 절약합니다. 한 문장으로 말하면 이 기능은 성능이 뛰어나고 화면이 정지되지 않으며 다른 브라우저에 따라 프레임 속도를 자동으로 조정합니다. 이해하지 못하거나 이해하지 못하더라도 상관없습니다. 이는 브라우저 렌더링 원리와 관련이 있습니다. 먼저 사용법을 배워봅시다!
requestAnimationFrame을 사용하는 방법은 무엇입니까?사용법은 타이머 setTimeout과 유사합니다. 차이점은 시간 간격 매개변수를 설정할 필요가 없다는 점입니다
var timer = requestAnimationFrame( function(){
console.log( '定时器代码' );
} );매개변수는 콜백 함수이고 반환 값은 타이머 번호를 나타내는 데 사용되는 정수입니다.
<!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 '微软雅黑';
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>
<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>
rr 리
위 내용은 HTML5는 새로운 타이머 requestAnimationFrame 실제 진행률 표시줄을 생성합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!