requestAnimationFrame1 JavaScript - 애니메이션 최적화하기 (requestAnimationFrame) 자연스러운 애니메이션을 구현하기 위해 사투를 벌인 스토리를 포스팅해보려고 한다 애니메이션은 여러 사진을 연속적으로 연결한 것이다. 그리고 그 사진을 프레임(Frame) 이라고 한다 1초 동안 보여줄 수 있는 최소한의 자연스러운 프레임의 갯수는 60 프레임 정도가 된다 그래서 Frame Per Seconds 라고 해서 60fps 라고도 한다 시계침 애니메이션을 구현하는 중이었다. 초침의 경우 초단위로 360도씩 돈다 처음에는 타이머 함수인 setInterval()를 사용하였더니 이슈가 생겼다 다른 이벤트와 겹치니 1초마다 움직여야할 애니메이션이 누락되어 뚝뚝 끊겨버렸다 JavaScript 로 애니메이션을 실행하면 Reflow 가 일어난다. (애니메이션으로 인해 Dom이 변경되기 때문에) "Reflow" .. 2024. 2. 1. 이전 1 다음 반응형