Анимации Rive

Rive — редактор интерактивных анимаций. Виджет RiveAnimation подключает готовые файлы Rive к приложению.

Создание анимации

Анимацию можно собрать с нуля в редакторе Rive.

1. Нажмите + New File.
2. Задайте размеры артборда — ширину и высоту.
3. Нажмите Create.

Дальше рисуйте инструментами Rive или импортируйте картинки, а движение задавайте ключевыми кадрами на таймлайне.

Готовую анимацию либо скачивают файлом .riv, либо публикуют в сообществе Rive.

Чтобы скачать: нажмите значок экспорта в левом верхнем углу панели инструментов и выберите Download → For newest runtime.

Чтобы опубликовать: там же выберите Publish to Community, задайте title и description и нажмите Publish to Community.

Вместо своей анимации можно взять любую из сообщества.

Как добавить виджет

1. Перетащите RiveAnimation на холст.
2. Выберите Animation Source — Network или Asset.
3. Для Network введите Path — ссылку на скачивание. Её берут так: откройте анимацию в сообществе, щёлкните правой кнопкой по кнопке Download и скопируйте адрес ссылки.
4. Для Asset загрузите файл .riv в проект.
5. Выберите Artboard в списке.
6. Отметьте нужные Animations — они подтягиваются из файла. Кнопка Preview Animations проигрывает выбранное.
7. Animation Type по умолчанию Once. Если в выбранных анимациях есть цикл или боомеранг, появится вариант Continuous.
8. Флажок Auto Animate установлен: анимация запускается при открытии страницы. Чтобы запускать её действием, снимите его.
9. Задайте Width, Height и Box Fit.
10. Дайте виджету осмысленное Name, если собираетесь обращаться к нему из действия.

Запуск действием

Анимацию можно запускать из потока действий.

Действие Rive Animation

1. Выделите виджет — например, Button.
2. Выберите Actions в панели свойств.
3. Нажмите + Add Action.
4. Выберите жест: On Tap, On Double Tap или On Long Press.
5. Action Type — Animation.
6. Choose Animation Type — Rive Animation.
7. В Choose Rive Animation выберите нужный виджет RiveAnimation — если вы дали ему имя, здесь будет оно.