[JavaScript] 자바스크립트 requestAnimationFrame 사용하기 (HTML)

183_자바스크립트 requestAnimationFrame 사용하기 (HTML) [적용] 마우스 커서를 따라다니는 애니메이션을 생성하고 싶을 때 [내용] requestAnimationFrame()은 애니메이션의 모션을 세세하게 조절할 수 있다는 장점을 가졌다. HTML요소에 애니메이션 효과를 주기 위해서는 style 속성값을 조절한다. 앞서 사용한 tick 함수를 다시 사용하여 확인해 보자. https://stonefree.tistory.com/369 [JavaScript] 자바스크립트 requestAnimationFrame 사용하기 182_자바스크립트 requestAnimationFrame 사용하기 [적용] WebGL과 HTML 캔버스에서 애니메이션을 처리하고 싶을 때 요소에 3D 효과를 주고 싶을 때..

2022.07.22

[JavaScript] 자바스크립트 requestAnimationFrame 사용하기

182_자바스크립트 requestAnimationFrame 사용하기 [적용] WebGL과 HTML 캔버스에서 애니메이션을 처리하고 싶을 때 요소에 3D 효과를 주고 싶을 때 [문법] 메소드 의미 반환 requestAnimationsFrame(함수) 시간 경과에 따른실행 함수 등록 숫자 [내용] requestAnimationFrame()은 화면에 각 프레임이 표시되기 전에 함수를 불러내는 명령으로, 이 메소드를 사용하면 시간 경과에 따른 지속적인 변화를 줄 수 있다. 일반적인 디스플레이는 초당 60프레임이 표시되며, 이는 한 프레임단 약 16밀리초의 시간이다. 만약 setTimeout()과 setInterval()을 사용해 16밀리초 이하의 시간을 설정한다면, 화면에는 표시되지 않으므로 불필요한 처리가 발..

2022.07.19