Anime.js の概要

Anime.js は、シンプルで効率的な API を備えた軽量の JavaScript ライブラリです。 Anime.js は JavaScript オブジェクト、CSS、DOM 要素で動作し、使いやすいです。

伝統的に、要素のスタイルを徐々に変更することでアニメーションを作成します。このようなアクションは JavaScript で実現できますが、最も単純なアニメーションでさえ開発が難しく、時間がかかります。

Anime.js はさまざまなツールを提供することでアニメーションを簡単にします。タイミングとユーザー入力を調整する機能を提供し、同じオブジェクト上で同時に実行される多くのアニメーションをサポートします。

最も一般的なブラウザは Anime.js もサポートしています。

Anime.jsインストール部分

• 以下のリンクから anime.min.js ファイルをダウンロードした後、直接使用できます -

リーリー

• 「anime.js CDN」を検索してスクリプト タグに貼り付けることでリンクを見つけることができます

リーリー

Anime.jsの基本構文

anime.js のインストール方法とその基本について説明しました。次に、anime.js の構文に移りましょう -

リーリー

上記の構文では、Anime.js が提供する anime() 関数を使用してアニメーションを作成します。anime() 関数は、アニメーションのプロパティを含む JavaScript オブジェクトをパラメータとして受け取ります。

ここで、Anime.js の基本構文の各用語について詳しく説明します -

＃＃＃目標＃＃＃

アニメーション化したいコンポーネントへの参照はターゲットに含まれており、HTML タグ、クラスまたは ID 要素、CSS セレクター、単一の DOM ノードまたは DOM ノードの配列、オブジェクトの形式をとることができます。 JavaScript を使用して作成され、少なくとも数値プロパティと最初の 3 つの値のいずれかで構成される配列が含まれます。

属性

ターゲットを指定した後、アニメーション化したいプロパティを指定します。これらのプロパティには、アニメーション化できる CSS、JS、SVG プロパティを含めることができます。

属性パラメータ

プロパティ パラメーターには、アニメーションのタイミングに大きく影響する要素が含まれます。この属性パラメータは、継続時間、遅延、終了遅延、イージング、ターンなどの複数の特性パラメータをカバーします。

アニメーションパラメータ

アニメーションの前後の動きは、アニメーション パラメーターによって制御されます。これには、方向、ループ、自動再生などのアニメーション関連のオプションが含まれます。

コントロール

アニメーションをインタラクティブにするために、Anime.js は制御ツールも提供します。これらのテクニックの開始、一時停止、反転、再開の例をいくつか示します。

＃＃＃例＃＃＃

この例では、特定の幅と高さの寸法を持ついくつかの div 要素を作成します。 CSS を使用して特定の背景色を追加します。まず JavaScript 部分で、Anime 関数に必要なものをすべて追加し、プロパティを持つオブジェクトを渡します

これですべてが完了しました。主な目標は、目的の要素 (ここでは div ブロック) でアニメーション化することです。この例では、初期位置から X 軸に向かって移動する TranslationX を使用します。

リーリー

上記のコードでは、まず HTML コードの主要な構造を定義し、コードの先頭にある「src」タグを使用して anime.js ライブラリをコードに追加します。まず本文で、アニメーション化する div 要素を定義します。次に、スクリプト タグ内で、必要なアニメーションのタイプを定義します。これは、指定された緑色のブロックが、定義された時間内にその位置から別の位置に移動するもので、これによりブロックのサイズも変更されます。

＃＃＃例＃＃＃

前の例では、ボックスを定義し、アニメーション化して高さと幅を増やしました。ここでは、高さと幅を変更しますが、幅を増やし、高さを減らします。

リーリー

上記のコードでは、まず HTML コードの主要な構造を定義し、コードの先頭にある「src」タグを使用して anime.js ライブラリをコードに追加します。まず本文で、アニメーション化する div 要素を定義します。次に、スクリプト タグ内で、必要なアニメーションのタイプを定義します。つまり、指定した緑色のブロックをその位置から別の位置へ、定義された時間内に移動します。これにより、ブロックのサイズも変更されます。つまり、高さの減少から増加へと変化します。幅のサイズです。

＃＃＃例＃＃＃

この例では、anime.js ライブラリを使用して、長方形のボックスを円にアニメーション化します。変更の継続時間を 3000 秒に設定し、ループで実行します。コードを見てみましょう -

リーリー

上記のコードでは、まず HTML コードの主要な構造を定義し、コードの先頭にある「src」タグを使用して anime.js ライブラリをコードに追加します。まず本文で、アニメーション化する div 要素を定義します。次に、script タグ内で、必要なアニメーションのタイプを定義します。これは、指定された青いボックスが 3 秒または 3000 ミリ秒で青い円に移動するものです。

＃＃＃結論は＃＃＃

このチュートリアルでは、anime.js について例を示しながら詳しく説明しました。 Anime.js は、シンプルで効率的な API を備えた軽量の JavaScript ライブラリです。 Anime.js は JavaScript オブジェクト、CSS、DOM 要素で動作し、使いやすいです。従来、要素のスタイルを徐々に変更することでアニメーションを作成します。このようなアクションは JavaScript で実現できますが、最も単純なアニメーションでさえ開発が難しく、時間がかかります。

以上がAnime.js の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。