Loading article…
| ファイル名拡張子 |
json |
|---|---|
| 開発者 | エルナン・トリシ |
| 初回リリース | 2015 |
| フォーマットの種類 | ベクターアニメーション |
| 延長 | JSON、Adobe After Effects |
| 延長 | ドットロッティ |
| Webサイト | ロッティ |
Lottieはベクターグラフィックアニメーション用のファイル形式で、シルエットアニメーションのドイツの先駆者であるシャーロット・"ロッテ"・ライニガーにちなんで名付けられました。 [1]
説明
Lottie はJSONに基づいていますが、Lottie ファイルは 1 ～ 2 文字の長さのキーを使用しており、人間が読むことはできません。これは、 Web、モバイル、デスクトップ アプリケーションで使用するための、アニメーション GIFやAPNGファイルの軽量な代替として意図されています。ベクター形式であるため、デバイスの解像度に依存しません。ラスター グラフィック要素を含めることもできます。インタラクティブな要素を含めることもできます。[1]
異なるプレーヤーの実装では、CPU、GPU、メモリ使用量の間でトレードオフがあります。[2]
歴史
2015年 - ヘルナン・トリシは、アニメーションソフトウェアAdobe After Effects用のBodymovin [3]というプラグインをリリースしました。これは、アニメーションをJSONとしてシリアル化し、実行時にレンダリングするものです。これは、After Effectsの内部形式の機能の一部をサポートしていますが、すべてではありません。[4]さらに、トリシは、最新のブラウザ用のJavaScriptベースのプレーヤー を備えた形式のレンダラーをリリースしました 。[1] [5]
2017年 - エンジニアのブランドン・ウィズロウ（iOS）、ガブリエル・ピール[6]（Android）、リーランド・リチャードソン（React Native）とAirBnBの主任アニメーターのサリフ・アブドゥル・カリムの協力により、さまざまなプラットフォームでアニメーションをレンダリングするための最初の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年 - ファイル形式の標準化を目的としたロッティアニメーションコミュニティが設立されました。[14]
2024年 -ホスティングウェブページでアニメーションを再生できるnpmパッケージlottie-playerが一時的に侵害され、暗号通貨保有者を標的としたコードが挿入された。[15]
例
このコードは、上記の円の 512 ピクセルの画像を生成します。
{
"v" : "5.7.1" 、"ip" : 0 、"op" : 180 、"nm" : "アニメーション" 、"fr" : 60 、"w" : 512 、"h" : 512 、"layers" : [ { "ddd" : 0 、"ty" : 4 、"ind" : 0 、"st" : 0 、"ip" : 0 、"op" : 180 、"nm" : "レイヤー" 、"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" : "楕円" , "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 } ] } ] }
dotLottie ファイル形式
| ファイル名拡張子 |
.ロティ |
|---|---|
| 初回リリース | 2020 |
| フォーマットの種類 | ベクターアニメーション |
| コンテナ用 | ロッティ |
| 延長 | ZIPファイル |
| Webサイト | https://dotlottie.io/ |
2020年に、dotLottieファイル形式が、 Lottieファイルを他のリソースとパックするための標準的な方法として提案されました。このファイルは実際にはdeflate方式で圧縮されたzipファイルです。ファイルの操作を容易にするために、 マニフェストファイルとプレビュー画像が含まれています。 [4]
参考文献
- ^ abcd 「ロッティーアニメーションとは？ - LottieFiles」。lottiefiles.com 。2022年1月11日閲覧。
- ^ Biørn-Hansen, Andreas; Grønli, Tor-Morten; Ghinea, Gheorghita (2019 年 5 月 5 日). 「クロスプラットフォーム モバイル アプリケーションにおけるアニメーション: ツール、メトリック、パフォーマンスの評価」. Sensors . 19 (9): 2081. Bibcode :2019Senso..19.2081B. doi : 10.3390/s19092081 . PMC 6539844. PMID 31060290 .
- ^ Torrisi, Hernan (2021年12月15日). 「bodymovin-extension」. GitHub . 2022年1月11日閲覧。
- ^ ab 「dotLottie の紹介」dotlottie.io . 2022年1月11日閲覧。
- ^ 「bodymovin-extension」。2021年12月15日 – GitHub経由。
- ^ ロッティー誕生の裏側、 2022年2月17日閲覧
- ^ “Lottie Docs”. airbnb.io . 2021年12月14日閲覧。
- ^ “Lottie”. Lottie . AirBnB . 2022年1月11日閲覧。
- ^ 「Lottie-Windows」。2021年12月15日 – GitHub経由。
- ^ 「QtLottie の発表」www.qt.io。
- ^ 「rlottie: モーショングラフィックスへの新しいアプローチ」。YouTube。
- ^ 「python-lottie Changelog」。2023年12月24日 – GitLab経由。
- ^ 「thorvg 0.10.0 リリースノート」 – Github 経由。
- ^ 「Lottie Animation Community (LAC) フォーマット仕様本体による標準としての Lottie」。
- ^ Lakshmanan, Ravie (2024年10月31日). 「LottieFilesが「lottie-player」npmパッケージの侵害に関する警告を発行」. The Hacker News . 2024年11月1日閲覧。
外部リンク
- Lottie アニメーション コミュニティによるLottie 仕様
- Lottie フォーマットの人間向けガイド フォーマットの詳細なドキュメント