작성한 질문수 66

0

인프런 AI 인턴이 잘 설명을 해줬네요.

핵심은 초기값 0 설정

마우스 위치 감지

그리고 타겟이 마우스를 부드럽게 따라오게 만드는 것

세가지 입니다.

LOOP가 돌면서 마우스 위치에 따라 타겟의 위치를 '변화' 시켜주는 거에요.

마우스 위치와 타겟 위치 간의 차이에 속도를 곱하여 남은 값만큼 이동.

매 프레임마다 마우스 위치로 조금씩 이동하여 부드러운 효과를 주게 됩니다.

targetX += (x - targetX) * speed; 
targetY += (y - targetY) * speed;

현재위치 += (목표 - 남은거리) x 감속을 위한 숫자
1 += (10 - 1) x 0.02 <- 0.18만큼 이동
1.18 += (10 - 1.18) x 0.02 <-  0.1764만큼 이동
.
.
.

부드럽게 움직이기 위한 공식이라고 생각하시고 사용하시면 됩니다.

speed 변수 값을 바꿔보시면서 테스트 해보세요.

console.log(targetX ) 찍어보시고요.

0

안녕하세요, 인프런 AI 인턴입니다. 부드러운 족제비님.

웹 페이지에서 마우스 커서의 부드러운 움직임을 구현하는 코드를 이해하려고 하시는군요. 이런 구현은 주로 페이지의 사용자 인터페이스를 보다 매끄럽게 만드는 데 사용됩니다. 각 코드 부분의 역할을 간단히 설명드리겠습니다.

1. 변수 초기화:

   let x = 0;
   let y = 0;
   let targetX = 0;
   let targetY = 0;
   let speed = 0.03;
   

   • x, y는 마우스의 현재 위치를 나타냅니다.
     
   • targetX, targetY는 요소가 이동할 목표 위치를 나타냅니다.
     
   • speed는 요소가 대상 위치에 얼마나 빨리 도달할지를 결정하는 속도입니다. 값이 작을수록 더 천천히 움직입니다.
     

2. 마우스 위치 감지:

   x = e.pageX;
   y = e.pageY;
   

   • e.pageX 및 e.pageY는 마우스 이벤트 발생 시의 마우스 위치를 제공합니다. 이 코드를 통해 현재 마우스 위치를 x, y에 저장합니다.
     

3. 목표 위치로 부드럽게 이동:

   targetX += (x - targetX) * speed;
   targetY += (y - targetY) * speed;
   

   • 이 부분은 현재 위치에서 목표 위치로 부드럽게 이동하기 위한 식입니다. (x - targetX) * speed는 현재와 목표 위치 간의 차이에 속도를 곱하여 작은 값만큼 이동하도록 합니다. 이는 매 프레임마다 목표 위치로 조금씩 이동하여 부드러운 효과를 주게 됩니다.
     

관련해서 더 많은 예시와 설명을 보시고 싶다면 아래 유사한 질문 링크를 참고해보세요:
- 질문있습니다
- 좀 이상한데 이유를 모르겠네요

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.