フロントエンドの動的エフェクトの説明と実戦

Now Live: LF AI Foundation が最初の AICON 2022 を主催 >>>

著者: vivo インターネット フロントエンド チーム - ZhaoJie

この記事では、アニメーション システム全体をさまざまな角度から分類し、さまざまなフロント エンド アニメーションの実装方法を紹介し、最後に、実際の開発におけるシーンごとのアニメーション オプションをまとめます。

1. 背景

フロントエンドのアニメーション シーンはもっと必要

多くのアニメーション シーンに対する技術的な実装ソリューションの選択は、比較的あいまいです。

各アニメーション方式の長所と短所、および該当するシナリオはあいまいです

既存のアニメーション ライブラリが多すぎて、どれを選択すればよいかわかりません

主流のアニメーション ライブラリの適用シーンが曖昧

まず、アニメーション システム全体を明確に理解できるように、さまざまな角度からアニメーション システム全体を分類してみましょう。

2.分類

2.1 使用角度

まず、アニメーションの目的やビジネスの観点から区別し、通常のアニメーションをディスプレイアニメーションとインタラクティブアニメーションに分けます。

2.1.1 表示アニメーション

GIF やビデオに似ています。たとえば、宝箱を開けたときに、結果を待っている元のブラントを置き換える遷移アニメーションを追加します。

実際の使用シナリオでは、GIF 画像、キャンバス、CSS3 アニメーションなどを使用するなど、表示アニメーションを実装する方法は多数ありますが、最終的な出力結果はインタラクティブではありません。つまり、アニメーションの開始状態から終了までです。ユーザーはこのプロセスを認識できますが、参加することはできません。

2.1.2 インタラクティブなアニメーション

ユーザーは自分で参加します. インタラクティブなアニメーションの場合, アニメーション再生の特定の時間ノードで対応する操作をトリガーし, ユーザーに参加させることができます. 最も一般的な例は赤い封筒の雨です.ユーザーの経験だけでなく、当社の製品の多様性を高めることができます。

ただし、インタラクティブ アニメーションがよく直面する問題は、ネイティブ コードを介してインタラクティブ アニメーションを実装するのが非常に複雑であることです. 同時に、パフォーマンスと互換性は真剣に検討する必要がある問題です. より良い解決策は、関連するフレームワークを探すことです.

2.2 技術的な視点を描く

アニメーションの作成にどのような方法が使用されても、フロントエンド ページへの最終的なプレゼンテーションは、次の 3 つの形式にすぎません。

1. キャンバス

2. 分周

3. SVG

追伸：動画も簡単に使えますが、アニメの再生シーンを固定しないと、モバイル動画はアプリや機種、システムによって再生表示が異なり、色々と踏んでしまいやすいです。ピット。

2.2.1 異なるレンダリング技術のパフォーマンスの違い

キャンバス

• 高効率、優れたパフォーマンス、高い制御性、ビットマップしか処理できない、一定のメモリ使用量

• 解像度に依存

• イベント ハンドラはサポートされていません

• テキストレンダリング機能が弱い

• 結果の画像を .png または .jpg 形式で保存する機能

• 多くのオブジェクトが頻繁に再描画される、グラフィックを多用するゲームに最適

分周

• CSS 制御の DOM アニメーション、JS 制御の DOM アニメーションを含む

• 数が少なく複雑さの少ない単純なアニメーションに適しています

SVG

• ベクトル グラフィックスを歪みなく処理する

• 解像度に依存しない

• サポート イベント ハンドラー

• レンダリング領域が大きいアプリケーション (Google マップなど) に最適

• 複雑性が高いとレンダリングが遅くなります (DOM を過度に使用するアプリケーションは高速ではありません)。

• ゲーム用途には不向き

2.2.2 キャンバスと SVG の比較

一言要約:すべて 2D グラフィックス、svg はベクトル図、canvas はビットマップです。キャンバスはピクセルごとにレンダリングされるため、ゲームに適しています。

SVG

• SVG はベクター グラフィックスを描画し、ズームは表示に影響しないため、レンダリング エリアが大きいアプリケーション (Google マップなど) に最適です。

• SVG は、XML を使用して 2D グラフィックスを記述するための言語です。

• SVG は XML に基づいています。つまり、SVG DOM のすべての要素が利用可能です。JavaScript イベント ハンドラーを要素にアタッチできます。

• SVG では、描画された各グラフィックはオブジェクトと見なされます。SVG オブジェクトのプロパティが変更された場合、ブラウザはグラフィックを自動的に再現できます。

キャンバス

• Canvas は JavaScript を使用して 2D グラフィックスを描画します。

• キャンバスはピクセルごとにレンダリングされます。

• Canvas では、グラフィックが描画されると、ブラウザの注意を引き続けません。その位置が変更された場合、グラフィックで覆われている可能性のあるオブジェクトを含め、シーン全体も再描画する必要があります。

• Canvas は 1 つの DOM ノードしか占有せず、花火や雪などの多くの動く要素を含むアニメーションを実行する場合、CSS/SVG よりもパフォーマンスが向上します。

性能比較

• 一般に、画面サイズが大きくなると、より多くのピクセルを描画する必要があるため、キャンバスは劣化し始めます。

• 画面上のオブジェクトの数が増えると、これらのオブジェクトを常に DOM に追加しているため、SVG は劣化し始めます。

• これらの測定値は必ずしも正確ではなく、実装とプラットフォーム、完全にハードウェア アクセラレーションされたグラフィックスを使用するかどうか、および JavaScript エンジンの速度によって異なる場合があります。

2.3 アニメーションタイプの角度

フロントエンドの動的開発、最初に決定する必要があるのは

アニメーションの使い方→アニメーションの種類の確認→作画技法の確認→アニメーションの実装方法の確認。

アニメーションの最終的なプレゼンテーションには 3 つのキャリア (描画技術) がありますが、アニメーションを実現するには多くの方法があります.アニメーションの種類からアニメーションの実装について説明する必要があります。

