JS アニメーション ライブラリ Velocity.js の使用について話しましょう
この記事では主に JS アニメーション ライブラリである Velocity.js の使用方法を紹介し、参考として提供します。
はじめに
また暑い7月になってしまいましたが、長い間技術記事を更新していなかった理由は、先月末でインターンシップが終了し、会社を退職したためです。それから私は最近、自分のプロジェクトに取り組んでおり、次の会社への応募に備えて運転免許試験を受けています。半月すべてを終えた後、私はまだ落ち着いていました。新しい技術を学び、技術的な記事を書くために、粘り強く続けていただければ幸いです。
JSアニメーション
インターネットがますます多様化するにつれて、Webサイトの美化や新しい技術が次々と登場しています。あらゆる種類のクールなインタラクティブ効果。
Webページのインタラクティブ効果は大きく分けてCSSアニメーションとJSアニメーションに分けられます。
JS アニメーションの利点
これら 2 種類のアニメーションについて大まかに理解したので、それぞれの異なる利点を分析してみましょう
CSS アニメーション CSS3 は CSS 属性に基づいてアニメーションをカスタマイズできるため、このタイプの利点アニメーションの計算や変更をしなくても非常にスムーズになります。
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 に渡されます。最初のパラメーター、次に 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で実装
以上がJS アニメーション ライブラリ Velocity.js の使用について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undress AI Tool
脱衣画像を無料で

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

マグネット リンクは、リソースをダウンロードするためのリンク方法であり、従来のダウンロード方法よりも便利で効率的です。マグネット リンクを使用すると、中間サーバーに依存せずに、ピアツーピア方式でリソースをダウンロードできます。この記事ではマグネットリンクの使い方と注意点を紹介します。 1. マグネット リンクとは? マグネット リンクは、P2P (Peer-to-Peer) プロトコルに基づくダウンロード方式です。ユーザーはマグネット リンクを通じてリソースの発行者に直接接続し、リソースの共有とダウンロードを完了できます。従来のダウンロード方法と比較して、磁気

mdf ファイルと mds ファイルの使用方法 コンピューター技術の継続的な進歩により、さまざまな方法でデータを保存および共有できるようになりました。デジタル メディアの分野では、特殊なファイル形式に遭遇することがよくあります。この記事では、一般的なファイル形式である mdf および mds ファイルについて説明し、その使用方法を紹介します。まず、mdf ファイルと mds ファイルの意味を理解する必要があります。 mdf は CD/DVD イメージ ファイルの拡張子で、mds ファイルは mdf ファイルのメタデータ ファイルです。

簡単に始めましょう: pip ミラー ソースの使用方法 世界中での Python の人気により、pip は Python パッケージ管理の標準ツールになりました。ただし、pip を使用してパッケージをインストールするときに多くの開発者が直面する一般的な問題は速度の遅さです。これは、デフォルトでは、pip は Python 公式ソースまたはその他の外部ソースからパッケージをダウンロードしますが、これらのソースが海外のサーバーに配置されている可能性があるため、ダウンロード速度が遅くなることがあります。ダウンロード速度を向上させるために、pip ミラー ソースを使用できます。ピップミラーソースとは何ですか?簡単に言えば、ただ、

foobar2000 は、音楽リソースをいつでも聴くことができるソフトウェアです。あらゆる種類の音楽をロスレス音質で提供します。音楽プレーヤーの強化版により、より包括的で快適な音楽体験を得ることができます。その設計コンセプトは、高度なオーディオをコンピュータ上で再生可能 デバイスを携帯電話に移植し、より便利で効率的な音楽再生体験を提供 シンプルでわかりやすく、使いやすいインターフェースデザイン 過度な装飾や煩雑な操作を排除したミニマルなデザインスタイルを採用また、さまざまなスキンとテーマをサポートし、自分の好みに合わせて設定をカスタマイズし、複数のオーディオ形式の再生をサポートする専用の音楽プレーヤーを作成します。過度の音量による聴覚障害を避けるために、自分の聴覚の状態に合わせて調整してください。次は私がお手伝いさせてください

CrystalDiskMark は、シーケンシャルおよびランダムの読み取り/書き込み速度を迅速に測定する、ハード ドライブ用の小型 HDD ベンチマーク ツールです。次に、編集者が CrystalDiskMark と Crystaldiskmark の使用方法を紹介します。 1. CrystalDiskMark の概要 CrystalDiskMark は、機械式ハード ドライブとソリッド ステート ドライブ (SSD) の読み取りおよび書き込み速度とパフォーマンスを評価するために広く使用されているディスク パフォーマンス テスト ツールです。 ). ランダム I/O パフォーマンス。これは無料の Windows アプリケーションで、使いやすいインターフェイスとハード ドライブのパフォーマンスのさまざまな側面を評価するためのさまざまなテスト モードを提供し、ハードウェアのレビューで広く使用されています。

クラウド ストレージは今日、私たちの日常生活や仕事に欠かせない部分になっています。中国有数のクラウド ストレージ サービスの 1 つである Baidu Netdisk は、強力なストレージ機能、効率的な伝送速度、便利な操作体験により多くのユーザーの支持を得ています。また、重要なファイルのバックアップ、情報の共有、オンラインでのビデオの視聴、または音楽の聴きたい場合でも、Baidu Cloud Disk はニーズを満たすことができます。しかし、Baidu Netdisk アプリの具体的な使用方法を理解していないユーザーも多いため、このチュートリアルでは Baidu Netdisk アプリの使用方法を詳しく紹介します。まだ混乱しているユーザーは、この記事に従って詳細を学ぶことができます。 Baidu Cloud Network Disk の使用方法: 1. インストール まず、Baidu Cloud ソフトウェアをダウンロードしてインストールするときに、カスタム インストール オプションを選択してください。

MetaMask (中国語ではリトル フォックス ウォレットとも呼ばれます) は、無料で評判の高い暗号化ウォレット ソフトウェアです。現在、BTCC は MetaMask ウォレットへのバインドをサポートしており、バインド後は MetaMask ウォレットを使用してすぐにログイン、値の保存、コインの購入などが可能になり、初回バインドで 20 USDT のトライアル ボーナスも獲得できます。 BTCCMetaMask ウォレットのチュートリアルでは、MetaMask の登録方法と使用方法、および BTCC で Little Fox ウォレットをバインドして使用する方法を詳しく紹介します。メタマスクウォレットとは何ですか? 3,000 万人を超えるユーザーを抱える MetaMask Little Fox ウォレットは、現在最も人気のある暗号通貨ウォレットの 1 つです。無料で使用でき、拡張機能としてネットワーク上にインストールできます。

NetEase Mailbox は、中国のネットユーザーに広く使用されている電子メール アドレスとして、その安定した効率的なサービスで常にユーザーの信頼を獲得してきました。 NetEase Mailbox Master は、携帯電話ユーザー向けに特別に作成された電子メール ソフトウェアで、電子メールの送受信プロセスが大幅に簡素化され、電子メールの処理がより便利になります。 NetEase Mailbox Master の使い方と具体的な機能について、以下ではこのサイトの編集者が詳しく紹介しますので、お役に立てれば幸いです。まず、モバイル アプリ ストアで NetEase Mailbox Master アプリを検索してダウンロードします。 App Store または Baidu Mobile Assistant で「NetEase Mailbox Master」を検索し、画面の指示に従ってインストールします。ダウンロードとインストールが完了したら、NetEase の電子メール アカウントを開いてログインします。ログイン インターフェイスは次のとおりです。
