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

今日の 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の比較が面白かったので両方インポートしてみました。

次に、

リーリー

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

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 を使用して Web ページにアニメーションを追加するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。