(1) コマ送りアニメーション（シーケンスコマアニメーション）

• GIF の実装

• CSS実装（アニメーション）

• JS+DOM の実装

• JS+キャンバスの実装

(2)トゥイーンアニメーション（トゥイーンアニメーション\キーフレームアニメーション）

• CSS 実装 (トランジション、アニメーションなど) はいくつかのイージング関数を使用します

• JS の実装

(3)SVGアニメーション

• XML 形式を使用してグラフを定義する

• AI などの SVG 編集ツールを使用して SVG 画像を生成し、anime.js や GSAP などの既存のライブラリと連携してアニメーション制作を行うことができます。

(4) 骨格アニメーション

• 通常、Spine や DragonBones などのツールを使用して、対応するリソース イメージと JSON アニメーション構成リソースを使用前にエクスポートします。

(5) 3Dアニメーション

• DOM 操作は CSS 3D で実装されています。(パースペクティブ プロパティ、css3d-engine )

• シーン構築用のWebGL（Three.jsなど）

• Blender や Maya で 3D モデルのアニメーションを作成した後、エクスポートして使用することができます。

2.3.1 コマ送りアニメーション（シーケンスコマアニメーション）

コマ送りアニメーションは、時間枠にコマ送りのコンテンツを描画することです.コマ送りの絵画であるため、コマ送りアニメーションは柔軟性が高く、ほとんどすべてのコンテンツを表現できます.

フレームごとのアニメーションのフレーム シーケンスの内容が異なるため、制作の負担が増えるだけでなく、大量の最終出力ファイルが生成されますが、その利点も明らかです。ムービーの再生モードに似ているため、非常に繊細なアニメーションを実行するのに非常に適しており、3D 効果、人や動物が鋭く向きを変えるなどです。

では、これらの静的な画像をすばやくループして再生し、動的なアニメーション効果を形成する、フレームごとのアニメーションの実現の核心は何ですか。フレームアニメーションです。

2.3.1.1 GIF の実装

フレームアニメーションをGIF画像にエクスポートすることができ、GIF画像は連続して再生され、一時停止することはできません. 低コストで使いやすい細部のアニメーションを実現するためによく使用されます. しかし、その欠点も明らかです。

1. 画質に関しては、GIF がサポートする色数が少なく (最大 256 色)、アルファ透明度のサポートが不十分で、画像のエッジがギザギザになります。

2. インタラクションに関しては、再生、一時停止、および再生時間を直接制御できず、柔軟性が低くなります。

3. パフォーマンスの面では、GIF はページの定期的な描画を引き起こし、パフォーマンスが低下します。

2.3.1.2 CSS の実装

CSS3 フレーム アニメーションは、私たちが今日焦点を当てる必要があるソリューションです. コアは、CSS3 でアニメーション アニメーションを使用することです, 正確には, animation-timing-function のステップ関数 steps(number_of_steps, direction) を使用して、連続的なアニメーションを実現することです.フレームごとのアニメーションの再生。

フレーム アニメーションの実現原理は、ビジュアル内の画像の内容を連続的に切り替え、視覚的保持の生理学的現象を利用して、連続再生のアニメーション効果を実現することです. CSS3 フレーム アニメーションを作成するためのいくつかのスキームを紹介しましょう.

(1) 動画アドレスsrcを連続で切り替える(非推奨)

要素の背景に画像を配置し（background-image）、background-image の値を変更してフレームを切り替えます。ただし、この方法には次のような欠点があるため、この解決策はお勧めしません。

• 複数の画像が複数の HTTP リクエストにつながる

• 各画像の最初のロードでは、画像を切り替えるときにちらつきが発生します

• ファイル管理が苦手

(2) スプライト画像の位置を連続的に切り替える(推奨)すべてのコマアニメーション画像を1つのスプライト画像にマージし、background-positionの値を変更することでアニメーションのコマ切り替えを実現します。次の 2 つの手順で行います。

第一歩：

 アニメーション フレームをスプライト イメージにマージします. スプライト イメージの要件は、上記の資料の準備で確認できます. たとえば、次のアニメーション スプライト イメージは合計 20 フレームです.

 

(画像はフレームアニメーションの各種実装と性能比較より)

ステップ2：

ステップステップ機能を使用してスプライトマップの位置を切り替えます

1つ書く：

<div class="sprite"></div>


.sprite {
    width: 300px;
    height: 300px;
    background-repeat: no-repeat;
    background-image: url(frame.png);
    animation: frame 333ms steps(1,end) both infinite;
}
@keyframes frame {
    0% {background-position: 0 0;}
    5% {background-position: -300px 0;}
    10% {background-position: -600px 0;}
    15% {background-position: -900px 0;}
    20% {background-position: -1200px 0;}
    25% {background-position: -1500px 0;}
    30% {background-position: -1800px 0;}
    35% {background-position: -2100px 0;}
    40% {background-position: -2400px 0;}
    45% {background-position: -2700px 0;}
    50% {background-position: -3000px 0;}
    55% {background-position: -3300px 0;}
    60% {background-position: -3600px 0;}
    65% {background-position: -3900px 0;}
    70% {background-position: -4200px 0;}
    75% {background-position: -4500px 0;}
    80% {background-position: -4800px 0;}
    85% {background-position: -5100px 0;}
    90% {background-position: -5400px 0;}
    95% {background-position: -5700px 0;}
    100% {background-position: -6000px 0;}
}

上記のアニメーションについて質問がありますか?

質問 1:キーフレームが詳細に定義されたので、steps 関数を使用して線形変化を直接定義することはできませんか?

animation: frame 10s linear both infinite;

このように定義すると、アニメーションはステップごとに実行されるのではなく、背景画像の位置が連続的に変化します。これは、以下に示すように、切り替え効果ではなく移動効果です。

質問 2 :  20 ステップに設定する必要があるのに、なぜ 1 ステップになったのですか?

ここでは、最初に animation-timing-function プロパティを見ていきます。CSS animation-timing-function プロパティは、各アニメーション サイクル中に CSS アニメーションが実行されるリズムを定義します。

