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 — це відкритий стандарт опису векторної анімації, що складається з трьох рівнів: композиція, шари та фігури. Композиція містить метадані: розмір полотна, частоту кадрів та тривалість.

Структура JSON

Кореневий об'єкт JSON містить поле layers — масив шарів анімації. Кожен шар може бути фігурою (Shape Layer), зображенням (Image Layer), текстом (Text Layer) або прекомпозицією (PreComp Layer). Для кожного шару задаються transform-властивості: позиція, масштаб, поворот і прозорість з прив'язкою до ключових кадрів.

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) задаються масивами з часовими мітками, значеннями та кривими Безьє для інтерполяції. Bodymovin автоматично конвертує криві After Effects у формат, зрозумілий Lottie, зберігаючи таймінг та ease-функції з точністю до кадру.

Bodymovin — плагін експорту

Bodymovin — це розширення для Adobe After Effects, яке експортує композицію у JSON-файл Lottie. Плагін підтримує більшість можливостей 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 для створення анімованих онбордингів та інтерактивних елементів: при скролі екрана прогрес анімації синхронізується з позицією скролу через ScrollViewReader. Це створює ефект паралакса, при якому анімація безперервно слідує за рухом пальця користувача, підвищуючи залученість без використання важких відеофайлів.

Керування відтворенням

Lottie-плеєр на iOS надає API для відтворення з певного по певний кадр, зміни кольору fill/stroke через 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-об'єкта з прогрес-колбеком, що показує відсоток завантаження. Lottie-кеш автоматично зберігає завантажені анімації в пам'яті для уникнення повторного завантаження при повторному рендерингу.

Lottie для Android підтримує анімацію в RecyclerView через LottieAnimationView, вбудовану безпосередньо в елемент списку. Для оптимізації продуктивності рекомендується використовувати setAnimation з відкладеним завантаженням і вимикати анімацію для невидимих на екрані елементів через callback RecyclerView.OnChildAttachStateChangeListener. Це запобігає просіданню FPS при скролі довгих списків з анімованими іконками.

Кастомізація та керування анімаціями Lottie

Lottie надає потужний API для кастомізації вже готових анімацій без зміни вихідного файлу After Effects. Це дозволяє адаптувати одну анімацію під різні теми, кольори та розміри додатка.

Зміна кольору через KeyPath

Кольори fill та stroke можна змінювати в runtime через KeyPath — рядковий шлях до елемента анімації. Наприклад, для заміни кольору іконки кошика з червоного на синій достатньо знайти її KeyPath і застосувати нове значення. Це позбавляє від зберігання кількох версій однієї анімації для різних колірних схем.

Керування швидкістю та прогресом

Кожну Lottie-анімацію можна контролювати за швидкістю (animationSpeed), прогресом (setProgress) та діапазоном кадрів (play(fromFrame:toFrame:)). Прогрес-режим дозволяє синхронізувати анімацію з жестом скролу: чим далі прокручений екран, тим далі просунута анімація — це популярний прийом для onboarding та паралакс-ефектів.