Rive.app: новый инструмент для анимации интерфейсов без программистов

Хайп Rive объясняется его мощным подходом к созданию интерактивной графики и анимации по сравнению с Lottie. Рассказываю об особенностях работы с Rive, определенных собственноручно в боевой задаче.

Собрать анимированный онбординг для плагина (6 шагов с демонстрацией фич) с выходом на оплату подписки максимально быстро, лоукодно и креативно.

До сих пор мы использовали Lottie для создания интерфейсных анимаций, и настраивали взаимодействие с анимацией с помощью кода. Длинный процесс работы с Lottie почти всегда состоял из следующих этапов:

Для небольших .json анимаций Figma + LottieFiles плагин работают отлично, но задача по созданию анимации онбординга масштабнее и комплекснее, поэтому мы остановились на восходящей в сети звезде анимации – Rive.

Rive представляет собой мощный инструмент для дизайнеров, позволяя им создавать сложные и интерактивные анимации с управляемым состоянием для приложений, веб-сайтов и других продуктов в одном интерфейсе, похожем на фигму, без необходимости программирования.

Rive превзошел возможности Лотти, создав анимацию, которая стала быстрее, меньше, потребляет меньше памяти и полностью интерактивна — и все это в одном инструменте.

FigJam, DuoLingo, Notion уже используют Rive в своих продуктах, Webflow и Framer анонсировали Rive плагины, а основатель Lottie Эрнан Торриси присоединился к Rive.

Хотя Rive создан по образу и подобию фигмы, стоит уделить время на изучение его функционала через официальные руководства и обучающие материалы. Вот основные функции, которые сложны для интуитивного понимания:

В целом, инструмент действительно прогрессивный, нужно просто разобраться в логике работы его функций, потратив пару часов на обзоры и пару дней на практику. Поэтому собрать отзывчивую релативную анимацию онбординга получилось довольно быстро, но сразу после экспорта были обнаружены проблемы, которые пришлось решать, жертвуя временем и функционалом.

Главной ошибкой стало игнорирование этапа тестирования функционаоа. Вместо проверки мини-версии анимации фокус оказался на проработке полной версии со всеми настройками плавности и красоты. После экспорта полной версии выяснилось, что она не отображается даже в превью-плеере Rive. Причина оказалась банальной, но по началу она вызвала беспокойство и судорожные попытки исправить проблему.

Предполагаемой причиной стал вес анимации (2 МБ), который был в 2 раза больше допустимого (по меркам задачи), поэтому подозрение пало на растровые изображения. Попытка их оптимизации не дала ощутимых результатов, но при проверке веса ассетов в самом конце списка были обнаружены два шрифта, общий вес которых составил мегабайт. Самым тяжелым из них был Inter (786 КБ), который незаметно автоматически добавляется в проект при использовании инструмента Text.

Было решено перевести шрифты в кривые, от чего пострадала гибкость бэкапа и добавилось время на переработку структуры с использованием Solo, так как теперь текстовые слои нельзя анимировать с помощью Text Runs.

Вариант без шрифтов сразу запустился в превью-плеере, и проигрывался именно так, как было задуманно, без лагов и торможений. Но это вовсе не означает, что Rive не работает со шрифтами.

Истинной причиной проблем с отображением анимации в плеере стал сам плеер – неочевидным, но рабочим способом протестировать исходную анимацию со шрифтами стал плагин Rive для Framer (что первое попалось под руку). Посмотреть, что получилось в итоге, и как замечательно всё работает можно здесь.

Цепочка умозаключений по данному кейсу:

Работа с Rive продемонстрировала множество преимуществ по сравнению с предыдущими инструментами, однако, как и любая новая платформа, она требует времени для освоения и тестирования.

Проблема с плеером показала, что стоит использовать новые инструменты с интересом и подозрением, и проводить больше тестов и экспериментов в процессе работы. Это может стать отличным принципом в эпоху перемен и обновлений.