要約すると、アニメーション サイクルを詳細に定義しているため、つまり、0% から 5% の間で 1 回変化し、5% から 10% の間で 1 回変化することがわかります。このように書いています。

2つ書く：

<div class="sprite"></div>.sprite {    width: 300px;
    height: 300px;
    background-repeat: no-repeat;
    background-image: url(frame.png);
    animation: frame 333ms steps(20) both infinite;
}
@keyframes frame {    0% {background-position: 0 0;}//可省略
    100% {background-position: -6000px 0;}
}

ここではキーフレームの開始と終了、つまりキーフレームの期間を定義しますが、各フレームの表示を細かく定義するわけではないので、0%~100%の区間を20段階に分けて表示する必要があります。ステージ展示。

(3)スプライト画像の位置を連続的に移動する(携帯端末推奨)

スプライト画像の位置を切り替える処理が transform:translate3d() に置き換わった以外は基本的に2つ目と同じですが、overflow: hidden; のレイヤーが追加され、transformを使用するとGPUアクセラレーションが有効になり、マシンが改善されますレンダリング効果を向上させ、モバイル端末でのフレーム アニメーションのジッターの問題を効果的に解決します。

<div class="sprite-wp">    <div class="sprite"></div></div>

.sprite-wp {
    width: 300px;
    height: 300px;
    overflow: hidden;
}
.sprite {
    width: 6000px;
    height: 300px;
    will-change: transform;
    background: url(frame.png) no-repeat center;
    animation: frame 333ms steps(20) both infinite;
}
@keyframes frame {
  0% {transform: translate3d(0,0,0);}
    100% {transform: translate3d(-6000px,0,0);}
}

steps() 関数の詳細な説明

上記のコードから、CSS 実装のコアは、animation-timing-function イージング関数のステップ関数 steps (number_of_steps、方向) を使用して、フレームごとのアニメーションの連続再生を実現することであることがわかります。

次に、steps() 関数を見てみましょう。

steps は、2 つの引数を持つステップ関数を指定します。

• 最初のパラメーターは、関数の間隔の数を指定します (正の整数である必要があります)。

• 2 番目のパラメータはオプションで、各間隔の開始時または終了時にステップ変更を指定します。開始と終了の 2 つの値を受け入れます。デフォルトは終了です。

• start の最初のフレームは最初のアニメーションの終わりであり、end の最初のフレームは最初のアニメーションの始まりです。

steps 関数に加えて、animation-timing-function には、フレームごとのアニメーションに関連する 2 つの属性値 step-start と step-end もあります。

• step-start は steps(1,start) と同等です

• step-end は steps(1,end) と同等です

2.3.1.3 JS の実装

(1) img の src 属性スイッチを JS で制御する (非推奨)

上のCSS3フレームアニメーションのスイッチング要素のbackground-image属性のように、リクエストが複数発生するなどの問題が発生するため、この解決策はお勧めしませんが、これは解決策です。

(2) キャンバス画像の描画をJSで制御

キャンバスを介してフレーム アニメーションを作成する原理は、drawImage メソッドを使用してキャンバスに画像を描画することであり、常に消去と再描画を行うことで、必要な効果を得ることができます。

<canvas id="canvas" width="300" height="300"></canvas>(function () {    var timer = null,
        canvas = document.getElementById("canvas"),
        context = canvas.getContext('2d'),
        img = new Image(),
        width = 300,
        height = 300,
        k = 20,
        i = 0;
    img.src = "frame.png";    function drawImg() {
        context.clearRect(0, 0, width, height);
        i++;        if (i == k) {
            i = 0;
        }
        context.drawImage(img, i * width, 0, width, height, 0, 0, width, height);        window.requestAnimationFrame(drawImg);
    }
    img.onload = function () {        window.requestAnimationFrame(drawImg);
    }
})();

上記のアニメーション効果は、トリミングされた画像の X 座標位置を変更することによって実現されます。または、次のように、キャンバスに配置された画像の座標位置を変更することによっても実現できます。

context.drawImage(img, 0, 0, width*k, height,-i*width,0,width*k,height);

(3) JS による CSS プロパティ値の変更の制御

この方法は先ほどのCSS3のフレームアニメーションと同じで、要素の背景画像のアドレスをbackground-imageにJSで切り替える方法と、要素の背景画像を位置background-positionにJSで切り替える方法と、最後の 1 つは JS transform:translate3d() を介して要素を移動することです。最初の 1 つは導入されません。複数のリクエストなどの問題も発生するためです。使用は推奨されません。後者の 2 つはここで実装されています。

要素の背景画像の位置を切り替える background-position

.sprite {    width: 300px;
    height: 300px;
    background: url(frame.png) no-repeat 0 0;
}

<div class="sprite" id="sprite"></div>(function(){    var sprite = document.getElementById("sprite"),
      picWidth = 300,
      k = 20,
      i = 0,
      timer = null;    // 重置背景图片位置
    sprite.style = "background-position: 0 0";    // 改变背景图位置
    function changePosition(){
        sprite.style = "background-position: "+(-picWidth*i)+"px 0";
        i++;        if(i == k){
            i = 0;
        }        window.requestAnimationFrame(changePosition);
    }    window.requestAnimationFrame(changePosition);
})();

要素の背景画像の位置を移動 transform:translate3d()

.sprite-wp {   width: 300px;
    height: 300px;
    overflow: hidden;
}
.sprite {    width: 6000px;
    height: 300px;
    will-change: transform;
    background: url(frame.png) no-repeat center;
}

<div class="sprite-wp">    <div class="sprite" id="sprite"></div></div>

(function () {
    var sprite = document.getElementById("sprite"),
        picWidth = 300,
        k = 20,
        i = 0,
        timer = null;
    // 重置背景图片位置
    sprite.style = "transform: translate3d(0,0,0)";
    // 改变背景图移动
    function changePosition() {
        sprite.style = "transform: translate3d(" + (-picWidth * i) + "px,0,0)";
        i++;
        if (i == k) {
            i = 0;
        }
        window.requestAnimationFrame(changePosition);
    }
    window.requestAnimationFrame(changePosition);
})();

