소개
타이머는 항상 JavaScript 애니메이션의 핵심 기술이었습니다. 애니메이션 루프를 작성하는 열쇠는 지연이 얼마나 오래 적합한 지 아는 것입니다. 한편으로, 루프 간격은 다른 애니메이션 효과가 매끄럽고 매끄럽게 보일 수 있도록 충분히 짧아야합니다. 반면에, 루프 간격은 브라우저가 변경 될 수 있도록 충분히 길어야합니다.
대부분의 컴퓨터 모니터의 새로 고침 빈도는 60Hz이며, 이는 초당 60 회 다시 페인트하는 것과 거의 같습니다. 대부분의 브라우저는 Redraw 작업이 모니터의 Redraw 주파수를 초과하지 않도록 제한합니다. 왜냐하면 해당 주파수를 초과하더라도 사용자 경험이 향상되지 않기 때문입니다. 따라서 가장 부드러운 애니메이션의 최적 루프 간격은 1000ms/60이며 이는 대략 16.6ms입니다.
Settimeout과 SetInterval의 문제는 정확하지 않다는 것입니다. 그들의 고유 한 달리기 메커니즘에 따르면 시간 간격 매개 변수는 실제로 브라우저 UI 스레드 큐에 애니메이션 코드를 추가하여 실행을 기다리는 시간을 지정한다고 결정합니다. 다른 작업이 대기열에 추가 된 경우, 애니메이션 코드는 이전 작업이 완료 될 때까지 기다려야합니다.
requestAnimationFrame은 시스템 시간 간격을 사용하여 최상의 드로잉 효율을 유지하며 짧은 간격 시간으로 인해 오버 드로잉하지 않으므로 오버 헤드가 증가합니다. 간격 시간이 너무 길어서 다양한 웹 애니메이션 효과가 통합 된 새로 고침 메커니즘을 가질 수 있도록 애니메이션 사용이 고정되어 부드럽 지 않으며 시스템 리소스를 절약하고 시스템 성능을 향상 시키며 시각 효과를 향상시킬 수 있습니다.
특징
【1 request requestAnimationFrame은 각 프레임의 모든 DOM 작업을 집중시키고 단일 리 페인트 또는 리플 로우로 완료되며 리 페인트 또는 리플로의 시간 간격은 브라우저의 새로 고침 빈도가 이어집니다.
hidden 또는 보이지 않는 요소의 경우 RequestAnimationFrame은 다시 칠하거나 반영되지 않으며 이는 CPU, GPU 및 메모리 사용량이 적습니다.
【3 an requestAnimationFrame은 애니메이션을 위해 특별히 브라우저에서 제공하는 API입니다. 실행되면 브라우저는 메소드의 호출을 자동으로 최적화합니다. 페이지가 활성화되지 않으면 애니메이션이 자동으로 일시 중지되어 CPU 오버 헤드를 효과적으로 저장합니다.
사용
requestAnimationFrame의 사용은 시간 간격을 설정할 필요가 없다는 점을 제외하고 Settimeout과 매우 유사합니다. requestAnimationFrame은 콜백 함수를 매개 변수로 사용하며 브라우저 리 페인트 전에 호출됩니다. 타이머 번호를 나타내는 정수를 반환합니다.이 기능의 실행을 취소하기 위해 CancelAnimationFrame으로 전달할 수 있습니다.
requestId = requestAnimationFrame (콜백); // 콘솔 출력 1 및 0VAR 타이머 = requestAnimationFrame (function () {console.log (0);}); Console.log (타이머); // 1 CancelAnimationFrame 메소드 메서드는 타이머를 취소하는 데 사용됩니다. // 콘솔 출력 var timer = requestAnimationFrame (function () {console.log (0);}); CancelAnimationFrame (타이머);반환 값을 사용하여 직접 취소 할 수도 있습니다.
var timer = requestAnimationFrame (function () {console.log (0);}); CancelAnimationFrame (1);호환 가능
IE9-Browser는이 방법을 지원하지 않으며 호환성을 위해 Settimeout을 사용할 수 있습니다.
if (! wind = Currtime + timetocall; return id;}} if (! window.cancelAnimationFrame) {wind애플리케이션
이제 SetInterVal, Settimeout 및 RequestAnimationFrame의 세 가지 방법을 사용하여 간단한 시스템 효과를 만듭니다.
【1 inter SetInterval
<div id = "mydiv"style = "back setInterVal (function () {if (parseint (mydiv.style.width) <500) {mydiv.style.width = parseint (mydiv.style.width) + 5 + 'px'; mydiv.innerhtml = parseint (mydiv.style.width)/5 + '; }, 16);} </script>【2 time 설정 타임 아웃
<div id = "mydiv"style = "back fn () {if (parseint (mydiv.style.width) <500) {mydiv.style.width = parseint (mydiv.style.width) + 5 + 'px'; mydiv.innerhtml = parseint (mydiv.style.width)/5 + '%'; Timer = settimeout (fn, 16);} else {cleartimeout (timer);}}, 16);} </script>3 an requestAnimationFrame
<div id = "mydiv"style = "back requestAnimationFrame (function fn () {if (parseint (mydiv.style.width) <500) {mydiv.style.width = parseint (mydiv.style.width) + 5 + 'px'; mydiv.innerhtml = parseint (mydiv.style.width)/5 + + + '% requestAnimationFrame (fn);} else {cancelAnimationFrame (타이머);}});} </script>좋아요, 코드는 BOM 시리즈 (Clock, Countdown, StopWatch 및 Alarm Clock)에서 세 번째 타이머 응용 프로그램을 소개하기 위해 여기에 있습니다.
위의 것은 편집자가 소개 한 BOM 시리즈의 두 번째 타이머 requestAnimationFrame입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!