Velocity.js를 사용하여 웹 페이지에 애니메이션 추가-JS 튜토리얼-php.cn

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

王林

풀어 주다： 2023-09-05 18:17:16

앞으로

991명이 탐색했습니다.

使用 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를 비교하는 것이 흥미로웠기 때문에 둘 다 가져왔습니다.

이제

태그에서 요소를 선택하고 이를 사용하여 애니메이션을 만들어 보겠습니다. 아래에 표시된 코드 조각을 고려하세요. 으아악

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

태그가 있고 각 태그에는 이와 연결된 이 있음을 알 수 있습니다. 우리는 JavaScript 코드에서 이러한 ID를 사용할 것이며 이러한 ID와 마찬가지로 Velocity 요소를 가져온 다음 애니메이션을 수행할 수 있을 것입니다.

script.js

이제 script.js에 코드를 작성해보겠습니다. 가장 먼저 할 일은 Velocity.js를 사용하여

태그에 지정된 너비와 높이를 할당하는 간단한 Velocity 개체를 사용하는 것입니다.

아래 표시된 script.js 코드를 고려해보세요.

으아악

위 코드에서는 HTML 코드를 가리키는 단순히

태그인 $element가 지정된 너비와 높이를 갖도록 지정합니다.

HTML 코드를 실행하면

태그의 내용에 지정된 너비와 높이가 있는지 확인해야 합니다.

위 예에서는

태그 콘텐츠의 너비가 500px로 변경되도록 보장했지만, 일정 지연 후

태그 또는 $element의 너비가 200px로 변경되는지 확인하고 싶다고 가정합니다. 아래 표시된 코드를 사용하여 동일한 결과를 얻을 수 있습니다.

으아악

이제 HTML 파일을 실행하면 1초의 지연 후 $element의 너비가 200px로 변경됩니다.

Velocity.js를 사용하여 단일 요소에 여러 애니메이션을 추가하세요

지금까지 이 두 가지 예제에서는 Velocity.JS를 사용하여 간단한 애니메이션을 실행하는 방법을 배웠습니다. 이제 단일 요소에서 여러 애니메이션을 실행하려는 부분에 집중해 보겠습니다.

여러 애니메이션을 실행하려면 하나씩 실행하거나 체인으로 연결하여 링크를 정의한 순서대로 실행할 수 있습니다. 아래에 표시된 script.js 코드를 고려하세요.

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 });

로그인 후 복사

在上面的代码中，我们有不同的动画，它们相互链接，这是您在探索更多 Velocity.JS 示例时会发现的更常见的模式之一。

使用 Velocity.js 添加不透明度

现在，我们来讨论一下 Velocity.JS 中的一个常用选项，即 opacity。在下一个示例中，我们将探讨如何在具有不同选项的元素上使用不透明度。

第一个简单的场景是引入带有慢速选项的不透明动画。考虑下面所示的 script.js 代码。

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

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

로그인 후 복사

在上面的代码中，我们确保元素的不透明度达到 0，并且持续时间很慢。

在下一个示例中，我们甚至可以决定希望元素具有 0 不透明度的确切时间延迟。考虑下面所示的 script.js 代码。

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

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

로그인 후 복사

在上面的代码中，我们确保元素的不透明度为 0，持续时间为 5000 毫秒。

一旦特定的动画完成，我们还可以记录 div 的元素和附加属性。考虑下面所示的 script.js 代码。

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

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

로그인 후 복사

在上面的代码中，我们正在打印将打印附加属性的元素以及控制台中的所有元素。

使用 Velocity.js 的循环效果

现在让我们看看如何使用 Velocity.js 获得循环效果。通过循环，我想说的是如何在特定循环中执行特定动画，并且您将可以访问该循环的不同属性，例如要执行循环的次数、延迟时间等等。

让我们从一个非常基本的示例开始。考虑下面所示的 script.js 代码。

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

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

로그인 후 복사

在上面的代码中，我们创建了一个动画，使“$element”项目的高度为 5em，并且它将循环运行两次。

现在假设我们想要运行一个类似的示例，但同时我们想要确保当我们循环返回时，我们也应该有一个延迟。考虑下面所示的 script.js 代码。

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

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

로그인 후 복사

在上面的代码中，我们创建了一个动画，使“$element”项目的高度为 10em，并且从一个循环返回到另一个循环时它将循环运行四次，延迟 300 毫秒.

使用 Velocity.js 实现淡入淡出效果

现在让我们看看如何使用 Velocity.JS 获得淡入淡出效果。考虑下面所示的 script.js 代码。

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

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

로그인 후 복사

在上面的代码中，我们使用了 Velocity.JS 中的 fadeIn 和 fadeOut 选项。