Анимации Lottie

Виджет LottieAnimation проигрывает файлы Lottie — из ресурсов проекта или по ссылке. Они векторные, поэтому не пикселятся ни на каком экране, и весят заметно меньше GIF.

Обычное применение — красивый индикатор загрузки вместо стандартного кружка.

Как добавить

Три шага:

1. Получить файл Lottie
2. Добавить виджет
3. Выбрать источник анимации

1. Получить файл

Анимацию берут из официальной коллекции — двумя способами.

1.1 Скачать JSON

Этот способ нужен, если анимация будет лежать в самом проекте.

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

1.2 Скопировать ссылку

Этот способ нужен, если анимация будет подгружаться с сайта lottiefiles.com.

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

2. Добавить виджет

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

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

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

1. Выделите LottieAnimation в дереве виджетов или на холсте.
2. В панели свойств прокрутите до раздела Lottie Animation.
3. Смените значение в списке Animation Source.
4. В свойстве Asset Animation нажмите Upload LottieAnimation и загрузите файл.

Настройки

Внешний вид и поведение задаются в панели свойств.

Режим проигрывания

Анимация может проиграться один раз, зациклиться или ходить туда-обратно.

1. Выделите LottieAnimation.
2. Прокрутите панель свойств до раздела Lottie Animation.
3. В списке Animation Type выберите Once, Loop или Boomerang.

Once — один раз:

Loop — по кругу:

Boomerang — вперёд и назад:

Кадровая частота

Анимация проигрывается с той частотой, с которой её выгрузили из After Effects, — обычно 10 или 30 кадров в секунду. Современные экраны тянут 60 и 120, и на них такая анимация выглядит рвано.

Частота задаётся полем Frame Rate в properties panel > Lottie Animation.

Вписывание

Box Fit определяет, как анимация вписывается в отведённое место.

1. Выделите LottieAnimation.
2. Прокрутите панель свойств до раздела Lottie Animation.
3. В списке Box Fit выберите Fill, Contain, Cover, Fit Width, Fit Height, None или Scale Down.

Запуск и пауза по действию

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

Действие Lottie Animation

1. Выделите виджет — контейнер, кнопку или другой.
2. Выберите Actions в панели свойств и нажмите Open — откроется Action Flow Editor.
3. Нажмите + Add Action.
4. Справа найдите Lottie Animation.
5. Выберите нужную анимацию в списке Choose Lottie Animation.
6. Включите Allow Play/Pause, если анимацию нужно ставить на паузу прямо во время проигрывания. Настройка доступна, только когда у виджета снят флажок Auto Animate, а режим проигрывания — Loop или Boomerang.