Анимированные векторные изображения в Compose

Анимировать векторные изображения в Compose можно несколькими способами. Вы можете использовать любой из следующих вариантов:

  • Формат файла AnimatedVectorDrawable
  • ImageVector с помощью API анимации Compose, как описано в этой статье на Medium.
  • Стороннее решение, например Lottie.

Анимированные векторные изображения (экспериментальная функция)

Анимированные песочные часы, содержимое которых пересыпается, а сами часы вращаются
Рисунок 1. Анимируемый класс VectorDrawable в Compose

Чтобы использовать ресурс AnimatedVectorDrawable, загрузите файл drawable с помощью animatedVectorResource и передайте boolean, чтобы переключаться между начальным и конечным состояниями drawable и выполнять анимацию.

@Composable
fun AnimatedVectorDrawable() {
    val image = AnimatedImageVector.animatedVectorResource(R.drawable.ic_hourglass_animated)
    var atEnd by remember { mutableStateOf(false) }
    Image(
        painter = rememberAnimatedVectorPainter(image, atEnd),
        contentDescription = "Timer",
        modifier = Modifier.clickable {
            atEnd = !atEnd
        },
        contentScale = ContentScale.Crop
    )
}

Подробнее о формате файла drawable можно узнать в статье Как анимировать графику drawable.