2026-01-29T01:29:11.617Z

1

답변 감사합니다.

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

  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)를 사용한 다는 것도 알게 되서 답변 감사합니다!