Lottie: какво е, анимации и как работи на мобилни платформи

Какво е Lottie и как работи

Lottie — е библиотека с отворен код, създадена от Airbnb през 2015 г. за рендиране на векторни анимации в реално време. Разработчикът създава анимацията в Adobe After Effects, експортира я чрез плагина Bodymovin в JSON, а Lottie възпроизвежда този JSON на целевото устройство, интерпретирайки слоеве, форми, прозрачност и криви на анимация.

За разлика от видео файловете или GIF, Lottie не зависи от резолюцията на екрана — анимацията се рендира векторно и изглежда еднакво на устройства с каквото и да е DPI. Размерът на JSON анимацията е средно 5-10 пъти по-малък от еквивалентен GIF или видео, което е критично за мобилните приложения с ограничен трафик.

Според Airbnb Engineering, внедряването на Lottie намали размера на анимациите в приложението с 80% в сравнение с Precomposed видео, докато честотата на кадрите остана 60 FPS на всички поддържани устройства. Днес Lottie се поддържа на iOS, Android, Flutter, React Native, Web (HTML Canvas и SVG) и настолни платформи.

Производителността на Lottie се осигурява от нативно рендиране: на iOS се използва Core Animation с CALayer, на Android — собствен Canvas рендер на C++ чрез JNI. Това позволява възпроизвеждането на сложни анимации с десетки слоеве без загуба на кадри дори на устройства от средна класа. За разлика от WebView решенията (GIF, APNG, видео), Lottie не създава отделен процес за рендиране и не използва допълнителна памет за декодиране на кадри.

Използвайте Lottie за индикатори за зареждане, икони с микровзаимодействия, onboarding екрани и празнични промо анимации, където плавността и малкият размер са важни.

Екосистемата на Lottie включва официални плейъри за осем платформи, редактор LottieFiles за предварителен преглед в браузъра и пазар с хиляди готови анимации. Разработчикът може да изтегли JSON, да го интегрира в проекта и да настрои цветовете и скоростта според дизайн системата, без да отваря After Effects. LottieFiles също предоставя SDK за ускорена интеграция с възможност за зареждане на анимации чрез AIR връзка, което позволява актуализиране на анимациите на устройствата без публикуване на нова версия на приложението в App Store или Google Play.

JSON формат на Lottie и Bodymovin

JSON схемата на Lottie — е отворен стандарт за описване на векторна анимация, състоящ се от три нива: композиция (composition), слоеве (layers) и форми (shapes). Композицията съдържа метаданни: размер на платното, честота на кадрите и продължителност.

Структура на JSON

Кореновият JSON обект съдържа полето layers — масив от слоеве на анимацията. Всеки слой може да бъде форма (Shape Layer), изображение (Image Layer), текст (Text Layer) или прекомпозиция (PreComp Layer). За всеки слой са определени трансформационни свойства: позиция, мащаб, ротация и прозрачност с връзка към ключови кадри.

const animationData = {
    "v": "5.5.2",
    "fr": 60,
    "w": 200,
    "h": 200,
    "layers": [{
        "ty": 4,
        "nm": "Circle",
        "shapes": [{
            "ty": "el",
            "p": { "k": [100, 100] }
        }]
    }]
}

Ключовите кадри (Keyframes) се задават чрез масиви с времеви печати, стойности и криви на Bezier за интерполация. Bodymovin автоматично конвертира After Effects кривите във формат, разбираем от Lottie, като запазва timing-а и ease функциите с точност на кадър.

Bodymovin — плагин за експорт

Bodymovin — е разширение за Adobe After Effects, което експортира композицията в Lottie JSON файл. Плагинът поддържа повечето функции на After Effects: форми, маски, ефекти, текстови слоеве и проследяване. Ограниченията се отнасят до 3D слоеве и някои плагини — те не се експортират и изискват опростяване на анимацията до 2D.

Интеграция на Lottie на iOS

На iOS Lottie се интегрира чрез Swift Package Manager, CocoaPods или Carthage. Основният клас — LottieView за SwiftUI и LottieAnimationView за UIKit. Пакетът lottie-ios включва поддръжка за анимации от пакета, мрежата и Data обекти.

LottieView в SwiftUI

