Lottie (file format)
| Filename extension |
json |
|---|---|
| Developed by | Hernan Torrisi |
| Initial release | 2015 |
| Type of format | Vector animation |
| Extended from | JSON, Adobe After Effects |
| Extended to | dotLottie |
| Website | airbnb |
Lottie is a file format for vector graphics animation, and is named after Charlotte "Lotte" Reiniger, a German pioneer of silhouette animation.[1]
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
The different player implementations have tradeoffs between CPU, GPU and memory usage.[2]
History
2015 - Hernan Torrisi released a plugin named Bodymovin
2017 - it was the work of engineers Brandon Withrow (iOS), Gabriel Peal
Other companies have provided support for more platforms.[1]
2018 - Microsoft and the .NET Foundation released a library[9] for rendering Lottie on Windows.
2019 - further support for Lottie was by Qt[10] with the release of a QML API for rendering Lottie. Later that same year, Samsung released rLottie[11] 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.[12]
2020 - dotLottie was created. This open-source file format combines multiple Lottie files and all their supporting resources into a single file.
2023 - ThorVG began to support the Lottie rendering feature. [13]
2024 - The Lottie Animation Community has been established to standardize the file format.[14]
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
| Filename extension |
.lottie |
|---|---|
| Initial release | 2020 |
| Type of format | Vector animation |
Zip file | |
| Website | https://dotlottie.io/ |
In 2020, the dotLottie file format was proposed as
References
- ^ a b c d "What is a Lottie animation? - LottieFiles". lottiefiles.com. Retrieved 11 January 2022.
- PMID 31060290.
- ^ Torrisi, Hernan (15 December 2021). "bodymovin-extension". GitHub. Retrieved 11 January 2022.
- ^ a b "Introducing dotLottie". dotlottie.io. Retrieved 11 January 2022.
- ^ "bodymovin-extension". December 15, 2021 – via GitHub.
- ^ Behind the Creation of Lottie, retrieved 2022-02-17
- ^ "Lottie Docs". airbnb.io. Retrieved 2021-12-14.
- ^ "Lottie". Lottie. AirBnB. Retrieved 11 January 2022.
- ^ "Lottie-Windows". December 15, 2021 – via GitHub.
- ^ "Announcing QtLottie". www.qt.io.
- ^ "rlottie: A New Approach to Motion Graphics". YouTube.
- ^ "python-lottie Changelog". 24 December 2023 – via GitLab.
- ^ "thorvg 0.10.0 release note" – via Github.
- ^ "Lottie as a standard with Lottie Animation Community (LAC) format specification body".
External links
- Lottie specification by the Lottie Animation Community
- A Human's guide to the Lottie format Extensive documentation of the format
 | This animation-related article is a stub. You can help Wikipedia by expanding it. |