Compose: Анимация Lottie

11-й курс/Закрытая зона

Создано 9 марта 2024

Библиотека Lottie была придумана компанией Airbnb для создания кроссплатформенной анимации (Android, Windows, iOS, Web). Авторы библиотеки утверждают, что анимации в Lottie намного легче и производительнее обычной покадровой анимации или GIF-файлов. Разработчики библиотеки преследовали цель реализовать возможности After Effects. Кстати, дизайнер может делать анимацию в Adobe After Effects и экспортировать в json-файл через плагин Bodymovin.

Готовые lottie-анимации можно найти на сайте https://lottiefiles.com/featured. Через поиск можно выбрать подходящую анимацию и скачать себе json-файл.

В этой статье идёт речь применении Lottie в Compose. Но есть вариант использования в классическом варианте. Для этой цели используются следующие классы.

LottieAnimationView — наследник ImageView
LottieDrawable — наследник Drawable, позволяет применить анимацию к любой View
LottieComposition и LottieCompositionFactory позволяют предварительно загружать анимацию из различных источников и применять к LottieDrawable и LottieAnimationView

Поддерживается загрузка ресурсов из различных источников:

res/raw
src/assets
json-строки
Любые url-адреса из сети на json или zip-файл. (Если у вас анимация с изображениями, то нужно использовать zip)
InputStream json или zip-файла

Lottie поддерживает циклическое воспроизведение setRepeatMode() или setRepeatCount() не только целой анимации, но и любого фрагмента в пределах (0.0...1.0). Это реализуется свойствами setMinFrame(), setMaxFrame(), setMinAndMaxFrame.

Lottie поддерживает вставку картинок прямо в анимацию. Вы можете вставить как статичную картинку, так и динамическую из интернета.

Для статической картинки нужен архив, где содержится json и сама картинка.


{
"v": "1.1.1",
"fr": 24.8600011207021,
"ip": 0,
"op": 44.0000013143456,
"w": 800,
"h": 600,
"nm": "Composition 1",
"ddd": 0,
"assets": [
    {
     "id": "cat_0",
     "w": 250,
     "h": 400,
     "u": "images/",
     "p": "cat_0.png"
     },
     {
     "id": "comp_0",
     "layers": [
          ...
     ]}]
}

cat_0.png - это и есть картинка, которую вы должны положить в папку src/assets, и которая будет внутри анимации.

При динамической загрузке используется метод setImageAssetDelegate(), в который вы должны передать bitmap. Сначала предварительно загружаем картинку библиотекой Glide или любой другой, которая поддерживает кэш.

В целом следует осторожно использовать анимацию Lottie. Рендеринг выполняется в главном потоке, и в приложении может существенно падать fps. Кроме того, парсинг файла может занимать существенное время при сложных анимациях.

Чтобы проверить насколько ресурсоёмка анимация, можно воспользоваться официальным приложением Lottie из Google Play. Там есть Render Graph, где вы можете увидеть время на рендеринг кадра, а также посмотреть, как будет выглядеть анимация, если разрезать её по кадрам и многое другое.

Вы вошли на сайт, как гость.
Необходимо зарегистрироваться, чтобы прочитать статью

Compose: Анимация Lottie

Реклама

Реклама