2.3.1.4 パフォーマンス分析

Chrome ブラウザーのさまざまなツールを使用して、各スキームの FPS、CPU 使用率、GPU 使用率、スクリプト、レンダリング、ペイント、およびメモリ使用量を確認し、次のデータを取得しました。

上記のデータを分析することにより、次の点を引き出すことができます。

1. CSS transform:translate3d() スキームを除いて、他のスキームの FPS は 60FPS の滑らかなレベルに達することができますが、このスキームの FPS はそれほど低くはありません。

2. 最も CPU を集中的に使用しないスキームは、CSS transform:translate3d() スキームです。

3. GPU 使用率が最も低いソリューションは、JS キャンバス描画ソリューションです。

4. CSS スキームには、スクリプトのオーバーヘッドがありません。

5. レンダリングが最も少ないのは、CSS transform:translate3d() スキームです。

6. 最小限の絵画は、CSS transform:translate3d() スキームです。

7. 各プログラムのメモリ使用量はそれほど違いはありません。

結論: 7 つの指標の中で、CSS transform:translate3d() スキームが最も低い 4 つの指標を達成していることがわかります. この観点から、CSS フレーム アニメーションにこのスキームを選択するすべての理由があります.

 

2.3.2 トゥイーンアニメーション (トゥイーンアニメーション\キーフレームアニメーション)

トゥイーン アニメーションは、アニメーションの基本的な形式の 1 つであり、中間フレーム アニメーション、グラデーション アニメーションとも呼ばれ、アニメーションの重要な状態、つまりキー フレームを参照し、キー フレーム間の遷移プロセスのみが必要です。コンピューターによって処理およびレンダリングされるアニメーションの一種。

率直に言えば、アニメーションを行う場合、アニメーションの状態をいくつかの特別な瞬間に指定するだけでよく、残りの状態はコンピューターによって自動的に計算されて補完されます。

トゥイーン アニメーションを実現する一般的な手段には、主に次のようなものがあります。

• CSS3 アニメーション:アニメーション (steps() 以外の時間関数) プロパティを使用して、各キーフレーム間にアニメーション トゥイーンを挿入します。

• CSS3 トランジション:アニメーションとは異なり、トランジションは最初と最後の瞬間に 2 つのキー フレーム状態のみを設定できます。

• JavaScript によるアニメーション化:たとえば、JavaScript アニメーション ライブラリまたはフレームワーク、Anime.js または TweenJS (CreateJS スイートの 1 つ) など。また、Flash業界で有名なGreenSockが立ち上げたGSAP（GreenSock Animation Platform）も、Javascriptアニメーションのサポートを新たに導入しました。

2.3.2.1 CSS の実装

(1)遷移アニメーション

Transition を使用すると、CSS プロパティ値が特定の時間間隔内、つまり指定された要素の初期状態と終了状態の間で滑らかに遷移し、アニメーションを完成させることができ、中間の変化はブラウザ自体によって完全に決定されます。アニメーションの効果は、主にトランジション関連のプロパティに依存します。

ただし、トランジションを使用して作成されたアニメーションには、重大な欠点もあります。

1. 遷移にはイベントを発生させる必要があるため、ページの読み込み時に自動的に遷移することはできません。

2. 遷移は 1 回限りであり、繰り返しトリガーしない限り繰り返すことはできません。

3. 遷移は、開始状態と終了状態のみを定義でき、中間状態を定義することはできません。つまり、2 つの状態しかありません。

4. 遷移ルール​​は、1 つの属性の変更のみを定義でき、複数の属性を含むことはできません。

(2) アニメーションアニメーション

アニメーションを使用すると、完全な CSS トゥイーン アニメーションを完成させることができます. 前述のように、いくつかの特別な瞬間のアニメーション状態を定義するだけで済みます. この特別な瞬間は通常、キーフレームと呼ばれます。

キーフレーム キーフレーム

キーフレームには独自の文法規則があります. その名前は "@keyframes" で始まり、その後に "アニメーションの名前" と 1 組の中括弧 "{}" が続きます. 括弧は異なる期間のスタイル規則です. 少し似ています.私たちの CSS スタイルの記述。

「@keyframes」のスタイル ルールは、「0%」と「100%」の間など、複数のパーセンテージで構成されているため、このルールで複数のパーセンテージを作成でき、アニメーション効果を持つ要素に各パーセンテージを与える必要があります。さまざまな属性を追加して、要素の移動、色、位置、サイズ、形状などの変更など、要素が常に変化する効果を実現できるようにします。

ただし、「fromt」と「to」を使用して、アニメーションの開始位置と終了位置を表すことができることに注意してください。つまり、「from」は「0%」に相当し、「to」は「100」に相当します。 %" の場合、"0%" は他の属性値のようにパーセント記号を省略できないことに注意してください。ここでパーセント記号 ("%") を追加する必要があります。追加しない場合、キーフレームは無効であり、効果がありません。 . キーフレームの単位はパーセンテージ値のみを受け入れるためです。具体的なコードを見てみましょう:

@keyframes IDENT {
    from {
        Properties:Properties value;
    }
    Percentage {
        Properties:Properties value;
    }
    to {
        Properties:Properties value;
    }
}
/*或者全部写成百分比的形式：*/
@keyframes IDENT {
    0% {
        Properties:Properties value;
    }
    Percentage {
        Properties:Properties value;
    }
    100% {
        Properties:Properties value;
    }
}

IDENT はアニメーションの名前です, 好きなように解釈してください. もちろん, セマンティックである方が良いです. パーセンテージはパーセンテージ値です. このようなパーセンテージをたくさん追加できます. プロパティは CSS 属性の名前です, left, background など., value は相対値. 対応する属性の属性値.

2.3.2.2 JS の実装

