settings_applicationsEventTarget > settings_applicationsWindow > settings_applicationswindow
웹브라우저에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트(repaint)가 진행되기 전에 해당 애니메이션을 업데이트하는 지정된 함수를 호출한다.
requestAnimationFrame()
메소드는 비동기 함수로서 CSS 애니메이션으로는 처리가 어렵거나 canvas, SVG 등의 애니메이션을 직접 구현하고자 할 때 사용된다.
이 메소드는 애니메이션 구현에 필요한 타임라인 프레임 비율을 모니터의 주사율에 맞추어져 실행하도록 해준다. 만약 모니터의 주사율이 60FPS라면 1초에 60번 프레임 비율을 갖는다. 이말은 1초에 60프레임을 보여준다고 할 수 있다.
정리한다면, 1 프레임당 동작할 로직을 구현한 함수를 준비하고 requestAnimationFrame()
메소드에게 콜백 함수 타입의 인수로 등록한다. 주의할 점은 콜백 함수내에서 다시 requestAnimationFrame()으
로 재귀 호출을 해야 한다.
원하는 실행 시점에 requestAnimationFrame()
메소드를 호출하고 콜백 함수 내에 로직에서 애니메이션 종료 시점을 정한다.
한편으로는 setInterval()
메소드와 비교할 수도 있을 것이다. 사실 requestAnimationFrame()
메소드가 추가되기 전에는 setInterval()
메소드를 이용해서 애니메이션을 구현했다. 하지만 setInterval()
메소드는 범용으로서 사용된 메소드라는 점이 다르다. 즉 requestAnimationFrame()
메소드는 애니메이션을 위해서 등장한 설계 자체가 다른 메소드이다. 콜백 함수에서 timestamp
값을 매개변수로 받을 수 있다는 것이 대표적이라 할 수 있다. 애니메이션에서 시간 개념은 매우 중요하다. 콜백 함수에서 timestamp
값을 받아 활용하는 로직 구현도 가능하다.
window.requestAnimationFrame(callback)
호출되어 실행할 함수
반환되는 ID는 window.cancelAnimationFrame()
메소드의 인수로 사용되어 동작을 취소하게 할 수 있다.
©2024 devdic.com, Korea
출처를 밝힌 리소스 이외의 본 레퍼런스에 사용된 모든 생성물의 소유 및 저작권은 devdic.com에 있습니다. 특별히 재배포를 금지한 것 이외는 재배포가 가능하며 반드시 출처를 표기해 주시기 바랍니다.
현재는 베타 버전으로 미등록 및 불완전한 콘텐츠가 일부 있을 수 있습니다. 오류 및 기술 자료 제보(건의)는 언제든지 환영하며 감사드립니다.
기본적으로 W3C 기술 사양을 기준으로 작성하였으며 일반적이지 않은 기술 설명에 대한 내용의 일부는 Mozilla의 MDN web docs에서 도움 받았음을 밝힙니다. 그들을 존경합니다.
master@cydemy.com