Lottie
Filename extension
json
Developed byHernan Torrisi
Initial release2015
Type of formatVector animation
Extended fromJSON, Adobe After Effects
Extended todotLottie
Websitehttps://airbnb.io/lottie
A white woman holding paper and a writing implement while looking at a table with drawings and silhouettes.
Lotte Reiniger in 1939

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 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.[1]

The different player implementations have tradeoffs between CPU, GPU and memory usage.[2]

History

2015 - Hernan Torrisi released a plugin named Bodymovin[3] 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.[4] Additionally, Torrisi released the a renderer for the format with a JavaScript based player for modern browsers. [1] [5]

2017 - it was the work of engineers Brandon Withrow (iOS), Gabriel Peal[6] (Android), and Leland Richardson (React Native) along with lead animator Salih Abdul-Karim at AirBnB that saw the creation of the first Lottie libraries[7] to render the animations in different platforms.[8]

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 - Thor Vector Graphics (ThorVG) one of the vector graphics library began to support the Lottie rendering feature. [13]

Example

Example of a rendered lottie

This code will produce the circle shown in the image:

{
    "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

dotLottie
Filename extension
.lottie
Initial release2020
Type of formatVector animation
Container forLottie
Extended fromZip file
Websitehttps://dotlottie.io/

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. [4]


References

  1. 1 2 3 4 "What is a Lottie animation? - LottieFiles". lottiefiles.com. Retrieved 11 January 2022.
  2. ↑ Biørn-Hansen, Andreas; Grønli, Tor-Morten; Ghinea, Gheorghita (5 May 2019). "Animations in Cross-Platform Mobile Applications: An Evaluation of Tools, Metrics and Performance". Sensors. 19 (9): 2081. Bibcode:2019Senso..19.2081B. doi:10.3390/s19092081. PMC 6539844. PMID 31060290.
  3. ↑ Torrisi, Hernan (15 December 2021). "bodymovin-extension". GitHub. Retrieved 11 January 2022.
  4. 1 2 "Introducing dotLottie". dotlottie.io. Retrieved 11 January 2022.
  5. ↑ "bodymovin-extension". December 15, 2021 – via GitHub.
  6. ↑ Behind the Creation of Lottie, retrieved 2022-02-17
  7. ↑ "Lottie Docs". airbnb.io. Retrieved 2021-12-14.
  8. ↑ "Lottie". Lottie. AirBnB. Retrieved 11 January 2022.
  9. ↑ "Lottie-Windows". December 15, 2021 – via GitHub.
  10. ↑ "Announcing QtLottie". www.qt.io.
  11. ↑ "rlottie: A New Approach to Motion Graphics".
  12. ↑ "python-lottie Changelog" – via GitLab.
  13. ↑ "thorvg 0.10.0 release note" – via Github.


This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.