Android Academy · Lektion

Grundlagen von animate*AsState

Einzelne Werte flüssig animieren

Grundlagen von animate*AsState ist eine kostenlose Android Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Android Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Android Academy-Kurs umfasst insgesamt 4 Lektionen.

Einen einzelnen Wert animieren

Die einfachste Möglichkeit, in Compose zu animieren, bietet die Familie animate*AsState. Sie übergeben einen Zielwert und erhalten einen State, der bei jeder Änderung des Zielwerts sanft vom aktuellen Wert zum Zielwert animiert.

Für jeden gängigen Typ gibt es eine Variante: animateFloatAsState, animateDpAsState, animateColorAsState, animateOffsetAsState und weitere.

animateFloatAsState

animateFloatAsState animiert einen einzelnen Float. Eine häufige Anwendung ist die Deckkraft (Alpha). Wenn visible umgeschaltet wird, gleitet der zurückgegebene Alpha-Wert zwischen 0f und 1f.

Beachten Sie das Schlüsselwort by: Damit können Sie den animierten State<Float> direkt als einfachen Float lesen.

@Composable
fun FadingLabel(visible: Boolean) {
    val alpha by animateFloatAsState(
        targetValue = if (visible) 1f else 0f,
        label = "alpha"
    )
    Text(
        "Hello",
        modifier = Modifier.graphicsLayer { this.alpha = alpha }
    )
}

animateDpAsState

UI-Größen und -Offsets verwenden Dp. Verwenden Sie daher animateDpAsState, um Innenabstände, Größen oder Positionen zu animieren.

Hier wächst eine Box beim Umschalten von 80dp auf 160dp. Da wir das animierte Dp an size() übergeben, passt sich die Größe der Box sanft an.

@Composable
fun GrowingBox(big: Boolean) {
    val size by animateDpAsState(
        targetValue = if (big) 160.dp else 80.dp,
        label = "size"
    )
    Box(
        Modifier
            .size(size)
            .background(Color.Blue)
    )
}

animateColorAsState

Verwenden Sie zum Animieren von Farben animateColorAsState. Die Funktion interpoliert im Farbraum, sodass Übergänge sanft und natürlich wirken, statt durch ungewöhnliche Zwischenfarbtöne zu flackern.

Hier wechselt ein Statuspunkt abhängig von einem Boolean zwischen Rot und Grün.

@Composable
fun StatusDot(online: Boolean) {
    val color by animateColorAsState(
        targetValue = if (online) Color(0xFF4CAF50) else Color(0xFFF44336),
        label = "status-color"
    )
    Box(
        Modifier
            .size(16.dp)
            .clip(CircleShape)
            .background(color)
    )
}

Mit animationSpec anpassen

Standardmäßig verwenden diese Hilfsfunktionen einen sanften Spring. Übergeben Sie ein animationSpec, um den zeitlichen Ablauf zu steuern. Verwenden Sie tween für eine feste Dauer mit einer Easing-Kurve.

Dieses Panel gleitet innerhalb von 400 ms mit einer gleichmäßig beschleunigenden und anschließend abbremsenden Kurve herein.

@Composable
fun SlidingPanel(open: Boolean) {
    val offset by animateDpAsState(
        targetValue = if (open) 0.dp else 250.dp,
        animationSpec = tween(
            durationMillis = 400,
            easing = FastOutSlowInEasing
        ),
        label = "offset"
    )
    Box(Modifier.offset(x = offset)) { /* content */ }
}

Easing-Kurven

Easing bestimmt, wie eine Animation beschleunigt und abbremst. Compose bietet mehrere Varianten:

LinearEasing – konstante Geschwindigkeit (mechanisches Gefühl).
FastOutSlowInEasing – der Material-Standard; schneller Start, sanftes Ende.
LinearOutSlowInEasing – für Elemente, die in den Bildschirm eintreten.
FastOutLinearInEasing – für Elemente, die den Bildschirm verlassen.

Mit der passenden Easing-Kurve wirkt Bewegung gezielt statt roboterhaft.

val progress by animateFloatAsState(
    targetValue = if (done) 1f else 0f,
    animationSpec = tween(500, easing = LinearOutSlowInEasing),
    label = "progress"
)

Spring-Spezifikationen

Statt einer festen Dauer können Sie einen Spring verwenden, der physisch und natürlich wirkt. Ein Spring wird durch dampingRatio (wie stark er schwingt) und stiffness (wie schnell er ist) definiert.

Springs sind besonders nützlich, weil sie sich auch dann sanft anpassen, wenn sich das Ziel während der Animation ändert.

