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

Анимация Lottie

Виджет LottieAnimation позволяет отображать файлы Lottie из загруженных ресурсов или по URL-ссылке. Файлы Lottie обладают высоким качеством (не растрисуются), меньше по размеру, чем GIF, и легко добавляются на любую платформу.

Например, вы можете использовать виджет LottieAnimation, чтобы показать красиво анимированный индикатор загрузки и обеспечить отличный пользовательский опыт.

Добавление LottieAnimation​

Отображение файлов Lottie в виджете LottieAnimation включает следующие шаги:

  1. Получение файлов Lottie
  2. Добавление виджета LottieAnimation
  3. Изменение источника анимации

1. Получение файлов Lottie​

Для отображения анимации на экране виджет LottieAnimation требует добавления файла Lottie. Вы можете получить файлы Lottie из официальной коллекции двумя способами.

1.1 Скачивание файла Lottie JSON​

Файл Lottie JSON требуется, если вы хотите воспроизводить анимацию из файла, загруженного в ваш проект.

Чтобы скачать файл Lottie JSON:

  1. Откройте https://lottiefiles.com/ и найдите нужную анимацию.
  2. Выберите анимацию, которую хотите добавить. Откроется новое всплывающее окно.
  3. Нажмите кнопку Download и выберите Lottie JSON.

1.2 Копирование URL анимации Lottie​

URL анимации Lottie требуется, если вы хотите воспроизводить анимацию из файла, размещенного на https://lottiefiles.com/.

Чтобы скопировать URL анимации:

  1. Откройте https://lottiefiles.com/ и найдите нужную анимацию.
  2. Выберите анимацию, которую хотите добавить. Откроется новое всплывающее окно.
  3. Найдите Lottie Animation URL (в правом нижнем углу воспроизводимой анимации) и скопируйте его.
к сведению

URL анимации Lottie виден только после входа в систему.

2. Добавление виджета LottieAnimation​

Чтобы добавить виджет LottieAnimation в ваш проект:

  1. Перетащите виджет LottieAnimation из вкладки Base Elements (в панели виджетов) или добавьте его напрямую из дерева виджетов.
  2. Перейдите в панель свойств (справа от экрана) и прокрутите вниз до раздела Lottie Animation.
  3. Найдите свойство Path и введите URL (см., как получить его в 1.2) для нового файла Lottie.
  4. По умолчанию анимация воспроизводится сразу после загрузки страницы. Чтобы отключить это и запускать анимацию по клику на кнопку или по другому событию, снимите флажок Auto Animate.

3. Изменение источника анимации​

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

Вот как изменить источник анимации:

  1. Выберите виджет LottieAnimation из дерева виджетов или области холста.
  2. Перейдите в панель свойств (справа от экрана) и прокрутите вниз до раздела Lottie Animation.
  3. Найдите выпадающий список Animation Source и выберите .
  4. Теперь найдите свойство Asset Animation, нажмите кнопку Upload LottieAnimation, выберите файл Lottie и загрузите его.

Настройка​

Вы можете настроить внешний вид и поведение этого виджета с помощью различных свойств, доступных в панели свойств.

Изменение типа анимации​

Вы можете управлять способом воспроизведения анимации: воспроизводить её только один раз, в цикле или в режиме бумеранга (вперёд и назад).

Чтобы управлять типом анимации:

  1. Выберите виджет LottieAnimation из дерева виджетов или области холста.
  2. Перейдите в панель свойств (справа от экрана) и прокрутите вниз до раздела Lottie Animation.
  3. Найдите выпадающий список Animation Type и выберите один из вариантов: Once, Loop или Boomerang.

Изменение частоты кадров​

По умолчанию анимации воспроизводятся с частотой кадров, указанной при экспорте из After Effects, обычно 10 или 30 FPS. Однако современные телефоны поддерживают более высокие частоты обновления, такие как 60 или 120 FPS. Если вас не устраивает, как выглядит анимация при этих настройках по умолчанию, вы можете скорректировать её частоту кадров до более плавных 60 FPS для лучшего качества.

Для этого перейдите в панель свойств > Lottie Animation > введите значение в поле Frame Rate.

Изменение box fit​

Изменение значения Box Fit позволяет управлять тем, как анимация файла Lottie должна отображаться внутри виджета LottieAnimation. Различные варианты в свойстве Box Fit помогают масштабировать (увеличивать или уменьшать размер) анимацию файла Lottie внутри виджета LottieAnimation.

Чтобы изменить значение Box Fit:

  1. Выберите виджет LottieAnimation из дерева виджетов или области холста.
  2. Перейдите в панель свойств (справа от экрана) и прокрутите вниз до раздела Lottie Animation.
  3. Найдите выпадающий список Box Fit, попробуйте изменить значение на Fill, Contain, Cover, Fit Width, Fit Height, None или Scale Down.

Запуск/пауза анимации по нажатию кнопки​

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

Добавление действия [Action] Lottie Animation​

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

Следуйте шагам ниже, чтобы добавить это действие к любому виджету.

  1. Выберите виджет (например, Container, Button и т. д.), к которому хотите добавить действие.
  2. Выберите Actions в панели свойств (правое меню) и нажмите Open. Это откроет Action Flow Editor в новом всплывающем окне.
  3. Нажмите + Add Action.
  4. Справа найдите и выберите Lottie Animation.
  5. Выберите Lottie Animation из выпадающего списка.
  6. Включите Allow Play/Pause, если хотите запускать и приостанавливать анимацию во время её воспроизведения. Примечание: Вы можете получить доступ к этой настройке только если свойство Auto Animate виджета LottieAnimation отключено. Примечание: эта опция доступна только если вы установили тип анимации на Loop или Boomerang.