ハクソク

世界を動かす技術を、日本語で。

Lottieはアニメーションベクターグラフィックスのオープンフォーマットです

365日前原文(lottie.github.io)

概要

  • Lottie Animation Community (LAC) は非営利のオープンソースプロジェクト
  • The Linux Foundation の支援のもと活動
  • Lottieファイルフォーマット の標準化と普及が目的
  • オープンかつ協力的な運営体制
  • コミュニティ全体での透明性と参加を重視

Lottie Animation Community（LAC）概要

  • Lottie Animation Community (LAC) は、アニメーションベクターグラフィックス技術である Lottie File Format の効率的かつスケーラブルなクロスプラットフォーム化を目指す非営利プロジェクト
  • The Linux Foundation のホスティングによる運営
  • Lottieフォーマット仕様 の正式策定と、各種レンダラーやツールへの実装推進
  • Lottieファイルフォーマット の業界標準化と広範な普及活動
  • オープンで協力的な標準化活動を保証する Joint Development Foundation のガバナンス下でのプロジェクト運営
  • コミュニティ全体での 透明性 を重視し、誰もが仕様策定や改善プロセスに参加可能

コントリビューションについて

  • LAC は、誰でも参加できる オープンな貢献活動 を推進
    • 仕様策定やツール開発、ドキュメント整備など多様な貢献分野
    • GitHub等でのコラボレーションを推奨
  • コミュニティメンバーは、 Lottie File Format の改良や普及活動に意見やアイデアを提案可能
  • 参加方法や詳細情報は、 公式ウェブサイトやリポジトリ にて案内

Hackerたちの意見

アニメーションの共通でオープンなフォーマットがあるっていうアイデアはいいと思う。ただ、CSSやSVGベースのアニメーションについてもっと学ぶ代わりに、Lottieを使おうとするウェブ開発者が結構いるのが気になるんだよね。Lottieはライブラリやラッパーで数百キロバイト追加されるし、アニメーションごとにさらに増えるし。そういう意味では、Lottieの小さいサイズをメインサイトで自慢してるのもあまり好きじゃない。GIFやPNGファイルとしか比較してないし、SVG/CSSアニメーションのことは全然触れてないから。とはいえ、ネイティブモバイルアプリには合ってると思うけどね。

└

自分の経験では、Lottieが本当に優れているのはデザイン作成ツール、特にAfter Effectsのターゲットフォーマットとしてだと思う。リンクされた記事でも、ライブラリとファイルフォーマットの元々の動機として触れられているしね。そもそも、そんなものを手で書く人はいないよ。モバイルアプリ開発者としてLottieアニメーションを使ったことはあるけど、自分で作ったことはないんだ。

└

LottieアニメーションをSVG+JSにコンパイルすることはできないのかな？それがまだできていないだけなのかも。

└

CSSやSVGベースのアニメーションについてもっと学ぶ代わりに 反対意見だけど、FlashはWeb 1.0の中で最高のものの一つだったよ。強制的にCSSに移行させられたり、他の「標準」の星座がFlashがかつて提供していたものに追いついていない。Flashは、動画フォーマット、アニメーションフォーマット、プログラミング環境、動画プレーヤー、インタラクティブUIシステム、ゲームプログラミングエンジン、マルチプレイヤーMMOゲーム開発エンジン、インフォグラフィックスシステムなど、実際には自分が望むものすべてを兼ね備えていた。しかも、子供でも使えるくらいシンプルだった。もしAdobeがフォーマットやプレーヤーなどをオープンにしていたら、今でも続いているような素晴らしいものになっていたかもしれない。これを再考してやり直す余地はあると思う。CSSやSVG、HTML、JavaScriptだけが唯一の方法だなんて、そんなにドグマティックになる必要はないよ。彼らはもう40年近く輝いてきたけど、まだ同じ問題に苦しんでいる。車輪を再発明しようとするべきだよ。

└

それに、CSSアニメーション（新しいWeb Animations APIも含めて）はハードウェアアクセラレーションを許可するけど、こういうライブラリはそうじゃないからね。

└

Lottieのポイントは、CSSトランジションのようなシンプルなアニメーションじゃなくて、もっと複雑で自由なアニメーションだよ。ちょっとした動きじゃなくて、アニメーションのようなもの。いい例は、Lottieをアニメーションステッカーのフォーマットとして使っているTelegramメッセンジャーだね。例えば、https://tlgrm.eu/stickers/Princess（クリックするとアニメーションするよ）。

LottieとRiveの実装や埋め込みの経験はほとんどないけど、Riveの方が明らかに良かったって言える。将来的にどちらかを選ぶ必要があるとしたら、Lottieについて何か見落としてることがあるのかな？

└

Riveのことは今まで知らなかったけど、プロジェクトで使えそうな感じ。ありがとう、こういう情報があるとHNにハマっちゃうんだよね。

