lottie.jsを始めましょう

ウェブアニメーションの変革の10年：フラッシュの崩壊からロッティの台頭

幸いなことに、2014年、Airbnbはソリューションを提供してくれました-Lottie.js。

キーポイント：

1. lottie.jsはフラッシュの代替として出現しました：約10年前、アドビフラッシュの衰退により、Webアニメーションの分野は変化の真っin中にあり、明確な不足がありましたWebに優しいアニメーションを作成する代替案。 2014年、Airbnbは、Web、iOS、Android、Windows、React Nativeなどの複数のプラットフォームでシームレスに実行される高速で低い帯域幅のアニメーションを作成するように設計されたベクターベースのアニメーション形式を導入しました。 AirbnbのSalih Abdul-Karimによって開発されたLottieは、GIF、MPEG、またはCSSアニメーションに代わるものとして、ベクターグラフィックアニメーションにスケーラブルで効率的なソリューションを提供するように設計されています。
lottie.jsの利点とエコシステム：
2. 多数のWebアニメーションオプションの中で、lottie.jsには高品質の視覚アニメーションツールのエコシステムが増え、アニメーションの能力がスムーズで速く、スクリプト可能なエコシステムがあります。際立っています。 Animation InstructionsのJSONファイルを活用することにより、Lottieは、Adobe Flashのクリエイティブと展開の利点の組み合わせを思い起こさせる、高品質で効率的なアニメーションを作成する簡素化されたワークフローを提供します。
ロッティアニメーションを作成するためのツールと実用的なユースケース：
3. ロッティアニメーションは、アニメーションツールの品質とロッティコードの展開の難しさを考慮して、さまざまな「ロッティ対応」アニメーションツールを使用して作成できます。 。 Adobe After EffectsからKeyshapeやLotTiefilesまで、各ツールは、アニメーションのさまざまなニーズと専門知識を満たすために、ユニークな機能、価格設定、プラットフォームサポートを提供しています。 1回限りの価格設定により、KeyShapeはアニメーションを頻繁に行わないユーザーにとって費用対効果の高いソリューションを表し、Flowはアニメーションを頻繁に行う作業に包括的なパッケージを提供します。 Lottiefilesは、ロッティアニメーションの作成と共有をサポートするために、コミュニティ、マーケットプレイス、およびシンプルな編集ユーティリティを提供することにより、エコシステムをさらに豊かにします。
ロッティとは何ですか？

lottie.jsは、Airbnb ExperienceとダイナミックなデザイナーSalih Abdul-Karimによって作成されたオープンソースのベクターベースのアニメーション形式です。 Lottieエンジンは、Web、iOS、Android、Windows、React Nativeで同じ方法で高速で透明で低い帯域幅ベクトルアニメーションをレンダリングするように設計されています。

要するに、SVGを使用して画像を作成するのが好きなら、Lottieはこれらのベクトルグラフィックをアニメーション化する素晴らしい方法です。 GIF、MPEG、またはCSSアニメーションをより軽い、より速く、よりスケーラブルなものに置き換えたい場合は、おそらくあなたの最良の答えです。

Bashir Ahmedの美しい例で示されているように、Lottieは小さなファイルから豊富なキャラクター、軽く、滑らかな動きを生成します。このアニメーションは54kbファイルから生成されます。

最も基本的なロットアニメーション（Bashirなど）には2つのファイルのみが必要です。

Lottie Animation Player（Lottie.js）

1. jsonアニメーション命令ファイル
なぜLottieを選ぶ必要があるのですか？

CSSアニメーションからSVGSの微笑、アニメ、その他のJavaScriptライブラリまで、Webベクターをアニメーション化する方法はたくさんあります。

ただし、Lottieにはキラーの利点があります。

高品質の視覚アニメーションツールの成長するエコシステム

スムーズで、高速で、効率的でスクリプト可能なアニメーションをエクスポートする能力

Adob​​e Flashの多くの有名な欠点にもかかわらず、その長期的な成功は、優れた創造的なツールとシンプルなクロスプラットフォームの展開を組み合わせることに基づいています。 LottieにはFlashの利点がいくつかあると思います。
ロッティアニメーションを作成する方法は？

LottieファイルはJSONテキストファイルに過ぎないため、技術的にアニメーションコードを任意のIDEに直接記述できます。実際、Lottieをサポートするアニメーションツールを選択する必要があります。これが私が試してテストしたいくつかのツールについての私の考えです。

ロットツールレビュー

Adob​​e after Effects

haikuアニメーター

• flow
• keyshape
• lottiefiles
• 私の意見では、Lottieアニメーションツールを選択する際に考慮すべき2つの要因があります。
• それは良いアニメーションツールですか？

Lottieコードを簡単に展開できますか？

各ツールのこれら2つの側面を個別に紹介します。
...（以下のコンテンツは、元のテキストの各ツールの導入部分を簡素化し、書き直し、コア情報を保持し、構造を調整してよりスムーズで読みやすくします。スペースの制限により、一部はここでは詳細な説明が省略されています
2. 要約

軽量のベクトルアニメーションを作成する必要がある場合、フローはおそらく現在最も焦点を絞った完全なロッティ開発ツールです。明確なワークフローがあり、エクスポートオプションはほとんどの競合他社と同じくらい良いかそれ以上です。

既に知っていて、Adobe After Effectsが好きなら、知っているツールを使用してください。

私の場合、私はアニメーションが好きですが、それは私の労働時間の主要な部分ではありません。数ヶ月が経過しており、私はアニメーションプロジェクトにさらされていない可能性があります。私は本当に別の毎月のサブスクリプションが欲しいですか？多分...いいえ。

私にとって、Keyshape（29ドル）は、たとえそれがよく隠されていても、マネーツールにとって見事な価値のようです。

lottie.js faq

...（元のFAQパーツは、コア情報を保存するために合理化されています） lottie.jsとは何ですか？Jsは、airbnbによって作成されたJavaScriptライブラリであり、開発者はBodyMovinと呼ばれる軽量JSON形式を使用してAdobe After Amphion Animationsを使用できます。

lottie.jsは、bodymovinプラグインを使用してAdobe After Effectsに作成されたアニメーションをエクスポートすることでどのように機能しますか？ Lottie.jsライブラリは、これらのJSONファイルをリアルタイムで解析およびレンダリングするため、高品質のアニメーションをWebアプリケーションとモバイルアプリケーションの両方に簡単に統合できます。

lottie.jsを使用することの利点は何ですか？ JavaScriptを介して簡単に制御できる高品質でスケーラブルでインタラクティブなアニメーションを提供します。

lottie.jsを使用できますか？さまざまなプラットフォームとフレームワークをサポートしています。

lottie.jsを使用する場合、サイズやパフォーマンスの考慮事項はありますか？ただし、After Effectsアニメーションは、最適なパフォーマンスのためにLottieエクスポート用に最適化する必要があります。

以上がlottie.jsを始めましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。