Bad Mobile: app UX/UI design

Что же выбрать в 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 #анимация