ロッティでアニメーション化します

Webアニメーションは非常に興味深いだけでなく、ユーザーの参加を効果的に改善し、訪問者を顧客に変換します。 Twitterの「いいね」ボタンを考えてみてください。クリックすると、カラフルな泡がハート型のボタンの周りに拡散し、ボタンが徐々に円になり、最後にレッドフィル状態が表示された後に表示されます。ハートシェイプアウトラインを単に埋めるだけで、効果はさらに悪化します。この興奮と満足感は、アニメーションがユーザーエクスペリエンスをどのように向上させるかを完全に示しています。

この記事では、Lottieを使用してAdobe After Effects AnimationsをWebページにレンダリングする方法を紹介し、Twitterのようなボタンなどの複雑なアニメーション効果を実現します。

BodyMovinは、Adobe After Effectsのプラグインであり、アニメーションをJSON形式にエクスポートします。 Lottieは、これらのJSONアニメーションをモバイルおよびWebページでネイティブにレンダリングできるライブラリです。ヘルナン・トリシによって作成されました。 「後のエフェクトを使用しない、この投稿は私のためではないかもしれない」と考えているなら、ちょっと待ってください。私もアフターエフェクトを使用していませんが、プロジェクトでLottieを使用しています。

もちろん、Webページでアニメーションを作成するためにLottieを使用する必要はありません。もう1つのアプローチは、アニメーションをゼロから設計することですが、これは非常に時間がかかる場合があります。特に、Lottieが対処するのが得意な複雑なアニメーションタイプの場合です。別のオプションは、無制限のアニメーションタイプを持つGIFアニメーションを使用することですが、そのファイルサイズは通常、BodyMovinによって生成されたJSONファイルの2倍の大きさです。

それがどのように機能するかを理解し始めましょう。

JSONファイルを取得します

Lottieを使用するには、After Effectsアニメーションを含むJSONファイルが必要です。幸いなことに、Icons8は、JSON、GIF、およびAfter Effects形式で利用できる多くの無料のアニメーションアイコンを提供します。

HTMLにスクリプトを追加します

また、HTMLにBodyMovinプレーヤーのJavaScriptライブラリを紹介し、そのloadAnimation()メソッドを呼び出す必要があります。基本的な方法は次のとおりです。

<div id="icon-container"></div>
<script>
  var animation = bodymovin.loadAnimation({
    container: document.getElementById('icon-container'), // 必需
    path: 'data.json', // 必需
    renderer: 'svg', // 必需
    loop: true, // 可选
    autoplay: true, // 可选
    name: "Demo Animation", // 可选
  });
</script>

アクティベーションアニメーション

アニメーションがコンテナにロードされた後、イベントリスナーを使用してアクティベーションメソッドを構成し、アニメーションのアクションをトリガーできます。以下は利用可能なプロパティです。

• container ：アニメーションのDOM要素をロードします
• path ：アニメーションを含むJSONファイルへの相対パス
• renderer ：SVG、Canvas、HTMLを含むアニメーション形式
• loop ：ブール値、アニメーションが再生されるかどうかを指定します
• autoplay ：ブール値、ロード後にアニメーションが自動的に再生されるかどうかを指定します
• name ：将来の参照に使用されるアニメーション名

前の例では、 animationDataプロパティがコメントアウトされていることに注意してください。 path属性に相互に排他的であり、エクスポートされたアニメーションデータを含むオブジェクトです。

例を試してください

iCons8からこのアニメーション再生/一時停止コントロールアイコンでLottieを使用する方法を示したいです。

BodyMovin Player Libraryはここで静的にホストされており、HTMLに直接配置できますが、パッケージとしても使用できます。

 npm lottie-web ###またはyarn add lottie-webをインストールします

次に、HTMLファイルに、インストールされたパッケージのdistフォルダーからのスクリプトを含めます。また、Skypackからライブラリをモジュールとしてインポートすることもできます。

 「https://cdn.skypack.dev/lottie-web」からLottiewebをインポートします。

現在、一時停止ボタンはループ再生であり、自動的に再生されます。

アニメーションがアクションによってトリガーされるように変更しましょう。

アニメーションをトリガーします

オートプレイがオフになっている場合、それがAfter Effectsからエクスポートする方法だからです。

しかし、心配しないでください！ Lottieは、アニメーションインスタンスに適用できるいくつかの方法を提供します。つまり、NPMパッケージのドキュメントはより包括的です。

いくつかのことをする必要があります：

• 最初は「再生」ステータスとして表示されます。
• クリックしたときにアニメーションを「一時停止」に設定します
• 次に、クリックすると2つのアニメーションを切り替えます。

ここでは、 goToAndStop(value, isFrame)メソッドが非常に適しています。アニメーションがコンテナにロードされると、このメソッドはアニメーションを設定して提供された値に移動し、そこで停止します。この場合、アニメーションが再生されたときにアニメーションの価値を見つけて設定する必要があります。 2番目のパラメーターは、提供された値が時間またはフレームに基づいているかどうかを指定します。これは、falseのデフォルト値（つまり、時間ベースの値）を持つブールタイプです。アニメーションを再生するように設定したいので、それを真に設定します。

値に基づいてタイムラインに基づいて、タイムラインの特定のポイントにアニメーションを設定します。たとえば、アニメーションの開始時（一時停止時）の時間値は1です。ただし、アニメーションはフレームの値に基づいて特定のフレーム値に設定されます。 Techtermsによると、フレームは画像シーケンスの単一の画像です。したがって、アニメーションのフレーム値を5に設定すると、アニメーションはアニメーションの5番目のフレーム（この場合は「画像シーケンス」）に移動します。

さまざまな値を試した後、アニメーションがフレーム値11から16に再生されることがわかりました。したがって、安全に14を選択しました。

これで、ユーザーがクリックしてユーザーが再びクリックすると再生すると、アニメーション化する必要があります。次に、 playSegments(segments, forceFlag)メソッドが必要です。 segmentsパラメーターは、2つの数値を含む配列タイプです。 1番目と2番目の数値は、メソッドがそれぞれ読み取る最初と最後のフレームを表します。 forceFlag 、メソッドをすぐにトリガーする必要があるかどうかを示すブール値です。 falseに設定すると、アニメーションがsegmentsアレイの最初のフレームとして指定された値に再生されるまで待ちます。本当なら、クリップはすぐに再生されます。

ここでは、プレイから一時停止のクリップをいつ再生するかを示すフラグを作成し、一時停止からプレイするクリップを示しました。また、コンバージョンをすぐに実行したいので、 forceFlag BooleanをTrueに設定しました。

それでおしまい！アフターエフェクトからブラウザにアニメーションをレンダリングします！ロッティに感謝します！

キャンバス？

SVGをレンダラーとして使用することを好みます。スケーリングをサポートしているため、最も明確なアニメーションをレンダリングできると思います。 Canvasレンダリングはあまり良くなく、スケーリングをサポートしていません。ただし、既存のキャンバスでアニメーションをレンダリングする場合は、追加の操作を行う必要があります。

より多くの操作

アニメーションインスタンスには、アニメーションの動作を構成するためにも使用できるイベントもいくつかあります。

たとえば、下のペンでは、アニメーションに2人のイベントリスナーを追加し、イベントがトリガーされたときに表示するテキストを設定しました。

すべてのイベントは、NPMパッケージのドキュメントに記載されています。これらすべてで、他のことを言ってみましょう、いくつかの素晴らしいアニメーションをレンダリングしましょう！

以上がロッティでアニメーション化しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。