JS アニメーション ライブラリ Velocity.js の使用について話しましょう

この記事では主に JS アニメーション ライブラリである Velocity.js の使用方法を紹介し、参考として提供します。

はじめに

また暑い7月になってしまいましたが、長い間技術記事を更新していなかった理由は、先月末でインターンシップが終了し、会社を退職したためです。それから私は最近、自分のプロジェクトに取り組んでおり、次の会社への応募に備えて運転免許試験を受けています。半月すべてを終えた後、私はまだ落ち着いていました。新しい技術を学び、技術的な記事を書くために、粘り強く続けていただければ幸いです。

JSアニメーション

インターネットがますます多様化するにつれて、Webサイトの美化や新しい技術が次々と登場しています。あらゆる種類のクールなインタラクティブ効果。

Webページのインタラクティブ効果は大きく分けてCSSアニメーションとJSアニメーションに分けられます。

JS アニメーションの利点

これら 2 種類のアニメーションについて大まかに理解したので、それぞれの異なる利点を分析してみましょう

1. CSS アニメーション CSS3 は CSS 属性に基づいてアニメーションをカスタマイズできるため、このタイプの利点アニメーションの計算や変更をしなくても非常にスムーズになります。

2. JSアニメーション jsアニメーションは、cssアニメーションよりも強力なパフォーマンスを持っており、jsに基づいて属性値を変更するため、cssの制限がなく、より多くの機能と動的な効果を実現できるという人もいるかもしれません。 js アニメーション ライブラリは非常に遅くなります。実際、js アニメーションは本質的に高速ですが、jquery を使用すると遅くなります。 jquery と組み合わせて使用​​する場合があるため、jquery 自体の一部の機能により、実装すると非常に遅くなります。

velocity.js の使用方法

JS アニメーション ライブラリは数多くありますが、それぞれに独自の利点があります。たとえば、jquery や webGL に付属するアニメーションをアニメーション化したり、キャンバスや SVG などを使用して他の機能を実現したりできます。今回は、数多くのライブラリのうちの 1 つである、Velocity.js アニメーション ライブラリについて説明します。

velocity.js は JavaScript だけで使用することも、jquery と併用して使用することもできます (まず、velocity.js をダウンロードして body タグの下に導入し、次に新しい script タグに次のコードを記述することに注意してください)。

//jquery方法 
var $p = $('p')
$p.velocity({属性:值,属性:值})
//javascript 方法
var op = document.getElementById('p')
op.velocity({属性:值,属性:值})

ここで注意すべき点がいくつかあります:

1. 内部の属性は引用符で記述することはできません。次の値に文字列が含まれる場合、それが整数の場合は引用符で囲む必要があります。たとえば、width: 100 と width: "100px" は必要ありません。たとえば、css のパディング: 5px 5px 6px 5px のように渡すことができます。これですが、Velocity で複数の値を渡したい場合は、{paddingLeft:5,paddingRirght:5 省略}

3 属性値に複数のトランジションが含まれる場合は、上記のように 2 番目の頭文字を大文字にする必要があります

。 Velocity.js の詳細な紹介

上で述べたように、変更する必要がある値はオブジェクトとして Velocity に渡されます。最初のパラメーター、次に 2 番目のパラメーターは、次のような指定されたアニメーション オプションです:

+durationduration

+イージングイージングモード

+ 遅延遅延実行
+ ループ数
+ コールバック関数の開始および完了
+ 表示 (値は CSS と同じで、自動に設定できます)

指定された速度のアニメーション オプションについて説明する前に、速度でサポートされている値について話します: px em rem % vm vh または、演算子 *=2 を使用して現在の値の 2 倍を表すか、/ =2 およびその他の計算方法を使用します

以下の分析はアニメーションを指定するために 1 つずつ実行されますオプション:

duration 期間

デフォルト値はミリ秒 (ms) で、次のように使用できます:

// 表示一秒内将透明度从1到0
$p.velocity({opacity:0},{duration:1000})

次のように使用することもできます。

// 效果相同
$p.velocity({opacity:0},1000)

速度には、実際のニーズに応じて使用できる、低速 (600 ミリ秒)、標準 (400 ミリ秒)、高速 (200 ミリ秒) の 3 つの連続モードもカスタマイズされています

緩和方法

これは、方法を表しますアニメーションの変換: easy-in-out (徐々に増加および減少)、ease-in (最初に加速し、その後一定速度で加速)、dase-out (最初に一定速度でその後減速)

も可能です三角関数イージング「easeInOutSine」、CSS ベジェ曲線 [0.17, 0.67, 0.83, 0.67] またはバネ物理学 [張力、摩擦] およびその他の値に基づいて実装されます

遅延遅延実行

はこの遅延を表しますアニメーション デフォルトの単位であるミリ秒 (ms) の実行時間

// 五秒后执行此动画
delay：5000

loop ループ数

は、このアニメーションに必要なループの数を表します:

// 循环五次
loop:5
// 无限循环
loop:true

begin および complete コールバック関数

アニメーションの開始前とアニメーションの終了後に実行される関数を表します:

begin:function(){ somgthing... },complete:function(){ somgthing... }

その他の関数:

velocity には、将来説明される次のような他の関数もあります。 reverse (reversal) )、scrolling(スクロール)、color(カラー)、transform(変換にはスケール・ズーム・回転・回転・移動・翻訳などが含まれます)

以上は皆さんのためにまとめたものです。

関連記事:

リンクからQRコードを生成して画像に変換するメソッドをJSで実装

vue1とvue2に基づいてDOM要素を取得するメソッド

nodejs+mongodb集約カスケードクエリ操作の例

以上がJS アニメーション ライブラリ Velocity.js の使用について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。