움직임 smooth하게 하기

A -> B로 가는 경우, 이동값에다 좌표값을 바로 적용시키면 당연하게도 그냥 바로바로 이동이 된다.

하지만 그게 아니라 이동값 += (좌표값-이동값) * 0.1 등과 같이 만들고 requestAnimationFrame함수로 계속 부르게 하면 이동값이 좌표값과 같아질때까지 특정 연산값에 의해 위치가 바뀌기 때문에 한번에 바뀌는게 아니라서 움직임에 easing 효과를 줄 수 있다.

이런 easing 관련 수식은 웹에 널려있으니 알아서 찾으면 될 듯 하다.

중요한 포인트는

1. setInterval, requestAnimationFrame과 같은 함수를 사용해서 움직이는 값을 계속 변화시켜줘야 한다는 것.

2. easing 함수로 그 움직임 비율 값을 조절하는 것.