Rive.app: новый инструмент для анимации интерфейсов без программистов
Хайп Rive объясняется его мощным подходом к созданию интерактивной графики и анимации по сравнению с Lottie. Рассказываю об особенностях работы с Rive, определенных собственноручно в боевой задаче.
Задача
Собрать анимированный онбординг для плагина (6 шагов с демонстрацией фич) с выходом на оплату подписки максимально быстро, лоукодно и креативно.
Как было раньше
До сих пор мы использовали Lottie для создания интерфейсных анимаций, и настраивали взаимодействие с анимацией с помощью кода. Длинный процесс работы с Lottie почти всегда состоял из следующих этапов:
- Отрисовка элементов анимации в Figma (не из Illustrator, так как задачи интерфейсные)
- Экспорт элементов из Figma в After Effects через плагины
- Aнимация в After Effects
- Экспорт анимации из After Effects в Lottie через плагины
- Оптимизация веса анимации
Для небольших .json анимаций Figma + LottieFiles плагин работают отлично, но задача по созданию анимации онбординга масштабнее и комплекснее, поэтому мы остановились на восходящей в сети звезде анимации – Rive.
Что предлагает Rive
Rive представляет собой мощный инструмент для дизайнеров, позволяя им создавать сложные и интерактивные анимации с управляемым состоянием для приложений, веб-сайтов и других продуктов в одном интерфейсе, похожем на фигму, без необходимости программирования.
Rive превзошел возможности Лотти, создав анимацию, которая стала быстрее, меньше, потребляет меньше памяти и полностью интерактивна — и все это в одном инструменте.
FigJam, DuoLingo, Notion уже используют Rive в своих продуктах, Webflow и Framer анонсировали Rive плагины, а основатель Lottie Эрнан Торриси присоединился к Rive.
Что необычного в интерфейсе Rive
Хотя Rive создан по образу и подобию фигмы, стоит уделить время на изучение его функционала через официальные руководства и обучающие материалы. Вот основные функции, которые сложны для интуитивного понимания:
- Artboards работают не так, как в Figma Prototype – здесь больше общего со страницами или со сценами в 3d-софтах: один артборд на одну анимацию, а не одна анимация между несколькими артбордами.
- Ayto Layouts работают не так просто, как в Figma – здесь нужно искать комбинации между Layouts, Rows и Columns, чтобы повторить привычное удобство и логику.
- Solo – особый тип группы, объединяющий по принципу радио-кнопок элементы, которые отображаются по очереди. Когда вы активируете режим Solo для одного элемента, все остальные элементы становятся невидимыми.
- Constraints работают не так, как в Figma – эта функция позволяет одному объекту (дочернему) следовать за другим (родительским) по позициям, вращению и масштабу, что аналогично концепции Parenting в After Effects, хотя привязки к границам здесь тоже есть.
- Маску в Rive нужно делать через Clip, причем сама маска может лежать где угодно, на одну маску может ссылаться несколько слоев. Также Clip заменяет функцию Clip Content в Figma.
- Draw Order – революционная фича для анимации положения слоев в иерархии объектов, позволяет не меняя структуры отображать один объект над другим, похоже на анимацию Z-индекса.
- Text Runs и Text Modifiers позволяют создавать уникальные текстовые анимации, вроде GSAP Stagger и даже круче.
- State Machine — это одна из ключевых функций Rive, позволяющая программировать поведение анимации без программиста. Понимание того, как связать различные анимации и управлять их поведением в зависимости от действий пользователя требует времени на изучение.
- Архиважно следить за активным режимом Design / Animate, чтобы не вносить изменения в таймлайн вместо артборда. К этому тоже нужно привыкнуть.
В целом, инструмент действительно прогрессивный, нужно просто разобраться в логике работы его функций, потратив пару часов на обзоры и пару дней на практику. Поэтому собрать отзывчивую релативную анимацию онбординга получилось довольно быстро, но сразу после экспорта были обнаружены проблемы, которые пришлось решать, жертвуя временем и функционалом.
Главная ошибка
Главной ошибкой стало игнорирование этапа тестирования функционаоа. Вместо проверки мини-версии анимации фокус оказался на проработке полной версии со всеми настройками плавности и красоты. После экспорта полной версии выяснилось, что она не отображается даже в превью-плеере Rive. Причина оказалась банальной, но по началу она вызвала беспокойство и судорожные попытки исправить проблему.
Причина
Предполагаемой причиной стал вес анимации (2 МБ), который был в 2 раза больше допустимого (по меркам задачи), поэтому подозрение пало на растровые изображения. Попытка их оптимизации не дала ощутимых результатов, но при проверке веса ассетов в самом конце списка были обнаружены два шрифта, общий вес которых составил мегабайт. Самым тяжелым из них был Inter (786 КБ), который незаметно автоматически добавляется в проект при использовании инструмента Text.
Было решено перевести шрифты в кривые, от чего пострадала гибкость бэкапа и добавилось время на переработку структуры с использованием Solo, так как теперь текстовые слои нельзя анимировать с помощью Text Runs.
Вариант без шрифтов сразу запустился в превью-плеере, и проигрывался именно так, как было задуманно, без лагов и торможений. Но это вовсе не означает, что Rive не работает со шрифтами.
Истинной причиной проблем с отображением анимации в плеере стал сам плеер – неочевидным, но рабочим способом протестировать исходную анимацию со шрифтами стал плагин Rive для Framer (что первое попалось под руку). Посмотреть, что получилось в итоге, и как замечательно всё работает можно здесь.
Цепочка умозаключений по данному кейсу:
- Вес шрифтов в Rive напрямую влияет на итоговый вес анимации (логично).
- Большой вес гипотетически может стать причиной проблем с отображением.
- Если в анимации используются нестандартные шрифты, которые не поддерживаются Preview Player, это может привести к проблемам с отображением в плеере.
Основные проблемы при экспорте .riv
- Если в анимации используются нестандартные шрифты или шрифты, которые не поддерживаются Rive, это может привести к ошибкам отображения текста.
- Использование слишком сложных векторных объектов или большого количества слоев может привести к проблемам с производительностью и увеличению размера файла.
- При экспорте могут возникать артефакты, такие как черные обводки или неправильные цвета, особенно если используются сложные эффекты или наложения. Это часто связано с неправильными настройками альфа-каналов или режимов наложения.
- Некорректная настройка логики анимации (например, использование неправильных триггеров или состояний) может привести к тому, что анимация не будет работать так, как задумано.
- Перед экспортом важно удалить все ненужные элементы и слои из проекта. Наличие лишних объектов может привести к увеличению размера файла.
Вывод:
Работа с Rive продемонстрировала множество преимуществ по сравнению с предыдущими инструментами, однако, как и любая новая платформа, она требует времени для освоения и тестирования.
Проблема с плеером показала, что стоит использовать новые инструменты с интересом и подозрением, и проводить больше тестов и экспериментов в процессе работы. Это может стать отличным принципом в эпоху перемен и обновлений.