Перейти к основному содержимому

Анимация Rive

Rive - это интерактивный инструмент для дизайна и анимации в реальном времени. Используя виджет RiveAnimation, вы можете легко импортировать ваши ресурсы из Rive в FlutterFlow и использовать их в своем приложении.

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

Вы можете создать анимацию с нуля, используя Rive Editor.

  1. Нажмите на + New File.
  2. Укажите размеры холста (Ширина и Высота).
  3. Нажмите Create.

Используйте инструменты дизайна Rive или импортируйте изображения, чтобы начать создание анимации. Как только ваш дизайн будет готов, вы сможете использовать Timeline и ключевые кадры для анимирования вашего дизайна.

к сведению

В вашем файле Rive должен быть как минимум один Artboard, но вы можете добавить бесконечное количество Artboards.

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

Чтобы скачать файл Rive, нажмите на иконку Экспорта (в левом верхнем углу панели инструментов Rive) и выберите Download -> For newest runtime.

Чтобы опубликовать файл в сообществе, нажмите на иконку Экспорта (в левом верхнем углу панели инструментов Rive) и выберите Publish to Community. Укажите название и описание вашей анимации и нажмите Publish to Community.

warning

Для использования файла анимации Rive в FlutterFlow вам необходимо либо скачать, либо опубликовать файл в сообществе.

Вместо создания анимации с нуля, вы также можете использовать любой ресурс Rive, опубликованный в Community.

Добавление виджета RiveAnimation​

Чтобы использовать анимацию Rive, выполните следующие действия:

  1. Перетащите виджет RiveAnimation на холст.
  2. Выберите источник Animation Source как Network или Asset.
  3. Если выбрали Network, введите Ссылку (URL загрузки) ****на анимацию. Получите ссылку, перейдя к опубликованной анимации Rive в сообществе, щелкните правой кнопкой мыши на кнопке Download и скопируйте адрес ссылки.
  4. Если выбрали Asset,
  5. Выберите Artboard из выпадающего списка.
  6. Выберите Анимации, которые хотите использовать (они импортируются из ресурса Rive). После выбора одной или нескольких анимаций вы можете использовать кнопку Предпросмотр анимаций, чтобы их воспроизвести.
  7. По умолчанию выбран тип Animation Type как Once. Если выбранные анимации содержат петлю или бумеранг, у вас будет возможность выбрать Continuous. При выборе этой опции, если анимация содержит петлю, она будет воспроизводиться непрерывно.
  8. Как правило, флажок Auto Animate остается установленным, что означает воспроизведение анимации сразу после загрузки страницы. Однако, если вы хотите использовать действие для запуска анимации, снимите его.
  9. Укажите Ширину и Высоту виджета RiveAnimation, а также выберите тип Box Fit.
  10. (Дополнительно) Если вы планируете использовать действие для запуска анимации, вы можете дать подходящее Название этому Виджету RiveAnimation, чтобы его было легче идентифицировать.

Управление анимацией с использованием действия​

Чтобы запустить анимацию RiveAnimation с помощью действия, вы можете использовать Rive Animation Action.

Добавление действия анимации Rive​

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

  1. Выберите виджет (например, Button), для которого вы хотите определить действие.
  2. Выберите Действия из панели свойств.
  3. Нажмите кнопку + Добавить действие.
  4. Выберите жест из выпадающего списка среди По касанию, По двойному касанию и Удерживании.
  5. Укажите Тип действия как Animation.
  6. Установите Выберите тип анимации на Анимация Rive.
  7. В разделе Выбор анимации Rive выберите виджет RiveAnimation (Если вы дали вашему RiveAnimation виджету имя, оно будет отображено здесь).
к сведению

В свойствах виджета RiveAnimation должен быть снят флажок Auto Animate, чтобы воспользоваться этим действием.