Animowane obrazy wektorowe w funkcji Utwórz

Animowanie wektorów w Compose jest możliwe na kilka różnych sposobów. Możesz użyć dowolnego z tych elementów:

  • Format pliku AnimatedVectorDrawable
  • ImageVector za pomocą interfejsów API animacji Compose, jak w tym artykule na Medium.
  • rozwiązanie innej firmy, np. Lottie;

Obiekty rysowalne wektorowo z animacją (funkcja eksperymentalna)

Animacja klepsydry z obracającą się zawartością
Rysunek 1. Animowany obiekt rysowany wektorowo w sekcji Compose

Aby użyć zasobu AnimatedVectorDrawable, wczytaj plik drawable za pomocą funkcji animatedVectorResource i przekazuj parametr boolean, aby przełączać się między początkiem a końcem pliku drawable, wykonując animację.

@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
    )
}

Więcej informacji o formacie pliku rysunkowego znajdziesz w artykule Animowanie rysunków wektorowych.