Anime.jsを始めましょう

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

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

コアポイント：

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

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

<!-- 下载后引入 -->
<🎜>

<!-- 使用CDN -->
<🎜>

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

let myAnimation = anime({
  /* 动画细节 */
});

ターゲット：

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

になります この例では、

let animation = anime({
  targets: 'div', // 目标
  translateX: 100, // 属性
  borderRadius: 50, // 属性
  duration: 2000, // 属性参数：持续时间 2 秒
  easing: 'linear', // 属性参数：线性缓动
  direction: 'alternate' // 动画参数：交替方向
});

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

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

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

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

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