Lottie (ドキュメント)

https://airbnb.dokyumento.jp/lottie のための Lottie ドキュメント
2,876
作成者Lottie チーム

Lottie ドキュメント

Lottie は、Android、iOS、Web、Windows 向けのライブラリで、Adobe After Effects で作成され、Bodymovin を使って json としてエクスポートされたアニメーションを解析し、モバイルとウェブでネイティブにレンダリングします。

デザイナーは、エンジニアが苦労して手作業で再現することなく、初めて美しく、そしてそのままリリースできるアニメーションを作成できます。百聞は一見に如かず、ということで、13,000語に相当するアニメーションをご覧ください。

Lottie Logo animation

Example1

Example2

Example3

Example4

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

Bodymovin は、Hernan Torrisi 氏によって作成された After Effects プラグインで、After Effects ファイルを json としてエクスポートし、JavaScript ウェブプレーヤーを含んでいます。私たちは彼の素晴らしい功績の上に、Android、iOS、React Native、Windows にまでその使用範囲を拡張しました。

詳細については、ブログ記事をご覧ください。または、GitHub または lottie@airbnb.com でお問い合わせください。

その他のプラットフォーム

サンプルアプリ

Android 用のサンプルアプリは、自分でビルドすることも、Play ストアからダウンロードすることもできます。サンプルアプリには、いくつかの組み込みアニメーションが含まれていますが、内部ストレージまたは URL からアニメーションを読み込むこともできます。

Windows の場合は、Lottie Viewer アプリで Lottie アニメーションのプレビューとコード生成クラスを取得し、Lottie Samples アプリでコードサンプルと簡単なチュートリアルを開始できます。

Lottie を使用した作品をリリースしていますか？

lottie@airbnb.com までメールでお知らせください。近日中に、世界中の Lottie の実際の使用例を掲載した testimonials and use cases ページを作成します。また、アニメーションの回帰を防ぐために使用できる内部回帰テストリポジトリもあります。

代替手段

  1. アニメーションを手作業で作成する。アニメーションを手作業で作成するには、Android と iOS の両方で、デザインとエンジニアリングに多大な時間を費やす必要があります。アニメーションを正しく動作させるために、これほど多くの時間を費やすことを正当化するのは、しばしば困難または不可能です。
  2. Facebook Keyframes。Keyframes は、Facebook がリアクション用に構築した素晴らしい新しいライブラリです。ただし、Keyframes は、マスク、マット、トリムパス、ダッシュパターンなど、Lottie の一部の機能をサポートしていません。
  3. GIF。GIF は Bodymovin JSON の 2 倍以上のサイズで、大きな画面や高密度画面に合わせて拡大縮小できない固定サイズでレンダリングされます。
  4. PNG シーケンス。PNG シーケンスは、ファイルサイズが Bodymovin JSON の 30 ～ 50 倍になることが多く、拡大縮小もできないため、GIF よりもさらに劣っています。
  5. Animated Vector Drawable (Android のみ)。メインスレッドではなく RenderThread で実行されるため、パフォーマンスが向上します。Lottie 機能のサブセットのみをサポートします。進行状況を手動で設定することはできません。テキストまたは動的色をサポートしていません。プログラムまたはインターネット経由でロードすることはできません。

なぜ Lottie と呼ばれるのですか？

Lottie は、ドイツの映画監督であり、シルエットアニメーションの第一人者である Lotte Reiniger にちなんで名付けられました。彼女の最も有名な映画は、現存する最古の長編アニメーション映画である「アフメッド王子の冒険」(1926 年) です。これは、ウォルト・ディズニーの長編映画「白雪姫と七人の小人」(1937 年) よりも 10 年以上も前の作品です。ロッテ・ライニガーの芸術

記事、インタビュー、ポッドキャスト

Airbnb の Lottie チームによる記事とポッドキャストをご紹介します。

コミュニティの記事とビデオ

コミュニティからのリンクをご紹介します。

リンク