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

Анимация Rive

Rive — это инструмент для интерактивного дизайна и анимации в реальном времени. С помощью виджета RiveAnimation вы можете легко импортировать ресурсы Rive в FlutterFlow и использовать их в своем приложении.

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

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

  1. Нажмите + New File.
  2. Укажите размеры Artboard (ширину и высоту).
  3. Нажмите Create.

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

к сведению

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

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

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

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

warning

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

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

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

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

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

Управление анимацией с помощью action​

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

Добавление Rive Animation [Action]​

Следуйте инструкциям ниже, чтобы определить action для запуска анимации:

  1. Выберите widget (например, Button), на котором вы хотите определить action.
  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 (Если вы дали виджету RiveAnimation имя, оно будет отображаться здесь).
к сведению

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