anime.js：軽量JavaScriptアニメーションライブラリの詳細(xì)な説明

anime.jsは、使いやすさ、簡(jiǎn)潔なAPI、強(qiáng)力な機(jī)能で知られる優(yōu)れたJavaScriptアニメーションライブラリです。 IE/Edge 11を含むすべての最新のブラウザとコンパクトで互換性があります。ドキュメントは簡(jiǎn)潔ですが、その構(gòu)造は明確で簡(jiǎn)単に開始できます。この記事では、使用方法について詳しく説明します。

コアポイント：

• Anime.jsは、CSSプロパティ、SVG、DOMプロパティ、JavaScriptオブジェクトをサポートする軽量で使いやすいJavaScriptアニメーションライブラリであり、さまざまなWebアニメーションプロジェクトの能力を備えています。
• anime.jsを使用して、スクリプトタグを使用してCDNからインポートするか、ライブラリファイルを直接ダウンロードしてから、anime()関數(shù)のターゲットとプロパティを定義してアニメーションを作成します。
• anime.jsの強(qiáng)力なタイムライン機(jī)能により、複數(shù)のアニメーションを同期させることができます。これは、複雑なアニメーションシーケンスにとって特に重要です。
このライブラリは、キーフレームとインターレース効果を使用してアニメーションの詳細(xì)とコントロールを強(qiáng)化し、開発者に動(dòng)的で視覚的に魅力的なWebアニメーションを作成するためのツールを提供します。
• よりインタラクティブで応答性の高いアニメーションを作成するために、Anime.jsをイベントリスナーと統(tǒng)合して、ユーザーアクション（クリックやマウスの動(dòng)きなど）に基づいてアニメーションをトリガーし、Webページでのユーザーエンゲージメントを強(qiáng)化できます。
anime.jsの初心者：

最初に、anime.jsファイルをHTMLページにダウンロードして含めます：

または、cdn：

<!-- 下載后引入 -->
<??>

の最新バージョンを使用します

アニメーションを作成し、オブジェクトをパラメーターとして受け入れる

<!-- 使用CDN -->
<??>

関數(shù)を使用し、このオブジェクトのすべてのアニメーションの詳細(xì)を説明します。

anime()アニメーション屬性は、4つのカテゴリに分かれています

let myAnimation = anime({
  /* 動(dòng)畫細(xì)節(jié) */
});

ターゲット：

アニメーションへの要素參照。 CSSセレクター（div、#square、.rectangle）、domノードまたはノードのリスト、または純粋なJavaScriptオブジェクトです。また、上記のタイプの配列の組み合わせでもあります。

• プロパティ：CSS屬性、JavaScriptオブジェクト屬性、DOM屬性、およびSVG屬性など、アニメーション化できるプロパティ。
• プロパティパラメータ：期間、遅延、緩和機(jī)能などのプロパティに関連するパラメーター。
• アニメーションパラメーター：方向、ループなどのアニメーションに関連するパラメーター。
• 実用的な例：

（Codepenサンプルリンクはこちら）

になります この例では、

let animation = anime({
  targets: 'div', // 目標(biāo)
  translateX: 100, // 屬性
  borderRadius: 50, // 屬性
  duration: 2000, // 屬性參數(shù)：持續(xù)時(shí)間 2 秒
  easing: 'linear', // 屬性參數(shù)：線性緩動(dòng)
  direction: 'alternate' // 動(dòng)畫參數(shù)：交替方向
});

1. 緑の正方形（様式化されたdiv）を選択します。
2. それを円に変換しながら、左に100ピクセルを移動(dòng)します。
3. これを2秒でスムーズに発生するように設(shè)定します（線形は、アニメーションに緩和が適用されないことを意味します）。
4. 方向プロパティを代替に設(shè)定することにより、Animationが完了した後にDIV要素に初期位置と形狀を返すように指示します。 Anime.jsは、アニメーションを逆に再生することでこれを行います。

プロパティ値を指定する場(chǎng)合、ユニットを使用する必要はないことに注意してください。元の値にユニットがある場(chǎng)合、アニメーション値に自動(dòng)的に追加されます。ただし、特定のユニットを使用する場(chǎng)合は、明示的に追加する必要があります。

より複雑なアニメーション：

以下は、キーフレームとタイムラインを使用したスイングアニメーション、バッテリー充電アニメーション、アニメーションなど、より複雑なアニメーションの例です。 （Codepenサンプルリンクと対応するコードスニペットはここに含まれ、コードは元のドキュメントの構(gòu)造と同様に詳細(xì)に説明されます）

結(jié)論：

Anime.jsは、さまざまなアニメーションを作成するために使用できるシンプルで強(qiáng)力なアニメーションエンジンです。この記事がAnime.jsをよりよく理解し、使用するのに役立つことを願(yuàn)っています。 （Anime.jsまたは関連するリソースの將來の開発に関する追加情報(bào)をこちらで追加できます）

以上がAnime.jsを始めましょうの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。