
Lottieはベクターグラフィックアニメーションのファイル形式で、シルエットアニメーションのドイツの先駆者であるシャーロット「ロッテ」ライニガーにちなんで名付けられました。 [ 1 ]
LottieはJSONをベースとしていますが、Lottieファイルは1~2文字の長さのキーを使用し、人間が読み取ることはできません。ウェブ、モバイル、デスクトップアプリケーションで使用するための、アニメーションGIFやAPNGファイルの軽量な代替手段として意図されています。ベクター形式であるため、デバイスの解像度に依存しません。ラスターグラフィック要素を含めることもできます。また、インタラクティブな要素を含めることも可能です。[ 1 ]
さまざまなプレイヤー実装には、CPU、GPU、メモリ使用量のトレードオフがあります。[ 2 ]
2015年 - Hernan Torrisiは、アニメーションソフトウェアAdobe After Effects用のBodymovin [ 3 ]というプラグインをリリースしました。これは、アニメーションをJSONとしてシリアル化し、実行時にレンダリングするものです。After Effectsの内部フォーマットの機能の一部はサポートしていましたが、すべてではありませんでした。[ 4 ]さらに、Torrisiは、最新のブラウザ向けのJavaScriptベースのプレーヤー を備えたフォーマットのレンダラーもリリースしました 。[ 1 ] [ 5 ]
2017年、 AirbnbのエンジニアであるBrandon Withrow(iOS)、Gabriel Peal [ 6 ](Android)、Leland Richardson(React Native)とリードアニメーターのSalih Abdul-Karimの協力により、さまざまなプラットフォームでアニメーションをレンダリングするため の最初のLottieライブラリ[ 7 ]が作成されました。[ 8 ]
他の企業はより多くのプラットフォームをサポートしている。[ 1 ]
2018年 - Microsoftと.NET Foundationは、Windows上でLottieをレンダリングするためのライブラリ[ 9 ]をリリースしました。
2019年 - LottieのさらなるサポートはQt [ 10 ]によって提供され、LottieをレンダリングするためのQML APIがリリースされました。同年後半、Samsungはプラットフォームに依存しないC++ベースのLottieレンダラーであるrLottie [ 11 ]をリリースし、TizenにLottieのサポートを追加しました。このフォーマットを扱うためのPythonフレームワークも同年リリースされました。[ 12 ]
2020年 - dotLottieが開発されました。このオープンソースのファイル形式は、複数のLottieファイルとそのすべての関連リソースを1つのファイルに統合します。
2023年 - ThorVGはLottieレンダリング機能のサポートを開始しました。[ 13 ]
2024年 - Lottie Animation Communityがファイル形式の標準化のために設立されました。[ 14 ]
2024年 -ウェブページのホスティングでアニメーションを再生できるようにするnpmパッケージlottie-playerが、仮想通貨保有者を標的とするコードを挿入するために一時的に侵害された。[ 15 ]
![]()
このコードは、上記の円の512ピクセルの画像を生成します。
{ "v" : "5.7.1" , "ip" : 0 , "op" : 180 , "nm" : "Animation" , "fr" : 60 , "w" : 512 , "h" : 512 , "layers" : [ { "ddd" : 0 , "ty" : 4 , "ind" : 0 , "st" : 0 , "ip" : 0 , "op" : 180 , "nm" : "Layer" , "ks" : { "a" : { "a" : 0 , "k" : [ 256 , 256 ] }, "p" : { "a" : 0 , "k" : [ 256 , 256 ] }, "s" : { "a" : 0 , "k" : [ 100 , 100 ] }, "r" : { "a" : 0 , "k" : 0 }, "o" : { "a" : 0 , "k" : 100 } }, "shapes" : [ { "ty" : "el" , "nm" : "Ellipse" , "d" : 1 , "p" : { "a" : 0 , "k" : [ 256 , 256 ] }, "s" : { "a" : 0 , "k" : [ 256 ,256 ] } }, { "ty" : "st" 、"nm" : "ストローク" 、"o" : { "a" : 0 、"k" : 100 },"c" : { "a" : 0 , "k" : [ 0.114 , 0.157 , 0.282 ] }, "lc" : 2 , "lj" : 2 , "ml" : 0 , "w" : { "a" : 0 , "k" : 20 } }, { "ty" : "fl" , "nm" : "Fill" , "o" : { "a" : 0 , "k" : 100 }, "c" : { "a" : 0 , "k" : [ 0.196 , 0.314 , 0.690 ] }, "r" : 1 } ] } ] }2020年に、Lottieファイルを他のリソースと一緒にパックする標準的な方法としてdotLottieファイル形式が提案されました。このファイルは実際にはdeflateメソッドで圧縮されたzipファイルです。ファイルの操作を容易にするために、 マニフェストファイルとプレビュー画像が含まれています。 [ 4 ]