└

私自身はRiveを使ったことはないけど、その進捗を追っている。特に、Lottieのクリエイターが数年前にRiveチームに加わったことが注目に値する。この分野で評価するツールのリストには入れておきたい。私が関わったプロジェクトでは、デザイナーが使いたいアニメーションの種類に対してファイルサイズが非常に難しいことから、Lottieの使用に反対してきた。SVGatorは別の成功した代替手段だった。一つ非常にイライラしているのは、Lottieがファイルサイズについて何も言わずに推奨されている場所が多いこと。例えば、Webflowのようなツールや、テックコミュニティの著名な人物からの一般的な推奨。Lottieには適切なポイントがあると思うけど、ほとんどの人が使っているケースにはもっと良い選択肢があると確信している。

Lottieは私にとって悲しみそのもの。アイデア自体は好きだし、アニメーターが使っているものからアニメーションを生成できるのはすごくクールだけど、実装が本当に残念すぎる。フォーマットは、この用途には最悪の選択肢の一つだと思う。JSONだし、通常は数字の塊で、もっとコンパクトなバイナリフォーマットにぴったりなのに。このJSONは外部ファイルを参照できるから、アニメーションは以下のいずれかになる。- ファイルがたくさん入ったフォルダ（サブ画像） - それとも、ファイルがJSON内にbase64でインライン化されている - それか、単一のファイルで、結局はこの統合のzipフォルダになっている。これをウェブで読み込むことを想像してみて。絶対に巨大なSDKを読み込まなきゃいけない（しかもあまりメンテナンスされてないし、サイズ最適化もあまりされてない）。アニメーションを読み込むには、ファイルを別々に読み込むか、単一のファイルを読み込んで、複数の異なるパーサーを通して処理する必要がある（JSON、base64、png、lottie、zip）。.lottieファイルを使う場合、JSバンドルにzipデコンプレッサーを含めなきゃいけない（.lottieプレイヤーは別のライブラリで、2MBのwasm blobも使ってるけど、理由はよくわからない）。このクレイジーなもののフットプリントをアプリで抑えるのに時間がかかったし、ホットパスで使ってないのは良かった。だって、これはただのクレイジーだもん。特別な時のためのちょっとしたおまけのはずなのに、コードベースの中で一番重い部分になってる。アニメーションを手動で調整したり、いくつかの最適化ツールを通したり、変なパスやインラインの問題を修正したり、ベクターをpngに変換するエクスポーターの問題を直したり、いろいろやった。さらに、ブラウザは同時にいくつかのアニメーションを再生するのが安定しない（特に低スペックのデバイスでは）、だって（誰が予想した？）JSとDOMでアニメーションするのはあまりパフォーマンスが良くないから。週末プロジェクトでこれを最適化されたsvgスプライトに変えて、CSSトランジションで再生してみたいな。これで少しはマシになるか試してみたい。

└

あなたが言ったこと、100%同意。私が遭遇したのは、ひどいAfter EffectsからLottieへのワークフロー。多くのレイヤーやスタイルがエクスポートするときにうまくいかないから、モーションデザイナーにどの機能が使えるか、どれが使えないかを説明しなきゃいけないんだけど、彼らはそれをあまり喜ばないことが多い。多くの場合、動画をレンダリングして再生をインタラクションに結びつける方が、Lottieを使うよりもずっと軽量で手間がかからない。Riveについては前に聞いたことがあるけど、彼らの選択肢はLottieの問題を解決するための正確な修正のように見える。ただ、まだ使ったことはないから、あなたの経験次第だね。

└

モバイルでの私の経験はLottieに対してかなり優しかった。主にランタイムで編集可能なテキストのおかげ。15種類の異なるアセットを送らずに、フルローカリゼーションを想像してみて...

└

それはファイルフォーマットじゃなくて、ビルドシステムのように聞こえるね。音声をサポートするコンテナフォーマットの中で動作するの？

└

私が働いていた会社では、ウェブアプリのバンドルが8MB（圧縮すると約2MB）だった。簡単に調べたところ、それがLottieライブラリ（約2MB）と、初回ユーザーにしか表示されない4つのアニメーションで構成されていることがわかった。2つのアニメーションを削除して、残りの2つをLottie自体と一緒にレイジーローディングにまとめることができた。それでも、8MBのバンドルが悪いことだとデザイナーや他の開発者を本当に納得させられなかったから、その戦いは勝ったとは思えない。

└

MXFみたいなのがあれば完璧だったね。

└

Lotteを使った時は、Lotteとmp4の選択肢があったけど、mp4に比べてLotteはかなりサイズが小さいんだよね。

└