LottieView — е View компонент за SwiftUI, който приема името на JSON файла от пакета или URL за зареждане от мрежата. Анимацията се възпроизвежда автоматично с определената скорост и брой повторения.

import Lottie

LottieView(animation: LottieAnimation
    .named("loading_spinner"))
    .loopMode(.loop)
    .animationSpeed(1.5)
    .frame(width: 100, height: 100)

За UIKit се използва LottieAnimationView с конфигурация чрез Interface Builder или програмно. View поддържа всички състояния на анимацията: play, pause, stop, както и лента за напредък за зареждане на данни. LottieAnimationView може да бъде вградена в UITableViewCell или UICollectionViewCell за анимирани икони в списъци — при превъртане анимацията на клетката се паузира, а при появяване на екрана се подновява, което икономисва CPU и GPU ресурси.

Съвременното iOS разработване активно използва Lottie в комбинация с SwiftUI за създаване на анимирани onboarding екрани и интерактивни елементи: при превъртане на екрана напредъкът на анимацията се синхронизира с позицията на превъртане чрез ScrollViewReader. Това създава паралакс ефект, при който анимацията непрекъснато следва движението на пръста на потребителя, повишавайки ангажираността без използване на тежки видео файлове.

Управление на възпроизвеждането

Lottie плейърът на iOS предоставя API за възпроизвеждане от определен до определен кадър, промяна на цвета на запълването/контура чрез KeyPaths и прослушване на събития чрез LottieAnimationDelegate. Можете да паузирате анимацията при превъртане и да я подновите при спиране за оптимизиране на производителността.

Интеграция на Lottie на Android

На Android Lottie се свързва чрез Gradle зависимост com.airbnb.android:lottie. Основният компонент — LottieAnimationView, който може да бъде поставен в XML оформлението като обикновен View и конфигуриран чрез атрибути или програмно.

@Composable
fun LoadingAnimation() {
    val composition by rememberLottieComposition(
        spec = LottieCompositionSpec.RawRes(R.raw.loading)
    )
    LottieAnimation(
        composition = composition,
        iterations = LottieConstants.IterateForever
    )
}

В XML оформлението LottieAnimationView се конфигурира чрез атрибути: lottie_rawRes (препратка към JSON в res/raw), lottie_autoPlay, lottie_loop. Зареждането от мрежата се поддържа чрез lottie_url или програмно чрез setAnimationFromUrl. Android версията на Lottie използва собствен Canvas рендер, независим от хардуерното ускорение.

Зареждане от RawRes и мрежата

За статични анимации JSON се поставя в res/raw и се реферира чрез RawRes. За динамични анимации Lottie зарежда JSON от URL или Data обект с callback за напредък, показващ процента на зареждане. Lottie кешът автоматично записва заредените анимации в паметта, за да избегне повторно зареждане при повторно рендиране.

Lottie за Android поддържа анимация в RecyclerView чрез LottieAnimationView, вградена директно в елемента на списъка. За оптимизиране на производителността се препоръчва използването на setAnimation с отложено зареждане и изключване на анимацията за невидимите на екрана елементи чрез callback RecyclerView.OnChildAttachStateChangeListener. Това предотвратява падане на FPS при превъртане на дълги списъци с анимирани икони.

Персонализация и управление на Lottie анимации

Lottie предоставя мощен API за персонализация на готови анимации без промяна на оригиналния After Effects файл. Това позволява адаптиране на една анимация към различни теми, цветове и размери на приложението.

Промяна на цвят чрез KeyPath

Цветовете на запълване и контур могат да се променят по време на изпълнение чрез KeyPath — низов път до елемента на анимацията. Например, за да замените цвета на иконата на кошницата от червен на син, достатъчно е да намерите нейния KeyPath и да приложите нова стойност. Това елиминира необходимостта от съхраняване на множество версии на една и съща анимация за различни цветови схеми.

Управление на скоростта и напредъка

Всяка Lottie анимация може да бъде контролирана по скорост (animationSpeed), напредък (setProgress) и диапазон на кадри (play(fromFrame:toFrame:)). Режимът на напредък позволява синхронизиране на анимацията с жест на превъртане: колкото по-далеч е превъртян екранът, толкова по-напреднала е анимацията — това е популярна техника за onboarding и паралакс ефекти.