> В чем разница анимаций Lottie и Rive во Flutter (Flutter)

Короткий ответ

Lottie и Rive - это два разных подхода к векторной анимации во Flutter. Lottie воспроизводит JSON-анимации из After Effects (формат Bodymovin) с фиксированным таймлайном, тогда как Rive - это полноценный runtime-редактор, который позволяет создавать интерактивные, state-driven анимации с логикой внутри файла. Rive даёт больше контроля над анимацией в рантайме (например, переключение состояний, input-параметры), но требует изучения собственного редактора. Lottie проще интегрируется с дизайн-процессом на After Effects, но менее гибок для динамических сценариев.

Подробное объяснение

Основное различие лежит в философии и формате данных.

Lottie - это декодирование JSON-файлов, экспортированных из Adobe After Effects через плагин Bodymovin. Файл содержит полную информацию о слоях, ключевых кадрах, easing-кривых, масках и эффектах. Во Flutter пакет lottie рендерит эти данные через собственный движок, который интерполирует значения между кадрами. Анимация по сути линейна: вы задаёте AnimationController, и он проигрывает таймлайн от 0 до 1. Взаимодействие ограничено - можно управлять скоростью, направлением, повторением, но нельзя менять логику внутри самой анимации без пересоздания файла.

Rive - это отдельный инструмент (редактор и runtime). Файл .riv содержит не только визуальные данные, но и state machine (конечный автомат), который определяет переходы между состояниями анимации. В рантайме вы можете отправлять input-сигналы (boolean, number, trigger) в state machine, и анимация реагирует на них. Это позволяет создавать сложные интерактивные сценарии: например, кнопка с разными состояниями (normal, hover, pressed, disabled), персонаж с переключением эмоций, анимация, реагирующая на свайпы. Rive также поддерживает nested timelines, mix-and-match анимаций (например, отдельно анимация рук и ног персонажа).

Ключевые отличия по критериям:

• Формат: Lottie - JSON (текстовый, человекочитаемый), Rive - бинарный .riv (компактнее, быстрее парсится).
• Редактор: Lottie требует After Effects (платный, тяжёлый), Rive - собственный веб-редактор (бесплатный, лёгкий).
• Интерактивность: Lottie - только линейное воспроизведение, Rive - state machine с input-параметрами.
• Производительность: Rive обычно быстрее, так как использует собственный рендеринг (Skia/Impeller) и оптимизированный бинарный формат. Lottie может быть тяжёлым для сложных анимаций с большим количеством слоёв.
• Размер файла: Rive-файлы часто меньше, особенно для сложных анимаций, из-за бинарного формата и отсутствия лишних метаданных After Effects.
• Экспорт: Lottie - один файл на анимацию, Rive - один файл может содержать множество артбордов и state machines.

На практике

Выбор зависит от сценария использования.

Lottie лучше подходит, когда:

• У вас уже есть дизайнер, работающий в After Effects.
• Анимации статичны по логике (загрузчики, иконки, иллюстрации, onboarding).
• Нужна быстрая интеграция с существующим дизайн-процессом.
• Команда не готова осваивать новый инструмент.

Rive предпочтителен, когда:

• Нужна интерактивность: анимации, реагирующие на жесты, состояния UI, геймплей.
• Требуется переиспользование частей анимации (например, один персонаж с разными действиями).
• Важна производительность на слабых устройствах.
• Дизайнер готов работать в веб-редакторе Rive.

На практике во Flutter оба пакета (lottie и rive) зрелые и поддерживаются. Rive имеет более низкоуровневый API для продвинутого контроля (например, доступ к артбордам, смену state machine в рантайме), тогда как Lottie - простой Lottie.asset с контроллером.

Пример кода

// Lottie - простая загрузка и воспроизведение
import 'package:lottie/lottie.dart';

Lottie.asset(
  'assets/animations/loader.json',
  controller: _controller,
  onLoaded: (composition) {
    _controller.duration = composition.duration;
    _controller.repeat();
  },
)

// Rive - загрузка с state machine и отправка input
import 'package:rive/rive.dart';

RiveAnimation.asset(
  'assets/animations/button.riv',
  stateMachines: ['StateMachine1'],
  onInit: (artboard) {
    final controller = StateMachineController.fromArtboard(artboard, 'StateMachine1');
    artboard.addController(controller!);
    final input = controller.findInput<bool>('isPressed');
    // далее можно менять input в ответ на события
    input?.change(true);
  },
)

Как отвечать на собеседовании

Начните с чёткого разделения: Lottie - это проигрывание готовой анимации, Rive - это интерактивная среда с логикой. Затем перечислите ключевые различия: формат, инструмент создания, возможность управления в рантайме, производительность. Приведите конкретный пример, когда вы выбрали бы Rive (например, кнопка с анимацией нажатия и переключением состояний) и когда Lottie (простой спиннер). Упомяните, что оба пакета хорошо работают во Flutter, но Rive даёт больше гибкости для сложных сценариев. Если интервьюер спросит про производительность, скажите, что Rive обычно эффективнее из-за бинарного формата и собственного рендеринга, но для простых анимаций разница незначительна.

Что проверяет интервьюер

Интервьюер оценивает:

• Понимание различий между декларативным (Lottie) и императивным (Rive) подходом к анимации.
• Знание экосистемы Flutter: какие пакеты существуют, как они устроены.
• Умение выбирать инструмент под задачу, а не просто знать названия.
• Глубину: знаете ли вы про state machine, input-параметры, nested timelines в Rive, про Bodymovin и ограничения Lottie.
• Практический опыт: как вы интегрировали анимации в реальные проекты, с какими проблемами сталкивались.

Типичные ошибки

• Говорить, что Lottie и Rive - это одно и то же, просто разные форматы. Это не так: Rive - это полноценный движок с логикой.
• Утверждать, что Lottie не поддерживает интерактивность вообще. Она поддерживает, но только через внешний код (например, смена анимации по событию), а не внутри файла.
• Забывать про производительность: для тяжёлых анимаций Lottie может тормозить на слабых устройствах, а Rive - нет.
• Не упоминать, что Rive позволяет переиспользовать части анимации (например, один персонаж с разными действиями), что критично для игр и сложных UI.
• Путать state machine в Rive с простым переключением анимаций - это разные вещи: state machine - это конечный автомат с условиями переходов, а не просто список анимаций.