Animowane obrazy wektorowe w funkcji Utwórz

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

  • format pliku AnimatedVectorDrawable
  • ImageVector z interfejsami API animacji Compose, tak jak w tym artykule w Medium
  • rozwiązanie innej firmy, np. Lottie

Animowane obiekty rysowalne wektorowo (funkcja eksperymentalna)

Animacja przedstawiająca przesypujący się piasek w klepsydrze, która się obraca
Rysunek 1. Animowany obiekt rysowalny wektorowo w Compose

Aby użyć zasobu AnimatedVectorDrawable, wczytaj plik obiektu rysowalnego za pomocą animatedVectorResource i przekaż wartość boolean, aby przełączać się między stanem początkowym a końcowym obiektu rysowalnego, 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 obiektu rysowalnego znajdziesz w artykule Animowanie grafiki obiektu rysowalnego.

  • Uwaga: tekst linku jest wyświetlany, gdy język JavaScript jest wyłączony.
  • Wczytywanie obrazów
Wstecz
Animacje oparte na wartości
Dalej
Dostosuj animacje