Android Academy · Lektion

Warum Animationen wichtig sind

Bewegung, die Benutzer führt und begeistert

Warum Animationen wichtig sind ist eine kostenlose Android Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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.

Bewegung mit einem Zweck

Animationen sind mehr als bloße Dekoration. In einer guten Android-App lenkt Bewegung die Aufmerksamkeit, erklärt, was sich geändert hat, und lässt die UI reaktionsschnell und lebendig wirken.

In diesem Kurs lernen Sie die Animations-APIs von Jetpack Compose kennen – von den einzeiligen animate*AsState-Hilfsfunktionen bis zu AnimatedVisibility, Transitionen und physikbasierten Federn.

In dieser ersten Lektion geht es darum, warum und wann Sie animieren sollten, damit jede Bewegung einen Zweck erfüllt.

Compose animiert deklarativ

In Compose starten und stoppen Sie Animationen nicht manuell Frame für Frame. Stattdessen beschreiben Sie einen Zielwert, auf den Compose immer dann fließend animiert, wenn sich dieser Wert ändert.

Hier wird die Farbe einer Box von einem einzelnen booleschen Zustand gesteuert. Durch Antippen wird der Zustand umgeschaltet und die Farbe verändert sich automatisch.

@Composable
fun ColorBox() {
    var selected by remember { mutableStateOf(false) }
    val color by animateColorAsState(
        targetValue = if (selected) Color.Green else Color.Gray,
        label = "box-color"
    )
    Box(
        Modifier
            .size(120.dp)
            .background(color)
            .clickable { selected = !selected }
    )
}

Feedback auf Benutzeraktionen

Eine der wichtigsten Aufgaben von Bewegung ist Feedback. Wenn ein Benutzer eine Schaltfläche antippt oder einen Schalter umlegt, bestätigt eine kleine Animation, dass die App die Aktion erhalten hat.

Sofortige, abrupte Änderungen wirken fehlerhaft; eine kurze Transition von 150–300 ms wirkt ausgereift. Hier wird eine Schaltfläche während des Drückens leicht verkleinert.

@Composable
fun PressableButton(onClick: () -> Unit) {
    var pressed by remember { mutableStateOf(false) }
    val scale by animateFloatAsState(
        targetValue = if (pressed) 0.92f else 1f,
        label = "press-scale"
    )
    Button(
        onClick = onClick,
        modifier = Modifier.graphicsLayer {
            scaleX = scale; scaleY = scale
        }
    ) { Text("Tap me") }
}

Zustandsänderungen erklären

Wenn sich die UI ändert, hilft eine Animation dem Benutzer zu verstehen, was gerade passiert ist. Ein Element, das eingeblendet und hereingeschoben wird, wirkt wie etwas „Neues“; eines, das ausgeblendet wird, wie etwas „Entferntes“.

Ohne Bewegung können Inhalte abrupt erscheinen oder verschwinden. Dadurch ist unklar, ob etwas hinzugekommen ist, verschwunden ist oder verschoben wurde.

@Composable
fun Banner(visible: Boolean) {
    AnimatedVisibility(
        visible = visible,
        enter = fadeIn() + slideInVertically(),
        exit = fadeOut() + slideOutVertically()
    ) {
        Text("Saved successfully!")
    }
}

Kontinuität und räumliche Orientierung

Bewegung bewahrt die Kontinuität. Wenn eine Karte größer wird oder ein Element an eine neue Position wechselt, hilft die animierte Änderung dem Benutzer, sich räumlich zu orientieren.

Compose kann Layoutänderungen mit Modifier.animateContentSize() automatisch animieren, sodass eine Box bei einer Änderung ihres Inhalts fließend wächst oder schrumpft.

@Composable
fun ExpandableCard(expanded: Boolean) {
    Column(
        Modifier
            .fillMaxWidth()
            .animateContentSize()
            .padding(16.dp)
    ) {
        Text("Title", style = MaterialTheme.typography.titleMedium)
        if (expanded) {
            Text("Here is the longer body that appears when expanded.")
        }
    }
}

Dauer und Timing sind wichtig

Gute Animationen sind schnell. Die meisten UI-Transitionen sollten ungefähr zwischen 150 ms und 400 ms dauern. Bei zu langen Animationen wirkt die App träge; bei zu kurzen ist die Bewegung nicht wahrnehmbar.

Mit tween und einer easing-Kurve können Sie Dauer und Ablauf in Compose anpassen. Easing lässt Bewegungen durch Beschleunigen und Abbremsen natürlich wirken.

val offset by animateDpAsState(
    targetValue = if (open) 0.dp else 200.dp,
    animationSpec = tween(
        durationMillis = 300,
        easing = FastOutSlowInEasing
    ),
    label = "panel-offset"
)

