Forward from: Пространство и время
Что же выбрать в 2026 году?
Конечно же ага, попались! Ну ладно вам, прочитайте пост, не для себя же я это всё писал и редачил.
В 2017 году команда Airbnb выкатила Lottie — формат шейповой анимации на базе JSON, а заодно движки для рендера на iOS, Android и React Native. Это в каком-то смысле произвело революцию в производстве легковесных (но линейных) анимаций.
То, что раньше приходилось буквально верстать средствами нативной разработки неделями (гифка с потеющим разработчиком и напевающим весёлым дизайнером), теперь можно было экспортировать в пару кликов прямо из Афтера.
Минусы будут? Да — линейность. В современных интерфейсах много логики, разрешений, соотношений сторон и интерактива. Короче говоря — много состояний (а вот и подводочка к первому пункту), которые в линейной анимации просто как концепт отсутствуют. В карточках я отмечаю слабые или отсутствующие фичи оранжевым бейджиком.
⚠️ Дисклеймер
Lottie ≠ LottieFiles. Lottie сам по себе — это просто формат, поэтому сравнивать его напрямую с Rive некорректно. Чтобы уравнять шансы, я возьму экосистему LottieFiles и их новый (относительно) редактор Lottie Creator.
1. Стейт-машины и интерактив
Стейт-машины — ключевое отличие Rive от линейных анимаций Lottie. Это слой логики, который связывает таймлайны и позволяет анимации реагировать на действия пользователя. Lottie Creator появился как ответ на быстро набирающий популярность Rive и стейт-машины в нём являются прямым аналогом. До этого момента единственным «решением« линейности у Lottie был только цикл на часть кадров. От условного таймлайна на 120 кадров можно было поставить на цикл последние 60.
2. Трим пас
Одна из важнейших фич для анимации иконок и логотипов, которая позволяет контролировать отрисовку контура. Идеальна для анимации лоудеров, чекмарков, стрелок и округлых фигур. Трим пас есть в обоих софтах.
3. Блюры, градиенты и тени
В Rive привычный нам блюр называется vector feathering и достоин отдельного поста.
У Lottie нет поддержки блюров и теней, из эффектов доступны градиенты для заливок и обводок.
4. Маски
Rive поддерживает только клиппинг-маски, альфа-масок нет (но разрабы обещают). Клипинг маски дружат с блюрами и констрэйнтами.
Lottie поддерживает клиппинг, альфу и инвертированную альфу между слоями, если они заданы как track matte в афтере, но с костылями: luma и stencil часто не работают или багуют на iOS и Android.
5. Констрэйнты
Инверсная кинематика , привязка таргетов, зависимости между объектами в Rive перебрались из геймдева.
В Lottie констрэйнтов нет: только таймлайн и базовые стейт-переходы, без ИК или зависимостей объектов.
6. Кости и мэши
В Rive кости и мэши дают возможность деформировать вектор и растр, не перегружая таймлайн тонной ключевых кадров. Это упрощает жизнь аниматору,
и сильно экономит ресурсы устройства.
Lottie опять на скамейке запасных.
7. Лэйауты
Помните тот момент, когда ваш разработчик спрашивал у вас: «Где твоя мамочка, Поттер?» «А вот на этом экране чё будет, а?!» и протягивал какой-нибудь квадратный андроид или айфон размером с почтовую марку. Вот как раз для таких моментов в Rive появились лэйауты. Элементы сами подстраиваются под текущий размер контейнера, как флексбокс в CSS или авто лэйаут в Figma, без дополнительных ключевых кадров. Lottie так не умеет.
8. Чеховское ружьё Твистяра
В недавнем обновлении в Lottie Creator добавили модуль работы с физикой Physics Simulator. Он вот прямо сейчас и работает. Но если честно это жесткий компромисс, о чем LottieLab писали в своём блоге, там куча ограничений и работает это всё ну очень так себе.
В Rive пока (формально) нет, но про более крутые штуки я расскажу в следующем посте.
TL;DR
Если прямо сейчас вы с командой решаете, какой фреймворк выбрать, то я со 100% вероятностью и без раздумий скажу: «берите Rive!». И говорю это, опираясь на опыт запуска десятков кастомных и очень комплексных анимаций в приложении с десятками миллионов пользователей.
#rive #lottie #анимация
Конечно же ага, попались! Ну ладно вам, прочитайте пост, не для себя же я это всё писал и редачил.
В 2017 году команда Airbnb выкатила Lottie — формат шейповой анимации на базе JSON, а заодно движки для рендера на iOS, Android и React Native. Это в каком-то смысле произвело революцию в производстве легковесных (но линейных) анимаций.
То, что раньше приходилось буквально верстать средствами нативной разработки неделями (гифка с потеющим разработчиком и напевающим весёлым дизайнером), теперь можно было экспортировать в пару кликов прямо из Афтера.
Минусы будут? Да — линейность. В современных интерфейсах много логики, разрешений, соотношений сторон и интерактива. Короче говоря — много состояний (а вот и подводочка к первому пункту), которые в линейной анимации просто как концепт отсутствуют. В карточках я отмечаю слабые или отсутствующие фичи оранжевым бейджиком.
⚠️ Дисклеймер
Lottie ≠ LottieFiles. Lottie сам по себе — это просто формат, поэтому сравнивать его напрямую с Rive некорректно. Чтобы уравнять шансы, я возьму экосистему LottieFiles и их новый (относительно) редактор Lottie Creator.
1. Стейт-машины и интерактив
Стейт-машины — ключевое отличие Rive от линейных анимаций Lottie. Это слой логики, который связывает таймлайны и позволяет анимации реагировать на действия пользователя. Lottie Creator появился как ответ на быстро набирающий популярность Rive и стейт-машины в нём являются прямым аналогом. До этого момента единственным «решением« линейности у Lottie был только цикл на часть кадров. От условного таймлайна на 120 кадров можно было поставить на цикл последние 60.
2. Трим пас
Одна из важнейших фич для анимации иконок и логотипов, которая позволяет контролировать отрисовку контура. Идеальна для анимации лоудеров, чекмарков, стрелок и округлых фигур. Трим пас есть в обоих софтах.
3. Блюры, градиенты и тени
В Rive привычный нам блюр называется vector feathering и достоин отдельного поста.
У Lottie нет поддержки блюров и теней, из эффектов доступны градиенты для заливок и обводок.
4. Маски
Rive поддерживает только клиппинг-маски, альфа-масок нет (но разрабы обещают). Клипинг маски дружат с блюрами и констрэйнтами.
Lottie поддерживает клиппинг, альфу и инвертированную альфу между слоями, если они заданы как track matte в афтере, но с костылями: luma и stencil часто не работают или багуют на iOS и Android.
5. Констрэйнты
Инверсная кинематика , привязка таргетов, зависимости между объектами в Rive перебрались из геймдева.
В Lottie констрэйнтов нет: только таймлайн и базовые стейт-переходы, без ИК или зависимостей объектов.
6. Кости и мэши
В Rive кости и мэши дают возможность деформировать вектор и растр, не перегружая таймлайн тонной ключевых кадров. Это упрощает жизнь аниматору,
и сильно экономит ресурсы устройства.
Lottie опять на скамейке запасных.
7. Лэйауты
Помните тот момент, когда ваш разработчик спрашивал у вас: «Где твоя мамочка, Поттер?» «А вот на этом экране чё будет, а?!» и протягивал какой-нибудь квадратный андроид или айфон размером с почтовую марку. Вот как раз для таких моментов в Rive появились лэйауты. Элементы сами подстраиваются под текущий размер контейнера, как флексбокс в CSS или авто лэйаут в Figma, без дополнительных ключевых кадров. Lottie так не умеет.
8. Чеховское ружьё Твистяра
В недавнем обновлении в Lottie Creator добавили модуль работы с физикой Physics Simulator. Он вот прямо сейчас и работает. Но если честно это жесткий компромисс, о чем LottieLab писали в своём блоге, там куча ограничений и работает это всё ну очень так себе.
В Rive пока (формально) нет, но про более крутые штуки я расскажу в следующем посте.
TL;DR
Если прямо сейчас вы с командой решаете, какой фреймворк выбрать, то я со 100% вероятностью и без раздумий скажу: «берите Rive!». И говорю это, опираясь на опыт запуска десятков кастомных и очень комплексных анимаций в приложении с десятками миллионов пользователей.
#rive #lottie #анимация