Velocity.js を使用して Web ページにアニメーションを追加する-jsチュートリアル-php.cn

使用 Velocity.js 将动画添加到网页

今日の Web 開発の世界では、アニメーションは Web サイトのインターフェイスに不可欠な部分になっています。これらは Web サイトのユーザーエクスペリエンスを向上させるのに役立ちます。この記事では、Velocity.js を使用して Web ページに美しいアニメーションを追加する方法を学びます。

VelocityJS は、Web ページで使用できる非常に高速なアニメーションを提供する JavaScript アニメーションエンジンです。これは主要なアニメーションエンジンの 1 つとなっていますが、その成功にはいくつかの理由があります。 Web ページ用のアニメーションエンジンを選択する際に、それが非常に良い選択となる最も重要な理由をいくつか述べました。

Velocity.jsの重要な機能

以下に、Velocity.js の重要な機能をいくつか示します -

優れたパフォーマンス - 速度の点では、CSS と同じくらい高速で、主な競合他社である jQuery と比較して、特にモバイルデバイスで優れたパフォーマンスを提供します。過去には、jQuery コアアニメーションを VelocityJS に置き換えるべきだと議論した人もいます。また、VelocityJS アニメーションは IE8 の時点で信頼性があったのに対し、CSS アニメーションは単純にブラウザーのサポートが不十分であるという点も有利です。
RunSequence - runSequence は、一連のアニメーションを連続的に実行できるようにするものと考えてください。より良い結果が得られ、より効率的なメソッドになります。。これは、jQuery アニメーションで通常見られる複数のアニメーション関数をチェーンするのと比較して、洗練されたアプローチです。
学習曲線 - Velocity.JS の学習曲線はそれほど急ではなく、jQuery を知っている人であれば、同様の構文を提供するため簡単に使い始めることができます。

Velocity.JS の基本概念を理解したところで、Velocity.JS アニメーションがどのように機能するかを理解するために、さまざまなアニメーションを作成してみましょう。

Velocity.js を使用してアニメーションを追加する

最初に必要なのは、単純な HTML-JS プロジェクトを作成することです。このプロジェクトでは、Velocity.JS のコードは主に JavaScript ファイルで記述され、HTML ファイルは Velocity.JS の依存関係をインポートするための開始点として機能します。

お気に入りのコードエディターまたは IDE で index.html および script.js という名前のファイルを作成します。以下に示すコマンドを検討してください。これは、index.html ファイルと script.js ファイルの作成に役立ちます。

リーリー

注 - touch が機能しない場合は、vi コマンドを使用できます。

index.html

これら 2 つのファイルを作成した後の次のステップは、次のコードを index.html ファイルに配置することです。

＃＃＃例＃＃＃リーリー

上記のコードでは、いくつかの点に注意する必要があります。1 つ目は、コード内で Velocity.JS ファイルをインポートできることを確認する必要があることです。これは、上記のコードの

タグ内で行います。

以下に示すコードスニペットを考えてみましょう。リーリー

これらの 2 行により、jQuery と Velocity.JS をコードにインポートできます。必要なのは Velocity.JS だけですが、import の一方または両方を呼び出すことができます。 VelocityとjQueryの比較が面白かったので両方インポートしてみました。

次に、

タグから要素を選択し、それを使用してアニメーションを作成します。以下に示すコードスニペットを考えてみましょう。

リーリー

上記のコードスニペットでは、2 つの異なるタグがあり、各タグに

が関連付けられていることがわかります。これらの ID を JavaScript コードで使用します。これらの ID と同様に、Velocity 要素を取得してアニメーションを実行できるようになります。

スクリプト.js

次に、script.js にコードを記述します。まず、単純な Velocity オブジェクトを使用します。このオブジェクトでは、Velocity.js を使用して指定された幅と高さを

タグに割り当てます。

次に示す

script.js

コードを考えてみましょう。 リーリー 上記のコードでは、$element を指定します。これは、指定された幅と高さを持つ HTML コードを指す

タグです。

HTML コードを実行すると、

タグの内容が指定された幅と高さになっていることがわかります。

上記の例では、

タグのコンテンツの幅が 500px に変更されることを確認しますが、一定の遅延の後、

タグまたは $ 要素の幅が変更されることを確認したいとします。 200pxまで。以下に示すコードを使用して同じことを実現できます。

リーリー

ここで、HTML ファイルを実行すると、1 秒の遅延の後、$element の幅が 200px に変更されます。

Velocity.js を使用して 1 つの要素に複数のアニメーションを追加する

これまでの 2 つの例では、Velocity.JS を使用して単純なアニメーションを実行する方法を学習しました。次に、単一の要素で複数のアニメーションを実行する部分に焦点を当てましょう。

複数のアニメーションを実行したい場合は、アニメーションを 1 つずつ実行するか、チェーンして、チェーンを定義した順序で実行できます。以下に示す 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 选项。