[JavaScript] 마우스를 부드럽게 따라오는 커서 이펙트 구현해보기

JavaScript

효니님 2023. 8. 4. 15:51

728x90

해당 포스팅은 유튜브에 업로드된 '맛있는 코딩'님의 강좌를 들으며 공부한 내용들입니다.

Lerp는 Linear interpolation의 약자로서 선형 보간법을 뜻합니다.

Lerp는 많은 곳에서 사용되고 있습니다.

가장 대표적으로는 애니메이션 효과를 만들때 주로 사용이 되는데요

예를 들어 웹에서 부드러운 스크롤 효과를 구현하거나

마우스를 따라다니는 커서를 부드럽게 따라오도록 할 때,

2d나 3d에서 캐릭터의 방향전환을 부드럽게 만들고 싶을 때 등등

부드럽게, 자연스럽게 애니메이션 효과를 구현하기 위해 이 Lerp를 많이 사용하고 있습니다.

만약 마우스를 따라다니는 공을 만든다고 가정했을 때

다음처럼 마우스를 왼쪽에서 오른쪽으로 움직이면

일반적인 방식으로 코드를 짜게 되면

아래보이는 것처럼 공이 마우스의 위치와 똑같이 이동하게 됩니다.

하지만 Lerp를 사용하게 되면 공이 마우스의 위치로 부드럽게 쫓아오도록 만들 수 있습니다.

예를 들어 마우스가 시작지점 S에서 끝지점 E로 이동한다고 했을 때

끝지점 E와 시작지점 S 사이 간격의 30%만 이동을 시키고

30% 이동된 위치를 다시 시작지점 S로 잡고 E와 S 사이 간격의 30%만큼을 다시 이동시킨 다음

이 동작을 계속 반복하게 되면 이동된 마우스의 위치로 조금씩 쫓아오면서

부드러운 애니메이션 효과가 만들어지게 됩니다.

마우스를 왼쪽에서 오른쪽으로 움직였을 때 30%만큼씩 반복적으로 이동시키기 위해서는

반복하여 실행되는 함수 setInterval이나 requestAnimationFrame을 사용해 스스로 반복하도록 만들어

그 함수 안에서 시작지점 S와 끝지점 E사이 거리의 30% 지점만큼 공을 이동시키는 코드를 반복하게 되면

원하는 결과물이 나오게 됩니다.

이제 S와 E사이의 0.3 지점과 같이 특정 지점의 값을 구해보겠습니다.

구하고 싶은 위치를 P라고 했을 때 S지점의 값에서 두지점 사이(E - S)의 거리값에 0.3을 곱한 값을 더해주면

S와 P두 지점사이의 0.3만큼의 위치값이 나옵니다.

이렇게 구한 값이 바로 선형 보간법의 결과물입니다.

이 계산식의 0.3이 곱해진 것을 풀어서 작성하면 P = S + 0.3E - 0.3S

S값을 계산해 주면 P = 0.7S+ 0.3E

0.7S를 다르게 표현해 주면 P = (1 - 0.3)S + 0.3E

이와 같이 되는데 이것이 선형 보간법의 식입니다.

참고👉 위키백과 | 선형 보간법

d1을 0.3, d.2를 0.7이라고 생각하고 보면 조금 더 이해가 되실 겁니다.

시작지점과 끝지점을 알고 있을 때 특정 위치의 값을 예측하는 게 이 선형 보간법의 핵심입니다.

728x90