JavaScript を使用してアニメーションを実現するには、Anime.js や TweenJS などのオープンソースの JavaScript アニメーション ライブラリまたはフレームワークを使用できます. Anime.js を例として、トゥイーン アニメーションの実装方法を説明します.

ある程度、anime.js は CSS3 アニメーション ライブラリでもあり、すべての CSS プロパティに適用できます。実装された @keyframes は、CSS3 の複雑な定義方法を置き換えて、より便利にフレーム アニメーションを実装できます。各フレームは、オブジェクトの配列として定義されます。

Poke me: キーフレーム インスタンス

anime({ 
    targets: 'div', 
    translateX: [ 
        { value: 250, duration: 1000, delay: 500, elasticity: 0 }, //第一帧 
        { value: 0, duration: 1000, delay: 500, elasticity: 0 } //第二帧 
    ] 
}) //这个例子实现了目标元素在两帧中实现水平位移

提供された Timeline は、より複雑なアニメーション効果を実現できます.この Timeline を通じて、異なるアニメーション間の関係を維持し、複数の異なるアニメーションを通じてより複雑なアニメーションを形成できます.

Poke me: タイムライン インスタンス

var myTimeline = anime.timeline(); 
//通过.add()方法添加动画 
myTimeline 
.add({ 
    targets: '.square', 
    translateX: 250 
}) 
.add({ 
    targets: '.circle', 
    translateX: 250 
}) 
.add({ 
    targets: '.triangle', 
    translateX: 250 
});

2.3.3 SVG アニメーション

アニメーションを実装すると、ほとんどの要素が写真であることが徐々にわかります。写真は事前にプリセットされており、変更することはできませんが、新しい写真に置き換えることしかできません。たとえば、笑顔のアニメーションを実現したい場合などです。口を閉じた絵と口を開けて笑っている絵の 2 枚を描き、それをフレームごとに再生する必要があります。コマ数が十分にあると硬くならず、24コマを下回ると不自然になってしまうので、負荷をかけずにスムーズに変化させるにはどうすればよいでしょうか。キーフレーム アニメーションのアイデアを要素自体の歪みに移植し、「柔軟なアニメーション」という概念を生み出しました。

2.3.3.1 SVGアニメーションの説明

（画像出典：GSAP公式サイト）

上の図からわかるように, 要素は互いに変化することができ, 非常に滑らかです. このようなアニメーションはキャンバスなどの重い武器を必要とせず, シンプルな DOM を実現できます. SVG は本当に人工物です.アイコンとフォントの実現は、柔軟なアニメーションを実現する上で独特でユニークです。

SVG は依然として DOM です. 独自のアニメーション タグがありますが、CSS プロパティもサポートしています.アニメーションの本質は、線と塗りつぶしに依存することです. 線の変更は塗りつぶし領域の変更につながり、したがって形状の変更につながります. 線はパスとアンカーポイントに依存し、パスとアンカーポイントの変更は線の変更に直接影響します。

AI などの SVG 編集ツールを使用して SVG 画像を生成し、anime.js や GSAP などの既存のライブラリと連携してアニメーション制作を行うことができます。

以下では、anime.js を介して SVG パス アニメーションを実装します。

SVG 描画パス

Poke me: SVG の例

var path = anime.path('.motion-path-demo path');


anime({
  targets: '.motion-path-demo .el',
  translateX: path('x'),
  translateY: path('y'),
  rotate: path('angle'),
  easing: 'linear',
  duration: 2000,
  loop: true
});

（画像出典：animejs公式サイト）

2.3.4 骨格アニメーション

SVG によって実装されるアニメーションは比較的局所的で小規模であり、使用範囲は比較的狭いですが、複雑で柔軟なアニメーションやゲームを実装する場合でも、それを実現するためにスケルトン アニメーションを使用する必要があります。

（画像出典：DragonBones公式サイト）

上の写真から、ドラゴンの翼は絵であることがわかりますが、羽ばたきによる筋肉の収縮と弛緩は、絵の局所的な歪みと変形によって実現できます。このアニメーションはどのように達成されますか? これは、骨格アニメーションの非常に重要な概念であるグリッドにつながります。

ここでは、この概念を簡単な方法で説明します. 画像の局所的な変化を実現するには、画像をブロックに分割する必要があります. 各ブロックはグリッドと呼ばれます. 各グリッドには独自の頂点とエッジがあり、頂点の変位があります.グリッドの形状に変化が生じ、形状の変化が添付の写真に変化をもたらします。グリッドの概念は、パスやアンカーと非常に似ていますか? 技術が何であれ、実装ロジックは似ています. 重要なことは、異なる部分や変化する部分を見つめ続けるのではなく、それらの変更されていない場所を順番に見つけることです.バイパスを達成する効果。

このようなアニメーションの作成は複雑ではなく、Spine や DragonBones などのツールを使用できますが、アニメーションの作成は実際には手作業であり、快適な状態を実現するには常にデバッグする必要があります。

2.3.4.1 骨格アニメーションの説明

スケルタルアニメーションとは、キャラクターの体の各部位の絵を、互いにつながった「ボーン」に結び付け、位置や回転方向、ズームイン・ズームアウトを制御することで生成されるアニメーションです。

私たちがよく言うスケルトン アニメーションは、一般的に次の 2 つの部分に分けられます。

1. スケルトン

2. 肌

スケルトンに含まれるデータには、次の 2 つが含まれます。

• 1つはスケルトンのトポロジー（接続、親子関係）です。

• 2 つ目は、スケルトンのさまざまなポーズ、つまり各アクションに対応するスケルトン全体の位置情報です。

スキニングは、ボーンにアタッチされた頂点に関する情報を表現します。

ボーン バインドのプロセスは、各頂点がどのボーンに影響を与えるか、各ボーンがどれだけのウェイトに影響を与えるかを決定することです。たとえば、肘の皮膚は、上腕のボーンと前腕のボーンによって同時に影響を受ける場合があります。その一部は前腕の骨によってのみ影響を受ける可能性があります。一般に、3D スケルトン アニメーションでは、各頂点は最大 4 ～ 8 個のボーンをサポートし、同時に影響を与えます。これにより、スキン全体の効果を正確に表現できます。

