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

SuperDuper

작성한 질문수

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

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

mouse position interpolation과 transition linear interpolation의 차이

해결된 질문

작성

수정됨

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

이 코드가 매번 마우스가 움직일 때마다 보간을 구하는 거라면,

JS에서는

box.style.top = pageY;
box.style.left = pageX;

이렇게 포지션만 잡아주고,

.box {
    transition: top second linear, left second linear;
}

css에서 transition에 각각 top, left에 linear를 주면,
targetX/Y의 선형보간이랑 css에서 transition 선형보간이랑 같은 거 아닌가요?

다르다면 어떤 부분이 다른지 알고 싶습니다!

javascript 인터랙티브-웹

답변 1

코딩일레븐

지식공유자

안녕하세요 좋은 질문입니다.

실행 결과는 크게 다르지 않으나 코드 작성해서 비교 해보시면 느낌이 다르실거에요.

예제처럼 실시간으로 위치 값을 계산할때는 requestAnimationFrame을 이용한 계산이

60프레임 전부 사용할 수 있어서 움직임이 부드럽습니다.

물론 실무에서는 버튼 롤오버 등 다양한 곳에 transition 을 많이 사용하기는 합니다.

필요한 곳에 적절히 나눠서 사용하시면 되겠습니다. 두가지를 섞어도 사용하기도 합니다.

SuperDuper

질문자

답변 감사합니다.

어제 다시 공식에 대해서 다시 공부해 보니.

  const forceX = (mousePos.x - currentPos.x) * strength;
  const forceY = (mousePos.y - currentPos.y) * strength;

  const accelerateX = forceX / mass;
  const accelerateY = forceY / mass;

  velocity.x = velocity.x + accelerateX;
  velocity.y = velocity.y + accelerateY;

  velocity.x = velocity.x * damping;
  velocity.y = velocity.y * damping;

  currentPos.x = currentPos.x + velocity.x;
  currentPos.y = currentPos.y + velocity.y;

이와 같은 공식을 사용했을 땐, (미분, 후크 법칙,등)을 사용하여 최종 포지션만 알 수 있을 때, 사용하기 좋은 공식인 걸 알게 되었고, 추가적으로 strength, mass, damping을 사용해서 더 동적인 스프링같은 애니메이션이나 transition의 ease-out같은 애니메이션을 만들 수 있다는 걸 알게 되었습니다.

css의 transition같은 경우, 현재 위치, 최종 위치와 시간을 알게 되면 더 정확한 애니메이션을 구할 수 있다는 것도요.

실무에서는 더 정확한? 애니메이션을 위해서 transition(bezier curve)를 사용한 다는 것도 알게 되서 답변 감사합니다!

SuperDuper

작성한 질문수

전체 Q&A

질문하기