Velocity.js를 사용하여 웹 페이지에 애니메이션 추가

오늘날의 웹 개발 세계에서 애니메이션은 웹사이트 인터페이스의 필수적인 부분이 되었습니다. 이는 웹사이트의 사용자 경험을 향상시키는 데 도움이 되며, 이 기사에서는 Velocity.js를 사용하여 웹 페이지에 아름다운 애니메이션을 추가하는 방법을 배울 것입니다.

VelocityJS는 웹 페이지에서 사용할 수 있는 매우 빠른 애니메이션을 제공하는 JavaScript 애니메이션 엔진입니다. 이는 선도적인 애니메이션 엔진 중 하나가 되었으며, 그 성공에는 몇 가지 이유가 있습니다. 웹 페이지에 애니메이션 엔진을 선택하기로 결정할 때 이 엔진을 매우 좋은 선택으로 만드는 가장 중요한 이유 중 일부를 언급했습니다.

Velocity.js의 중요한 기능

아래 목록은 Velocity.js의 중요한 기능 중 일부입니다 -

• 더 나은 성능 - 속도 측면에서 CSS만큼 빠르며 특히 모바일 장치에서 주요 경쟁사인 jQuery에 비해 더 나은 성능을 제공합니다. 과거에는 jQuery 핵심 애니메이션을 VelocityJS로 대체해야 한다는 논의도 있었습니다. 또한 CSS 애니메이션이 브라우저를 충분히 지원하지 않는 반면 VelocityJS 애니메이션은 IE8부터 안정적이라는 점도 장점입니다.

• RunSequence - runSequence를 연속적인 방식으로 여러 애니메이션을 수행할 수 있는 것으로 생각하면 더 나은 결과를 얻을 수 있고 더 효율적인 접근 방식입니다. 이는 일반적으로 jQuery 애니메이션에서 발견되는 여러 애니메이션 기능을 연결하는 것과 비교할 때 우아한 접근 방식입니다.

• 학습 곡선 - Velocity.JS의 학습 곡선은 jQuery를 아는 사람들이 비슷한 구문을 제공하므로 쉽게 사용할 수 있기 때문에 그리 가파르지 않습니다.

이제 Velocity.JS의 기본 개념을 이해했으므로 Velocity.JS 애니메이션의 작동 방식을 이해하기 위해 다양한 애니메이션을 만들어 보겠습니다.

Velocity.js를 사용하여 애니메이션 추가

가장 먼저 필요한 것은 Velocity.JS용 코드가 주로 JavaScript 파일로 작성되고 HTML 파일이 Velocity.JS 종속성을 가져오기 위한 시작점 역할을 하는 간단한 HTML-JS 프로젝트를 만드는 것입니다.

원하는 코드 편집기나 IDE에서 index.html 및 script.js라는 파일을 만듭니다. index.html 및 script.js 파일을 생성하는 데 도움이 되는 아래 명령을 고려해보세요.

참고 - touch가 작동하지 않으면 vi 명령을 사용할 수 있습니다.

index.html

이 두 파일을 만든 후 다음 단계는 다음 코드를 index.html 파일에 넣는 것입니다.

예

위 코드에서 몇 가지 사항에 주의해야 합니다. 첫 번째는 코드에서 Velocity.JS 파일을 가져올 수 있는지 확인해야 한다는 것입니다. 위 코드의

아래에 표시된 코드 조각을 고려하세요.

이 두 줄을 사용하면 jQuery와 Velocity.JS를 코드로 가져올 수 있습니다. 하지만 Velocity.JS만 필요하지만 둘 중 하나 또는 둘 다 가져오기를 호출할 수 있습니다. Velocity와 jQuery를 비교하는 것이 흥미로웠기 때문에 둘 다 가져왔습니다.

이제

위의 코드 조각에는 두 개의 서로 다른

let $element = $("#sample-p");
// chaining
$element

   // makes the $element of height of 300px over 1000ms
   .velocity({ height: 400 }, { duration: 1000 })

   /* makes the $element to animate to the left position of 
   200px over 600ms after the width is finished animating */
   .velocity({ top: 200 }, { duration: 600 })

   // fading the element after it's done moving
   .velocity({ opacity: 0 }, { duration: 200 });

let $element = $("#sample-p");

$element.velocity({ opacity: 0 }, { duration: "slow" });

let $element = $("#sample-p");

$element.velocity({ opacity: 0 }, { duration: 5000 });

let $element = $("#sample-p");

// opacity
$element.velocity({
   opacity: 0
}, {
   /* Log all the animated divs. */
   complete: function(elements) { console.log(elements); }
});

let $element = $("#sample-p");

// looping
$element.velocity({ height: "5em" }, { loop: 2 });

let $element = $("#sample-p"); 

// looping 
$element.velocity(
   {
      height: "+=10em"
   }, 
    
   { 
      loop: 4, 
        
      /* Wait 300ms before alternating back. */ 
      delay: 300 
   }
);

let $element = $("#sample-p");

// fading 
$element
   .velocity("fadeIn", { duration: 1500 })
   .velocity("fadeOut", { delay: 500, duration: 1500 });

위 내용은 Velocity.js를 사용하여 웹 페이지에 애니메이션 추가의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!