Lottie анимация

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

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

Показ файлов Lottie в виджете LottieAnimation состоит из следующих шагов:

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

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

1. Загрузка JSON-файла Lottie
2. Копирование URL-адреса анимации Lottie

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

Чтобы загрузить файл Lottie JSON:

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

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

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

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

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

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

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

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

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

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

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

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

• Выберите виджет LottieAnimation в дереве виджетов или в области холста.
• Перейдите к панели свойств (в правой части экрана) и прокрутите вниз до раздела Lottie Animation.
• Найдите выпадающий список «Тип анимации» и выберите один из вариантов: «Раз«, «Петля» и «Бумеранг«.

Чтобы изменить высоту и ширину виджета LottieAnimation:

• Выберите LottieAnimation.
• Перейдите к панели свойств (в правой части экрана) и прокрутите вниз до раздела Lottie Animation.
• Найдите параметры Ширина и Высота.
• Есть два способа задать размер:
  • Чтобы задать точный размер, выберите PX и введите нужные значения.
  • Чтобы задать размеры в % от размера экрана, выберите % и введите нужное значение.

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

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

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

Ниже приведены инструкции по добавлению набивки.

Здесь приведены инструкции по настройке выравнивания.

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

Узнайте больше о добавлении действия Lottie Animation на странице ниже:

Инструкции по отображению/скрытию виджета находятся здесь.