requestAnimationFrame 이해가 잘 안가서 그러는데요

안녕하세요. 일단 큰 차이는!

requestAnimationFrame()은 그냥 계속~ 돌아가고 있다고 생각하시면 됩니다. ( ex: 1초에 60프레임)

mouseMove는 마우스를 움직였을때만 발생하고요. 

.

마치 숨쉬듯이 requestAnimationFrame()은 계속 돌아가고 있고

그 안의 코드로 부드러운 animation을 구현해 놓은 겁니다.

mouseMove 는 마우스 위치값(변수)만 변경해주는 역할이고요.

부드러운 모션을 위해 하는 일을 분리해 놓은 거에요.

"mouseMove 넌 마우스 x, y 변수만 바꿔줘!" 

"requestAnimationFrame 너는 바뀐 x, y 로 이동만 시켜" 

mouseMove를 mouseDown 으로 변경해서 테스트 해보세요.

x,y 값만 바꿔주면 알아서 모션이 일어나겠죠?

.

- 자연스러운 움직임이 필요없으시면 requestAnimationFrame() 안 쓰셔도 됩니다.

- mouseMove 함수 안에 requestAnimationFrame() 넣으면 절대 안 됩니다

루프 함수가 계~속 중첩되서 실행이 됩니다.