부드러운 움직임 구현1 강의 부분 질문있습니다.

몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]

부드러운 움직임 구현 1 (requestAnimationFrame)

작성

안녕하세요 현재 강의에서

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

이 부분과

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

이 부분 그리고

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

이 부분이 왜 작성이 된 것인지 이해가 잘 되지 않습니다.

javascript 인터랙티브-웹

답변 2

코딩일레븐

지식공유자

인프런 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 ) 찍어보시고요.

인프런 AI 인턴

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

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

변수 초기화:
```
let x = 0;
let y = 0;
let targetX = 0;
let targetY = 0;
let speed = 0.03;
```
- x, y는 마우스의 현재 위치를 나타냅니다.
- targetX, targetY는 요소가 이동할 목표 위치를 나타냅니다.
- speed는 요소가 대상 위치에 얼마나 빨리 도달할지를 결정하는 속도입니다. 값이 작을수록 더 천천히 움직입니다.
마우스 위치 감지:
```
x = e.pageX;
y = e.pageY;
```
- e.pageX 및 e.pageY는 마우스 이벤트 발생 시의 마우스 위치를 제공합니다. 이 코드를 통해 현재 마우스 위치를 x, y에 저장합니다.
목표 위치로 부드럽게 이동:
```
targetX += (x - targetX) * speed;
targetY += (y - targetY) * speed;
```
- 이 부분은 현재 위치에서 목표 위치로 부드럽게 이동하기 위한 식입니다. (x - targetX) * speed는 현재와 목표 위치 간의 차이에 속도를 곱하여 작은 값만큼 이동하도록 합니다. 이는 매 프레임마다 목표 위치로 조금씩 이동하여 부드러운 효과를 주게 됩니다.

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

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

인프런 커뮤니티 질문&답변

부드러운 움직임 구현1 강의 부분 질문있습니다.