Velocity.js는 요소의 애니메이션을 매우 간단하고 부드럽게 할 수 있는 JavaScript 라이브러리입니다. 요소를 직선 경로나 곡선 경로를 따라 움직이도록 하는 것도 가능합니다.

직선 경로 애니메이션

요소를 직선 경로를 따라 애니메이션화하기 위해서는 velocity 함수를 사용하고 path 옵션을 설정해야 합니다.

$("#element").velocity({
  translateX: "100px",
  translateY: "100px",
  path: "100px, 100px"
}, {
  duration: 1000
});

위 예제에서 translateX와 translateY 속성은 애니메이션의 끝 지점을 나타내며, path 옵션은 요소가 따라갈 경로를 지정합니다.

곡선 경로 애니메이션

요소를 곡선 경로를 따라 애니메이션화하는 것도 가능합니다. 이때는 bezier 함수를 사용하여 3개의 또는 4개의 제어점을 지정해야 합니다.

$("#element").velocity({
  translateX: "100px",
  translateY: "100px",
  path: {
    type: "thru",
    controlPoint1: [0, 100],
    controlPoint2: [100, 0],
    end: [100, 100]
  }
}, {
  duration: 1000
});

위 예제에서 controlPoint1과 controlPoint2는 각각 2개의 제어점을 나타내며, end는 애니메이션의 끝 지점을 나타냅니다.

Velocity.js를 사용하여 요소를 경로에 따라 애니메이션화하는 것은 디자인과 사용자 경험에 흥미로운 요소를 추가하는 데에 도움이 될 수 있습니다.

더 많은 정보는 Velocity.js 공식 문서를 참고하세요!