Rive для Flutter-приложений: что нужно знать

Привет! Я Никита Грибков, Flutter-разработчик в AGIMA. Сегодня расскажу вам про возможности Rive. Это фреймворк, который использует векторную графику для создания анимации во Flutter-приложениях. Я использовал его, чтобы сделать кнопки для Bottom Bar в своем пет-проекте. 

Элементы для анимации можно создавать в программных продуктах типа SVG или Adobe Illustrator. У меня не было опыта работы с векторной графикой, поэтому я использовал встроенный в Rive UI-интерфейс. Еще в Rive есть раздел Community. Там авторы выкладывают бесплатные анимации.

Вообще в Rive несколько слоев:

• статический слой — это слой, который отображает элемент в неподвижном состоянии;

• анимационный слой — это временная линия, на которой можно задавать ключевые кадры для изменения формы, цвета и размера элементов;

• State Machine — это часть фреймворка Rive, которая позволяет создавать сложные анимации. Он использует конечный автомат (FSM) для определения состояний и переходов между ними.

Чтобы внедрить Rive в приложение, нужно всего 2–3 строки кода. Хотя это может зависеть от сложности анимации. Но на первый взгляд, код здесь компактный и легко поддерживаемый.

Вот что получилось в итоге:

Итог: я доволен, интерфейс получился красивый, сил ушло немного. Если вам интересно узнать больше — дайте знать в комментариях. Может, напишу полноценную статью.

P. S. А еще у моего коллеги Саши Ворожищева есть канал про Flutter. Приходите читать.