Übertreiben Sie es nicht

Animation ist wirkungsvoll, lässt sich also leicht übermäßig einsetzen. Zu viel Bewegung ist ablenkend, verlangsamt Benutzer und kann sogar Unwohlsein verursachen.

Als Faustregeln gilt:

Animieren Sie, um etwas zu vermitteln, nicht zur Dekoration.
Halten Sie Transitionen kurz und dezent.
Vermeiden Sie, alles auf dem Bildschirm gleichzeitig zu animieren.
Hindern Sie den Benutzer niemals während einer Animation an einer Aktion.

Barrierefreiheit berücksichtigen

Manche Benutzer aktivieren aufgrund einer Bewegungsempfindlichkeit in den Systemeinstellungen Animationen entfernen. Eine rücksichtsvolle App respektiert diese Einstellung.

Sie können auslesen, ob Animationen auf null skaliert werden, und nicht unbedingt erforderliche Bewegungen entsprechend reduzieren oder deaktivieren.

@Composable
fun rememberReduceMotion(): Boolean {
    val context = LocalContext.current
    val scale = Settings.Global.getFloat(
        context.contentResolver,
        Settings.Global.ANIMATOR_DURATION_SCALE,
        1f
    )
    return scale == 0f
}

Der Compose-Werkzeugkasten für Animationen

Compose bietet eine mehrschichtige Auswahl an Animations-APIs. Im Laufe dieses Kurses lernen Sie sie kennen:

animate*AsState – animiert einen einzelnen Wert (Farbe, Größe, Float).
AnimatedVisibility – animiert das Ein- und Ausblenden.
updateTransition – koordiniert mehrere Werte miteinander.
AnimatedContent – blendet zwischen unterschiedlichen Inhalten über.
Animatable und spring – ermöglichen eine hardwarenahe, physikbasierte Steuerung.

Beginnen Sie mit den High-Level-APIs und wechseln Sie nur dann zu niedrigeren Ebenen, wenn Sie mehr Kontrolle benötigen.

Animation folgt dem Zustand

Das mentale Modell, das alles verständlich macht: In Compose folgen Animationen dem Zustand. Sie ändern einen Wert, und eine Animations-API interpoliert die UI in jedem Frame sanft zum neuen Wert.

Das bedeutet, dass Sie nur selten eine Zeitleiste schreiben. Sie deklarieren „diese Eigenschaft soll X entsprechen“, und Compose übernimmt die Zwischenframes für Sie.

@Composable
fun FadingText(highlighted: Boolean) {
    val alpha by animateFloatAsState(
        targetValue = if (highlighted) 1f else 0.4f,
        label = "text-alpha"
    )
    Text(
        "Status",
        modifier = Modifier.graphicsLayer { this.alpha = alpha }
    )
}

Eine kurze Einführung mit reinem Kotlin

Animationen interpolieren zwischen Werten. Im Kern ist das reine Mathematik: Ein Bruchteil t zwischen 0 und 1 mischt einen Start- und einen Endwert. Diese Idee (lineare Interpolation oder lerp) bildet die Grundlage jeder Animation, die Sie schreiben werden.

Dieses kleine Snippet in reinem Kotlin zeigt das Konzept, das Compose viele Male pro Sekunde anwendet.

fun lerp(start: Float, end: Float, t: Float): Float =
    start + (end - start) * t

fun main() {
    for (i in 0..4) {
        val t = i / 4f
        println("t=$t -> ${lerp(0f, 100f, t)}")
    }
}

Kurztest

Welches mentale Grundmodell gilt für Animationen in Jetpack Compose?

Rückblick: Bewegung mit Bedeutung

Sie wissen nun, warum Animationen wichtig sind und welches Modell dahintersteht:

Bewegung gibt Feedback, erklärt Änderungen und sorgt für Kontinuität.
Compose-Animationen sind deklarativ und folgen dem Zustand.
Halten Sie Übergänge kurz (≈150–400 ms) und zielgerichtet; übertreiben Sie es nicht.
Berücksichtigen Sie Nutzer, die aus Gründen der Barrierefreiheit weniger Bewegung bevorzugen.
Greifen Sie zuerst zu High-Level-APIs: animate*AsState, AnimatedVisibility, Transitions und Springs.

Als Nächstes animieren Sie einzelne Werte mit der Familie animate*AsState.

Häufig gestellte Fragen

Ist die Lektion „Warum Animationen wichtig sind“ kostenlos?

Ja — der vollständige Text von „Warum Animationen wichtig sind“ 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 „Warum Animationen wichtig sind“?

Bewegung, die Benutzer führt und begeistert 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 1 von 4.

Wie lange dauert die Lektion „Warum Animationen wichtig sind“?

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