• 骨格アニメーションの利点:

スケルタル アニメーションは、従来のフレームごとのアニメーションよりも多くのプロセッサ パワーを必要としますが、次の利点もあります。

1. アニメーションはより鮮やかでリアルです。

2. 画像リソースは最小のストレージ スペースを占有します。スケルトン アニメーションの画像容量は 90% 削減できます (構成ファイル H5 の圧縮方式については後で詳しく説明します)。

3. アニメーション切り替えの自動トゥイーン: アクションをより柔軟にするために、遷移アニメーションが自動的に生成されます。

4. 制御可能なボーン: コードを使用してボーンを制御し、キャラクターの装備の交換を簡単に実現し、特定のボーンに対して特別な制御やイベント監視を実行することもできます。

5. Skeletal イベント フレーム: アニメーションは特定のアクションまたはフレームまで実行され、カスタム イベント動作をトリガーします。

6. アクション データの継承: 複数のキャラクターが一連のアニメーション データを共有できます。

7. 物理エンジンと衝突検出を組み合わせることができます。

2.3.4.2 スケルタルアニメーション制作

まず、スケルトン アニメーションの作成方法を見てみましょう。

スケルトン アニメーションの作成は、主に Spine や DragonBones などのツールを使用して行われます。

• ドラゴンボーンズ

（画像出典：DragonBones公式サイト）

DragonBones は Flash アニメーションから作成されました. 当初の目的は、リソースの量を減らし、よりきめ細かいアクション (インタラクティブなど) を実現し、フレームごとにスプリー シートを描画するという面倒な作業からアートを解放することでした.各フレームは、腕、脚、胴体などの小さな基本タイルに分割されますが、各基本タイルは依然として制御可能な最小単位です。

次のゲームおよびレンダリング エンジンは、DragonBones エクスポート ファイルのレンダリングをサポートしています。

（画像出典：DragonBones公式サイト）

• 脊椎

（画像出典：Spine公式サイト）

Spine は、ゲーム開発用の 2D スケルトン アニメーション編集ツールです。Spine は、ゲームに必要なアニメーションを作成するためのより効率的で合理化されたワークフローを提供するように設計されています。

使いやすさと安定性のためにアニメーターが推奨する、業界で最も専門的な 2D 骨格アニメーション編集ツールです。次のゲームおよびレンダリング エンジンは、Spine によってエクスポートされたレンダリング ファイルをサポートしています。

（画像出典：Spine公式サイト）

骨格アニメーションの小さなケースを作りましょう

• ボーンを作成する

まず、以下に示すように、手のボーンを作成する必要があります。

1. 1 左上隅がセットアップモードになっていることを確認します

2. 右側のビューでルート ボーンが選択されていることを確認します。ボーンを作成するときは、親ボーンを選択する必要があります。

3. 左下隅にある [作成] ボタンをクリックします。

4. 5 つのボーンを順番に作成し始める

• スキン メッシュを作成する

次に、下の画像に示すように、手のスキン メッシュ (MESH) を作成する必要があります。 

まず、Create ボタンをクリックしてボーンを作成し、ボーン作成モードを終了します。

1. ハンドマップを選択（添付）

2. その下部にあるメッシュオプションを確認してください

3. 右下隅にある [編集] ボタンをクリックします。

4. メッシュの編集メニューを呼び出します

5. Edit Mesh メニューの Deformed オプションにチェックを入れます。

6. [メッシュの編集] メニューの [作成] ボタンをクリックします。

7. 手のメッシュ頂点の作成を開始する

8. 頂点は、[メッシュの編集] メニューの [修正] ボタンをクリックして移動できます。

• グリッド ポイントの重みを設定する

各ボーンの重みをメッシュの頂点に設定する必要があります. 全体のプロセスは次の図に示されています.

まず、メッシュの編集メニューを閉じます

1. チェックマークがまだハンドステッカーであることを確認してください

2. 左下隅にある [重み] ボタンをクリックして、[重み] メニューを呼び出します。

3. Weights メニューの下部にある Bind ボタンをクリックして、ボーンをバインドします。

4. Weights メニューにすべてが表示されるまで、手の 5 つのボーンを選択します。異なるボーンの色は異なることに注意してください。

5. Weights メニューの Auto ボタンをクリックするか、「esc」キーを押して、Spine の自動ウェイト計算をトリガーします。

6. ウェイト メニューのオーバーレイを確認します。バインド後のウェイト ヒートマップを確認できます。

• 動きましょう！

手を上げようとしているので、腕を曲げるアニメーションを表示します。

まず、キーフレームを設定する必要があります. フレーム 1 とフレーム 30 にキーフレームを設定しましょう. アニメーションをループさせる必要があるため、これら 2 つのキーフレームに対応する腕の位置はまったく同じです.

具体的な手順は次のとおりです。

1. 左上隅のモードが ANIMATE モードであることを確認します

2. 手の 5 つのボーンを選択します (「cmd」キーまたは「control」キーを押しながら順番にクリックします)。

3.  フレーム 0 を選択

4. Rotate の下のキー ボタンをクリックして、腕の回転プロパティをキーフレーム化します。

5. フレーム 30 を選択

6. フレーム 30 のキーフレームがフレーム 0 とまったく同じになるように、手順 4 を繰り返します。

次に、腕をわずかに回転させ、フレーム 0 ～ 30 の中間にあるフレームをキーフレームとして見つけます。フレーム 15 を中間のキーフレームとして選択します。

1. フレーム 15 を選択

2. [回転] ボタンが選択されていることを確認します

3. 5 つのボーンをある角度まで回転させる

4. K フレーム ボタンを押してキーフレームを設定します。

5. 再生ボタンを押してアニメーションをプレビューします

さらに、もう一方の手、口、顔、髪をメッシュ化し、アニメーションのレンダリングを次に示します。

 

 

2.3.4.3 フロントエンド表示の骨格アニメーション