最後に彼らと仕事をした時は、他のフォーマットに簡単にレンダリングする方法がほぼなかったし、見つけたツールは基本的にChromiumインスタンスを立ち上げて各フレームをコピーするだけだったから、透明度が崩れちゃったんだよね。

└

Lottieって、時間圧縮しないの？ただのpフレームのシーケンスとjsonマニフェストだけなの？

└

ブラウザは同時にいくつか再生するのが安定してできないんだよね。対照的に、2000年代初頭には、うざいアニメーションのFlash広告でいっぱいのウェブページがたくさんあったけど、あれはイライラするけど、当時の典型的なシングルコアCPUでもまあまあ動いてたんだよね。

私たちは自分たちのサイト https://resonancy.io のためにアニメーションを作りたくて、lottielabを使って作ったんだ。正直言って、SVGと本当に連携する decent なエディタを作ってくれたのは素晴らしいと思う。今まで使ったオンラインツールの中で一番良い。全体的にスムーズな体験だった。でも、エクスポートが問題。これがlottielabの問題なのかlottieフォーマットの問題なのかわからないけど、彼らのプロプライエタリなホスティングを使わないと、アニメーションが大きすぎてランディングページには使えないと考えてしまう。彼らの圧縮は、大きなアニメーションの場合、平均で400%サイズを減らしてくれる。結局、アニメーションをホスティングするためだけに$30のサブスクリプションを払ったけど、なんか納得いかない。だから代替案を探すつもりだけど、再作成するのは気が進まない。過去には他のReactベースのアニメーションライブラリを使ったけど、アニメーションを作るのが本当に面倒で、複雑なことには挑戦しなかった。lottielabを使えば、想像できるものを比較的簡単に作れる。Riveは試したことがないけど、チェックしてみるつもり。lottieフォーマットをより良く圧縮するためのライブラリについての提案があれば、ぜひ教えてほしい。

Rive（Lottieの競合）の問題は、アーティスティックな作り方が少ないこと。ペンやブラシツールで自由に描けるわけじゃない。特定のやり方でやらなきゃいけなくて、主にSVGをインポートすることを意味する。UIに関してはFlashのシンプルなアーティスティックな視点がない。面白いこともやってるけど、Flashより直感的ではない。

└

ラスタ画像も入力用のサポートされているアセットタイプだよ。

うちの企業のUIライブラリは、スピナーやプログレスバーみたいなアニメーションコンポーネントにlottie-webを使ってる。このページ: https://airbnb.io/lottie/#/community-showcase は、うちの会社支給のノートPCをめっちゃ熱くさせるんだ。CSSでやってたら、こんな影響はなかったと思う。

└

あのページにはアニメーションのGIFがいっぱいあるよ。

うちは何年もPBS KIDSのブランドアニメーションにLottieを使ってるけど、他のフォーマットよりもいろいろな利点があるよ。2D平面でのランタイムレンダリングは、スケールでパフォーマンスに影響が出るけど、Lottieはすべてのパイプラインやワークフローにうまく組み込める。ゲーム、アプリ、動画で使ってるんだ。多くのプラットフォームでホームレイヤーのアイドル背景アニメーションとして動かして、対応してないデバイス（Rokuみたいな）には静的な体験を提供してる。After Effectsはすごいツールで、このワークフローを使えば、一人でもループアニメーションを作ってLottie/Bodymovinのjsonや、放送用&YouTube用のMov、低スペックユーザー向けのSVGに簡単に変換できる。Flashの後の素晴らしい代替手段にもなったし、今はRiveも使ってて、そのjsonアニメーションを新しいワークフローにインポートできる。個人的には、HernanやPixiのMat Groves、CloudKidのMatt Karlなど、アニメーション分野のコアメンバーと一緒に仕事をしてきたけど、みんなFlashの遅れた移行に取り組んで、プラグインや新しいエクスポートフォーマット、数学を駆使してきた。これらの努力にはそれぞれの役割があって、フォーマットもそれぞれ異なるから、主要なソフトウェアがアニメーションをタイムラインで整理する方法によって互換性がないことが多い。戦いを選んで、プロジェクトに合ったツールを選ぶことが大事だね。

最近のアニメーションベクターグラフィックス生成のSOTAは何だろう？テキスト指向のLLMは美しいSVGパスを描けないみたいだし、画像拡散モデルはビットマップしか生成しない。個人的には、After Effectsと一緒に使えるGenAI Illustratorの市場は十分にあると思う。

SWFの何が悪いの？仕様は公開されてるし、すごく効率的だよ。セキュリティを心配してる人たちは、すべての高度なチューリング完全な部分を実装できないっていうのがパラノイア的だね。別のJSONフォーマットっていうコメントはその通りだと思う。ウェブのクソみたいなもので溺れてるせいで、効率が何か分からない開発者が一世代生まれちゃったんだよね。

Lottie、ブラウザでCPUをめっちゃ食うんだよね。