Anime.jsを使用したJavaScriptベースのアニメーション、パート2：パラメーター

anime.jsアニメーションチュートリアルパート2：パラメーターの詳細な説明。チュートリアルの最初の部分では、アニメーション化されたターゲット要素とアニメーション化されたCSSおよびDOMプロパティを指定する方法を学びました。以前のアニメーションは非常に基本的であり、すべてのターゲット要素は一定の速度で一定の距離を移動するか、丸い半径を変更しました。

時々、よりリズミカルな方法でターゲット要素をアニメーション化する必要がある場合があります。たとえば、左から右に移動するには10の異なる要素が必要になる場合があり、各要素のアニメーションは開始の間に500ミリ秒遅れます。同様に、各要素の位置に基づいてアニメーションの期間を増やしたり減らしたりすることができます。

このチュートリアルでは、Anime.jsを使用して、特定のパラメーターを使用して異なる要素のアニメーション時間を正確に制御する方法を示し、それにより、単一要素またはすべての要素のアニメーションシーケンス再生順序を制御します。

属性パラメーター

これらのパラメーターを使用すると、単一の属性または属性グループの期間、遅延、および緩和効果を制御できます。

メソッドstagger()

これまでのところ、関数を使用して、ターゲット要素のアニメーション遅延または持続時間に異なる値を渡しました。また、同じ機能を取得することもできます。これにより、基本的には、複数の要素間でアニメーションがどのように発生するかを基本的に制御できます。 2つのパラメーターを受け入れます。 1つ目は適用する値であり、2番目は、インターリーブの適用方法を決定する多くのパラメーターを備えたオブジェクトです。

stagger()以下は、1000に設定されたパラメーターのインターリーブを示す例です。例は次のとおりです

最後の要素の先頭にゼロ以外の持続時間値を適用する必要がある場合はどうなりますか？この場合、これを達成するためにstartメソッドの次のパラメーターを使用できます。ご覧のとおり、最終結果は違いはありません。

// 持续时间从1000开始，每次增加800
duration: function(target, index) {
    return 1000 + index * 800;
},

// 使用stagger()实现等效功能
duration: anime.stagger(800, {"start": 1000})

stagger()

要約

このチュートリアルでは、Anime.jsのターゲット要素のアニメーションを制御するために使用できるさまざまなタイプのパラメーターを学びました。属性パラメーターは、単一の属性のアニメーションを制御するために使用されます。 stagger

それらを使用して、単一の要素に対してアニメーションが再生される順序を制御できます。関数パラメーターを使用すると、グループ全体に比べて単一の要素のアニメーション時間とレートを制御できます。アニメーションパラメーターを使用すると、さまざまな要素に対してアニメーションの再生方法を制御できます。

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