作成した骨格アニメーションをSpineで出力リソース（画像情報ファイル：atlas、アニメーション情報ファイル：json、画像画像：png）にエクスポートし、これらのリソースをフロントエンドにサブミットして表示します。

フロントエンド開発SpineまたはDragonBonesがサポートできるレンダリング エンジンに従って、レンダリング エンジンをプロジェクトにインポートして、スケルトン アニメーションを表示します。

2.3.5 3D アニメーション

フロントエンド 3D アニメーションの実装は、CSS 3D を使用してパースペクティブ プロパティ操作を使用して実装するか、オープン ソースの Three.js オープン ソース ライブラリを使用して直接実装できます。

3D アニメーションには多くのコンテンツが含まれ、スペースが限られているため、後でフロントエンド 3D アニメーションを説明する章を開きます。

3. 既存プログラムの概要

3.1 純粋な CSS の実装

適したシーン： 簡易表示アニメーション

transition\animation プロパティを使用し、対応するキーフレームの状態を設定し、いくつかのイージング関数を使用して簡略化されたアニメーションを実装します。

利点:開発コストが低く、追加の依存関係をインポートする必要がない

短所と欠点:いくつかの単純なアニメーションを実行する能力しかなく、過度に責任のあるアニメーションを実現することはできません。

3.2 アニメ.js

該当するシーン： 単純な表示アニメーション+弱いインタラクティブアニメーション

Anime.js は、軽量な js 駆動のアニメーション ライブラリです。主な機能は次のとおりです。

1. キーフレームのサポート、複数のアニメーションの接続

2. より複雑なアニメーションを実現する可能性を提供するタイムラインをサポート

3. アニメーション状態制御の再生制御、再生、一時停止、再起動、アニメーションまたはタイムラインの検索をサポートします。

4. アニメーション状態のコールバックをサポートし、アニメーションの開始、実行、および終了時にコールバック関数を提供します

5. SVG アニメーションをサポート

6. ベジェ曲線はカスタマイズ可能

7. 数値を含む任意の DOM プロパティをアニメーション化できます

• GitHub：https://github.com/juliangarn...

• codepen リポジトリ: https://codepen.io/collection…

• ドキュメンテーションのデモ: http://animejs.com/documentat…

特徴：

ある程度、anime.js は CSS3 アニメーション ライブラリでもあり、すべての CSS プロパティに適用されます。実装された @keyframes は、CSS3 の複雑な定義方法を置き換えて、より便利にフレーム アニメーションを実装できます。各フレームは、オブジェクトの配列として定義されます。

Poke me: キーフレーム インスタンス

anime({ 
    targets: 'div', 
    translateX: [ 
        { value: 250, duration: 1000, delay: 500, elasticity: 0 }, //第一帧 
        { value: 0, duration: 1000, delay: 500, elasticity: 0 } //第二帧 
    ] 
}) //这个例子实现了目标元素在两帧中实现水平位移

提供された Timeline は、より複雑なアニメーション効果を実現できます.この Timeline を通じて、異なるアニメーション間の関係を維持し、複数の異なるアニメーションを通じてより複雑なアニメーションを形成できます.

Poke me: タイムライン インスタンス

var myTimeline = anime.timeline(); 
//通过.add()方法添加动画 
myTimeline 
.add({ 
    targets: '.square', 
    translateX: 250 
}) 
.add({ 
    targets: '.circle', 
    translateX: 250 
}) 
.add({ 
    targets: '.triangle', 
    translateX: 250 
});

アニメーション再生の制御。一般的なものは、一時停止、再生、継続、アニメーション状態の追跡、自動再生、サイクル時間、ジッター効果です。

Poke me: 再生コントロールのインスタンス

アニメーションにはコールバック関数が用意されており、アニメーションまたはタイムラインの開始時、途中、または完了時に実行されます。

Poke me: コールバック インスタンス

var myAnimation = anime({ 
    targets: '#begin .el', 
    translateX: 250, 
    delay: 1000, 
    begin: function(anim) { // callback 
        console.log(anim.began); // true after 1000ms 
    } 
});

Promise がサポートされており、アニメーションが終了した後、anime.finished を呼び出すと、promise オブジェクトが返されます。

Poke me: Promise インスタンス

svg 描画パスをサポートしますが、現在キャンバス描画はサポートしていません。

Poke me: SVG の例

入力などの数値を持つ要素ラベルの場合、アニメーション インスタンスを介してアニメーションを設定することもできます。

ポケミー: DOM ATTRIBUTES インスタンス

anime({ 
    targets: input, 
    value: 1000, // Animate the input value to 1000 
    round: 1 // Remove decimals by rounding the value 
});

アドバンテージ：

• 明らかに、anime.js は CSS3 アニメーションの深いカプセル化を実現するだけでなく、js 駆動による動作アニメーションの状態も実現し、Timeline は複数のブランチ アニメーションの管理を実現し、より複雑なアニメーションを実現する可能性を提供します。

• anime.js によって提供される再生コントロールとコールバック、および promise のサポートにより、アニメーションとの単純な対話の余地があります。

• canvas はサポートされていませんが、svg 描画パスをサポートしています。

• ブラウザの互換性は比較的良好で、Android 4 以降はすべてサポートされています。

欠点:

Anime.js は表示アニメーションに適していますが、特に複雑なアニメーションを実現することはできません. インタラクティブなアニメーションに関しては、まだシーンを見る必要があります. 触れるような小さなインタラクティブなアニメーションに適しています. 強い相互作用画面上のサッカーの場合、anime.js はあまり有利ではありません。

3.3 ロッティ

該当するシーン： 複雑な表示アニメーション

AE で作成したアニメーションを AE の Bodymovin プラグインを介して json ファイルにエクスポートし、Lottie を介して JSON を解析し、最後にアニメーションを SVG/canvas/html の形式でレンダリングします。

デザイナーがデザインしたさまざまな複雑なアニメーションを完璧に表示できます。

