ある日、UI デザイナーが私のところに来て、プログラムで作成したアニメーションを、提供された JSON アニメーションに置き換えるべきだと言いました。その理由は、一部のアニメーションは非常に複雑で、自分で作成すると期待した効果が得られないためです。これを書いているときに、なぜこのような複雑なアニメーションに gif を使用しないのかと疑問を思いつきました。私の向かいに座っていた Android 開発者は、gif を再生すると品質が高くないかもしれないと答えました、わかりました、そう思います)
私：？ ? ? ?クライアントは JSON アニメーションを追加できます。H5 ページが JSON アニメーションを読み込めるという話は聞いたことがありません。
デザイナーは確信を持って、「はい、Web バージョンがあります」と言いました。
これを書いているとき、私はデザイナーの女の子たちを本当に賞賛したいと思います。彼女たちのプレッシャーの下で、ほとんど多くの良い解決策が見つかりました（ああ、彼らは H5 ページも書くことができます...彼らは私に何の役に立つのかシリーズを求めています）。
そこで質問は、H5 ページで JSON アニメーションを使用する方法です。
H5ページ内でJSONアニメーションを使用する方法このとき、デザイナーは、lottie-web のリンクを送ってくれました。詳細を知るためにクリックしました。このライブラリは、Airbnb が提供するオープンソースのアニメーション ライブラリで、非常に使いやすいです。デザイナーはAEで作成したアニメーションを介してJSONファイルをエクスポートするだけで済みます。ソフトウェアを使用すると、フロントエンドは Lottie を使用して JSON ファイルを直接ロードしてアニメーションを生成します。これにより、デザイナーが多くの GIF を切り取る必要も、フロントエンドが複雑な描画を実行する必要もなくなり、一石二鳥になります。 Lottie は、iOS、Android、Web、React を含むすべてのプラットフォームで利用できます。ネイティブが使用でき、メモリ消費も少なく読み込みもスムーズです。 （なぜ私は今になってこんな魔法のようなものを発見したのでしょうか？
ここまで述べましたが、H5 ページでどのように使用するのでしょうか?
非常に簡単です。デザイナーが生成したフォルダーが送信されます (デザイナーは、AE に Lottie プラグインを追加してエクスポートするだけです)。demo.html を開くと、次のようになります。それがどのように機能するかを知っています（したがって、私はまだここで技術的な記事を書いています）。
冗談はさておき、実際に使ってみると落とし穴がたくさんありました。使用上の注意点をいくつか紹介します。
1.demo.html にはインライン要素が多く、使用すると見苦しくなります。実際、demo.html には js と json の両方を含めることができます。js については、cdn で提供されるアドレスを使用できます。
<script type=text/javascript src=https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.3/lottie.min.js></script>
アニメーションに必要なjsonデータはdata.jsonファイル内に配置されていますが、与えられたjsonファイル内のデータ形式は以下の通りです（長すぎて切り取れません）
スクリプトを使用して別の HTML に json ファイルを導入する場合は、エラーが報告されるため、json ファイルを変更し、先頭に変数を追加し、値を代入する必要があります。以下に示すように:
このようにすると、js ファイルと同じように json をインポートできます。
<script type=text/javascript src=./data.json></script>
このようにして、利用可能なdemo.htmlは次のように縮小されます。
<html xmlns=http://www.w3.org/1999/xhtml><meta charset=UTF-8><head> <style> body{ 背景色:黒; 高さ: 100%; : 非表示; } #lottie{ 背景色:#fff; 表示: ブロック; </style></head><body><div id=lottie></div><script type=text/javascript src= https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.3/lottie.min.js></script><script type=text/javascript src=./data.json></script><script> var params = { コンテナ: document.getElementById('lottie')、レンダラ: 'svg'、ループ: true、自動再生: true、animationData: animeData }; anim; anim = Lottie.loadAnimation(params);</script></body></html>もちろん、js モジュラー プログラミングを使用している場合は、次のように data.json を変更せずに直接インポートできます。
「./data.json」からアニメーションデータをインポートします2.アニメーションをモバイルデバイスに適応させる
これが落とし穴だと思う理由は、デザイナーが私に与えたアニメーションが全画面で不透明だったためです。その後、彼女はアニメーションを幅 100% で垂直方向の中央に配置するように求めたので、それを試してみました。ブラウザでは、360*640の画面下で横幅100％、表現は次のようになります（縦幅100％で横幅が中央に合わせられ、背景の黒が両側にはみ出しているように見えます） 、下の写真の青枠部分を参照してください）
iPhoneの画面に切り替える
このレイアウトは、img の object-fit 属性が contains に設定されている場合と同じように動作します (object-fit も宝物です。興味のある学生は勉強してください。非常に使いやすいです)。
ここでデザイナーのニーズを解決するために、主に次のコードを追加します。
js 部分: setTimeout(function() { document.getElementsByTagName('svg')[0].style.height = 'auto';}, 50); css 部分: (lottie にフレックス レイアウトを追加) #lottie { width:100 %; 高さ: 100%; 変換: テキスト整列: 中心: 0;左: 0; z-インデックス: 3; 表示: フレックス方向: 行; 整列項目: 中央;最終的な効果:
要約する上の画像のスクリーンショットはすべて静的ですが、実際にはアニメーションを追加する方法がわからないので、興味がある場合は試してみてください。
適用範囲: GIF よりもスムーズで、H5 ページなど、一部の Android 製品ではこの方法を使用して画面をかっこよく開くことができます。そうであれば、単純なアニメーションは通常、独自のプログラムで実装でき、落とし穴を避けることができます。
参考リンク:
ロッティ公式サイト
Lottie-Web の Github アドレス
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。