Lottie (file format)
{{Short description|File format for vector graphics animations}}
{{Infobox file format
|name=Lottie
| icon = Lottie_icon.svg
| extensions = .json, .lot
| mime = video/lottie+json
| developer = Hernan Torrisi
| type = Vector animation
| url = {{URL|https://lottie.github.io}}
| iconcaption =
| screenshot =
| caption =
| uniform_type =
| conforms_to =
| magic =
| released = 2015
| latest_release_version =
| latest_release_date =
| extended_from = JSON, Adobe After Effects
| extended_to = dotLottie
| standard =
| free =
| open =
| type_code =
}}
Lottie is a file format for vector graphics animation, and is named after Charlotte "Lotte" Reiniger, a German pioneer of silhouette animation.
Description
Lottie is based in JSON but Lottie files use keys of 1–2 characters in length and are not readable by humans.
It is intended as a lighter alternative to animated GIFs and APNG files for use in the web and mobile and desktop applications.
Being vectorial it is independent of the device resolution.
It can also include raster graphic elements.
It also allows for the inclusion of interactive elements.{{cite web |title=What is a Lottie animation? - LottieFiles |url=https://lottiefiles.com/what-is-lottie |website=lottiefiles.com |access-date=11 January 2022 |language=en}}
The different player implementations have tradeoffs between CPU, GPU and memory usage.{{cite journal |last1=Biørn-Hansen |first1=Andreas |last2=Grønli |first2=Tor-Morten |last3=Ghinea |first3=Gheorghita |title=Animations in Cross-Platform Mobile Applications: An Evaluation of Tools, Metrics and Performance |journal=Sensors |date=5 May 2019 |volume=19 |issue=9 |pages=2081 |doi=10.3390/s19092081 |pmid=31060290 |pmc=6539844 |bibcode=2019Senso..19.2081B |language=en|doi-access=free }}
History
2015 - Hernan Torrisi released a plugin named Bodymovin{{cite web |last1=Torrisi |first1=Hernan |title=bodymovin-extension |url=https://github.com/bodymovin/bodymovin-extension |publisher=GitHub |access-date=11 January 2022 |language=en |date=15 December 2021}} for the animation software Adobe After Effects that serialized animations as JSON to be rendered at runtime.
It supports some but not all of the features of the internal format of After Effects.
Additionally, Torrisi released a renderer for the format with a JavaScript-based player for modern browsers.{{Cite web|url=https://github.com/bodymovin/bodymovin-extension|title=bodymovin-extension|date=December 15, 2021|via=GitHub}}
2017 - it was the work of engineers Brandon Withrow (iOS), Gabriel Peal{{Citation|title=Behind the Creation of Lottie|url=https://www.youtube.com/watch?v=I2zhX4NuV_I|language=en|access-date=2022-02-17}} (Android), and Leland Richardson (React Native) along with lead animator Salih Abdul-Karim at AirBnB that saw the creation of the first Lottie libraries{{Cite web|title=Lottie Docs|url=https://airbnb.io/lottie/|access-date=2021-12-14|website=airbnb.io}} to render the animations in different platforms.{{cite web |title=Lottie |url=https://airbnb.design/lottie/ |website=Lottie |publisher=AirBnB |access-date=11 January 2022 |language=en}}
Other companies have provided support for more platforms.
2018 - Microsoft and the .NET Foundation released a library{{Cite web|url=https://github.com/CommunityToolkit/Lottie-Windows|title=Lottie-Windows|date=December 15, 2021|via=GitHub}} for rendering Lottie on Windows.
2019 - further support for Lottie was by Qt{{Cite web|url=https://www.qt.io/blog/2019/03/08/announcing-qtlottie|title=Announcing QtLottie|website=www.qt.io}} with the release of a QML API for rendering Lottie. Later that same year, Samsung released rLottie{{Cite web|url=https://www.youtube.com/watch?v=Q2c7Hj_Sa1o|title=rlottie: A New Approach to Motion Graphics|website=YouTube }} which is a platform independent C++-based renderer for Lottie, and added Lottie support in Tizen. A Python framework to work with the format was also released this year.{{Cite web|url=https://gitlab.com/mattbas/python-lottie/-/blob/master/CHANGELOG.md|title=python-lottie Changelog|date=24 December 2023 |via=GitLab}}
2020 - dotLottie was created. This open-source file format combines multiple Lottie files and all their supporting resources into a single file.
2023 - [https://www.thorvg.org ThorVG] began to support the Lottie rendering feature.{{Cite web|url=https://github.com/thorvg/thorvg/releases/tag/v0.10.0|title=thorvg 0.10.0 release note|via=Github}}
2024 - The Lottie Animation Community has been established to standardize the file format.{{Cite web|url=https://lottie.github.io/news/announcing-lottie-animation-community/|title=Lottie as a standard with Lottie Animation Community (LAC) format specification body
}}
2024 - The npm package lottie-player, that allowed playing animations in hosting web pages, was temporarily compromised to insert code that targeted cryptocurrency holders.{{cite news |last1=Lakshmanan |first1=Ravie |title=LottieFiles Issues Warning About Compromised "lottie-player" npm Package |url=https://thehackernews.com/2024/10/lottiefiles-issues-warning-about.html |access-date=1 November 2024 |work=The Hacker News |date=Oct 31, 2024 |language=en}}
Example
This code will produce a 512 pixel image of the above circle:
{
"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": "Stroke",
"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
}
]
}
]
}
The dotLottie file format
{{Infobox file format
| name = dotLottie
| icon =
| extension = .lottie
| mime =
| developer =
| type = Vector animation
| url = {{URL|https://dotlottie.io/}}
| iconcaption =
| screenshot =
| caption =
| uniform_type =
| conforms_to =
| magic =
| released = 2020
| latest_release_version =
| latest_release_date =
| container_for = Lottie
| extended_from = Zip file
| standard =
| free =
| open =
| type_code =
}}
In 2020, the dotLottie file format was proposed as a standard way to pack Lottie files with other resources.
The file is actually a zip file compressed with the deflate method.
It includes a manifest file and preview images to ease the manipulation of the files.
References
{{Reflist}}
External links
- {{Official website|https://lottie.github.io}} by the Lottie Animation Community
- [https://lottiefiles.github.io/lottie-docs/ A Human's guide to the Lottie format] Extensive documentation of the format
{{Vector graphics markup languages}}
{{Animation-stub}}
Category:Computer-related introductions in 2015
Category:2D animation software