• 公式ドキュメント: http://airbnb.io/lottie/

• codepen リポジトリ: https://codepen.io/collection…

アドバンテージ：

• クロスプラットフォーム、1 回描画、1 回変換、どこでも利用可能。

• ファイルは小さくなり、AE によってエクスポートされた JSON を取得し、最後に lottie を介して canvas/svg/html 形式にレンダリングします。

• アニメーションの速度など、アニメーションの一部のプロパティは、API を介して操作できます。アニメーションの各状態のコールバック関数を追加できます。

• アニメーションはすべて After Effects で作成され、Bodymovin を使用してエクスポートされ、追加のエンジニアリング作業なしでネイティブにレンダリングされます。

• フロントエンド エンジニアの生産性を解放し、動的効果を行うデザイナーの自由度を向上させます。

欠点:

• Bodymovin プラグインは改善する必要があり、正常にエクスポートできない AE エフェクトがまだいくつかあります。

• インタラクションのサポートはあまり良くなく、アニメーションを表示するために使用されます。

• Lottie の json ファイルのサポートを改善する必要があります. 現時点では、json ファイルに正常にエクスポートできるエフェクトの一部が、モバイル端末でうまく表示されません。

• 多くの AE 効果はサポートされていません。 サポートされている機能を表示: サポートされている機能.

3.4 ピクシーアイス

該当するシーン： インタラクティブアニメーション、アニメーションゲーム

PixiJS は 2D レンダリング エンジンで、Pixi は主に画像のレンダリングを担当します。WebGL API を深く掘り下げたり、ブラウザーやデバイスの互換性の問題に対処したりすることなく、リッチでインタラクティブなグラフィック、アニメーション、およびゲームを作成できます。一方、PixiJS は WebGL を完全にサポートしており、必要に応じて HTML5 キャンバスにシームレスにフォールバックできます。PixiJs は、デフォルトでレンダリングに WebGL を使用します. レンダリングにキャンバスを指定することもできます. WebGL はモバイル Android 4.4 ブラウザではサポートされていませんが、キャンバスを使用して適切に劣化させることができます.

• Github:  https://github.com/pixijs/pix...

• 公式ドキュメント: http://pixijs.download/releases…

• 公式サイト：http ://www.pixijs.com/

• 例：https://pixijs.io/examples/#/...

機能 (公式ドキュメントから):

• WebGL レンダリングをサポート

• キャンバス レンダリングをサポートします (正式には、PixiJS は現在、キャンバス レンダリングで最速です)。

• 非常にシンプルで使いやすい API

• フル マウス イベントやモバイル タッチ イベントなどの豊富なインタラクティブ イベント

• Pixi はキャンバス描画とほぼ同じ API を使用しますが、キャンバス描画 API とは異なり、Pixi で描画されたグラフィックスは WebGL を介して GPU 上にレンダリングされます。

• PixiJsを学習した後に理解する必要がある一連の機能もあります

アドバンテージ：

• 最大の利点は、GPU を使用して WebGL を介してアニメーションをレンダリングすることで、パフォーマンスが大幅に向上することです。

• WebGL API やブラウザーの互換性に関する深い知識は必要ありません (このため)。

• キャンバス フォールバックがサポートされています。現在のデバイスが WebGL をサポートしていない場合、PixiJ はキャンバスを使用してアニメーションをレンダリングします。

• 完全な DOCS、より活発なコミュニティ、詳細な学習に役立ちます。ただし、PixiJs の学習コストは比較的高いと感じます。

欠点:

• 1 つ目は互換性の問題です.WebGL は Android 4.4 ではサポートされておらず、canvas を使用してのみダウングレードできます。

• Pixi は主に画面のレンダリングを担当しており、他の多くの関数開発者はそれを作成したり、他のライブラリで使用したりする必要がありますが、現在の観点からすると、Pixi は私たちのニーズを満たしています。

パフォーマンス：

携帯電話のバージョンが Android 4.4 以上の携帯電話では、コード レベルに起因するパフォーマンスの不足に加えて、WebGL を介して GPU レンダリングを呼び出すことでパフォーマンスが保証されます。ただし、Android 4.4 ではキャンバス レンダリングのみを使用でき、パフォーマンスは依然としてアニメーションの複雑さとコードの最適化に依存します。

3.5 まとめ

簡単な表示アニメーション:

より単純なアニメーションの場合、最初にネイティブ CSS の transition\animation プロパティを使用して実装を試みることができます。

シンプルな表示アニメーション + 弱い相互作用:

単純なアニメーション表示の場合、単純なインタラクティブな動作が必要な場合、たとえば、ユーザーがクリックして一時停止して対応する操作を実行し、操作が完了した後にアニメーションの再生を再開する. インタラクションは比較的弱く、Anime.js ソリューションは利用される。

Anime.js はすべての CSS プロパティをサポートするだけでなく、タイムライン、コールバック、再生コントロールを通じてアニメーション実行のさまざまな状態を制御でき、Anime.js が連携して SVG アニメーションを実現できます。

複雑なプレゼンテーション アニメーション:

1. 必要なリソースが非常に小さい場合は、最初に GIF アニメーションまたはフレームごとのアニメーション CSS の使用を検討できます。

2. 必要なリソースが大きい場合は、Lottie スキームを使用してから、学生が AE を使用して json をどこでもアニメーション化し、アニメーションを svg/canvas/html に復元するように設計できます。

強力なインタラクション & インタラクティブなミニゲーム & 骨格アニメーション:

1. インタラクティブなシーンや小さなゲームを作成する必要がある場合は、PixiJs を使用して WebGL を介してレンダリングし、ハードウェア リソースを使用してパフォーマンスを大幅に向上させることができます. 互換性に関しては、WebGL をサポートしていないブラウザーの場合は、キャンバス レンダリングを使用して戻りを安定させます。

2. スケルトン アニメーションを表示する必要がある場合は、Spine または DragonBones によって出力されたファイルを PixiJs ソリューションを介してレンダリングできます。

{{o.name}}

{{m.name}}