val scale by animateFloatAsState(
    targetValue = if (active) 1.2f else 1f,
    animationSpec = spring(
        dampingRatio = Spring.DampingRatioMediumBouncy,
        stiffness = Spring.StiffnessLow
    ),
    label = "scale"
)

Auf den Abschluss reagieren

Manchmal müssen Sie etwas ausführen, wenn eine Animation abgeschlossen ist, etwa einen Callback aufrufen, sobald ein Wert sein Ziel erreicht. animate*AsState akzeptiert dafür einen finishedListener.

val alpha by animateFloatAsState(
    targetValue = if (gone) 0f else 1f,
    label = "alpha",
    finishedListener = { finalValue ->
        if (finalValue == 0f) onFullyHidden()
    }
)

Mehrere Eigenschaften animieren

Sie können mehrere Aufrufe von animate*AsState kombinieren, um mehrere Eigenschaften gleichzeitig zu animieren. Jede Funktion verfolgt ihren eigenen Wert, zusammen erzeugen sie einen ausdrucksstärkeren Effekt.

Hier wird ein Chip beim Auswählen sowohl skaliert als auch farblich verändert.

@Composable
fun SelectableChip(selected: Boolean, text: String) {
    val scale by animateFloatAsState(if (selected) 1.1f else 1f, label = "s")
    val bg by animateColorAsState(
        if (selected) Color(0xFF3F51B5) else Color.LightGray,
        label = "bg"
    )
    Box(
        Modifier
            .graphicsLayer { scaleX = scale; scaleY = scale }
            .clip(RoundedCornerShape(16.dp))
            .background(bg)
            .padding(horizontal = 12.dp, vertical = 6.dp)
    ) { Text(text) }
}

Ein Spring in reinem Kotlin

Um ein Gefühl dafür zu bekommen, was ein Spring „tut“, sehen Sie hier eine kleine Simulation in reinem Kotlin. Sie bewegt einen Wert bei jedem Schritt mit etwas Dämpfung in Richtung eines Ziels – ähnlich wie der Spring von Compose über viele Frames hinweg zu seinem Zielwert konvergiert.

fun main() {
    var value = 0f
    val target = 100f
    var velocity = 0f
    val stiffness = 0.1f
    val damping = 0.6f
    repeat(6) { step ->
        val force = (target - value) * stiffness
        velocity = (velocity + force) * damping
        value += velocity
        println("step $step -> ${"%.1f".format(value)}")
    }
}

Int und Offset animieren

Die Familie umfasst mehr als Floats und Farben. Verwenden Sie animateIntAsState für ganzzahlige Werte, etwa den Zielwert eines Badge-Zählers, und animateOffsetAsState oder animateIntOffsetAsState, um eine 2D-Position mit einem einzigen Aufruf zu animieren.

Hier gleitet ein Chip diagonal, indem ein IntOffset animiert wird.

@Composable
fun SlidingChip(moved: Boolean) {
    val pos by animateIntOffsetAsState(
        targetValue = if (moved) IntOffset(120, 60) else IntOffset.Zero,
        label = "pos"
    )
    Box(
        Modifier
            .offset { pos }
            .size(40.dp)
            .background(Color.Magenta)
    )
}

Kurztest

Sie möchten die Breite einer Box, gemessen in Dp, beim Ändern eines Booleans sanft animieren. Welche API eignet sich am besten?

Rückblick: animate*AsState

Die Familie animate*AsState ist Ihre erste Wahl, wenn Sie einen einzelnen Wert animieren möchten:

Wählen Sie die typisierte Variante: animateFloatAsState, animateDpAsState, animateColorAsState usw.
Setzen Sie einen targetValue; das Ergebnis wird bei jeder Änderung zu diesem Wert animiert.
Passen Sie die Bewegung mit animationSpec an, indem Sie tween mit Easing oder spring verwenden.
Kombinieren Sie mehrere Varianten, um mehrere Eigenschaften gemeinsam zu animieren.
Verwenden Sie finishedListener, um auf den Abschluss einer Animation zu reagieren.

Als Nächstes animieren Sie das Ein- und Ausblenden von Inhalten mit AnimatedVisibility und Transitions.

Häufig gestellte Fragen

Ist die Lektion „Grundlagen von animate*AsState“ kostenlos?

Ja — der vollständige Text von „Grundlagen von animate*AsState“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Android Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Android Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Grundlagen von animate*AsState“?

Einzelne Werte flüssig animieren Du übst Android Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Android Academy zu starten?

Keine Vorkenntnisse erforderlich. Android Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Grundlagen von animate*AsState“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Android Academy-Lektion Code schreiben und ausführen?

Ja. Jede Android Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Android Academy