Anime.jsを使用したJavaScriptベースのアニメーション、パート1：ターゲットとプロパティ

anime.js、WebページでのCSS属性、SVG、またはDOM属性のアニメーションの作成に使用できる軽量JavaScriptベースのアニメーションライブラリ。このライブラリを使用すると、アニメーションの側面を制御でき、ターゲット要素またはアニメーション化されるプロパティを指定する複数の方法を提供します。

アニメーションが再生される順序と、異なる要素が同期する順序を完全に制御できます。このライブラリは、すべての最新のブラウザをサポートしています。

このチュートリアルシリーズでは、Anime.jsのすべての機能をガイドして、実際のプロジェクトに簡単に適用できるようにします。

トピックに飛び込む前に、最初にライブラリをインストールしましょう。次のコマンドを実行して、NPMまたはBowerを使用してインストールできます。

ライブラリをダウンロードしてプロジェクトに含めるか、CDNでホストされているライブラリの最新バージョンに直接リンクすることもできます。

npm install animejs
bower install animejs

インストールが成功した後、このライブラリを使用して要素に興味深いアニメーションを追加できます。ライブラリの基本から始めて、一度に1つの特定の領域に焦点を当てます。

ターゲット要素を指定します

anime.jsを使用してアニメーションを作成するには、NodeListを呼び出す必要があります。

SPANタグの値としてDOMノードまたはNodeListを使用することもできます。これまでのところ、HTMLでラッパーを手動で作成することでこれを行ってきました。次に、JavaScriptを取得してタグを処理する方法を学びます。タイトル要素は次のとおりです

タイトルには5つの別々の単語があり、各単語を独自のスパンラベルにラップします。次に、最終結果をSpanタグに割り当てます。これはゼロです。これは、タイトルをスタイリングし、H1スパンをセレクターとして使用するために使用するCSSです。 Translatey属性の最終値。また、アニメーションの初期化では、インターリーブの遅延も使用します。このシリーズの次のチュートリアルでは、Anime.jsのインターリーブの詳細について詳しく説明します。

<h1>Have a Great Day Ahead</h1>

これは、私たちが作成したばかりのグリーティングアニメーションを示すCodepenデモンストレーションです。 [

]をクリックして、アニメーションを再起動するには

ボタンに挨拶します。

このチュートリアルでは、Anime.jsでターゲット要素を選択するすべての方法と、ターゲット要素に関連するさまざまなCSS属性と属性をアニメーション化する方法を学びました。ただし、この時点では、実際のアニメーションに関連するものを制御できません。

このシリーズの次のチュートリアルでは、さまざまな属性のアニメーションの緩和、遅延、および持続時間を制御する方法（グループおよび個別制御）を学習します。次に、各要素のこれらすべてのアニメーションパラメーターを制御する方法を学びます。

以上がAnime.jsを使用したJavaScriptベースのアニメーション、パート1：ターゲットとプロパティの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。