Android Academy · Lektion

Animationen und Übergänge

Animieren Sie Views mit ViewPropertyAnimator, ObjectAnimator und AnimatorSet. Fügen Sie Fragment-Übergänge, Animationen gemeinsamer Elemente und Federphysik hinzu.

Animationen und Übergänge ist eine kostenlose Android Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 5. 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 5 Lektionen.

Warum Animationen wichtig sind

Animationen lassen Apps lebendig und reaktionsfähig wirken. Sie:

geben visuelles Feedback auf Benutzeraktionen
zeigen, wie Bildschirme miteinander verbunden sind
machen Datenänderungen weniger abrupt
helfen Nutzern zu verstehen, was sich geändert hat und warum

Die wichtigste Regel: Animationen sollten die UI unterstützen und nicht von ihr ablenken. Halten Sie sie unter 300 ms.

ViewPropertyAnimator — schnelle Animationen

Die einfachste Möglichkeit, eine View zu animieren. Verketten Sie die Aufrufe und rufen Sie start() auf:

// Fade a view out:
binding.tvMessage
    .animate()
    .alpha(0f)
    .setDuration(300)
    .withEndAction { binding.tvMessage.visibility = View.GONE }
    .start()

// Slide in from bottom:
binding.cardView.translationY = 200f
binding.cardView.alpha = 0f
binding.cardView
    .animate()
    .translationY(0f)
    .alpha(1f)
    .setDuration(250)
    .setInterpolator(DecelerateInterpolator())
    .start()

ObjectAnimator

ObjectAnimator animiert jede Eigenschaft eines beliebigen Objekts anhand ihres Namens. Er ist flexibler als ViewPropertyAnimator:

// Rotate an image:
val rotateAnimator = ObjectAnimator.ofFloat(
    binding.ivLogo,
    "rotation",
    0f, 360f
).apply {
    duration = 600
    repeatCount = ObjectAnimator.INFINITE
    interpolator = LinearInterpolator()
    start()
}

// Stop it:
rotateAnimator.cancel()

AnimatorSet — nacheinander und parallel

AnimatorSet koordiniert mehrere Animator-Objekte, sodass sie gleichzeitig oder nacheinander ausgeführt werden:

val fadeIn  = ObjectAnimator.ofFloat(binding.card, "alpha", 0f, 1f).setDuration(300)
val scaleX  = ObjectAnimator.ofFloat(binding.card, "scaleX", 0.8f, 1f).setDuration(300)
val scaleY  = ObjectAnimator.ofFloat(binding.card, "scaleY", 0.8f, 1f).setDuration(300)
val slideUp = ObjectAnimator.ofFloat(binding.card, "translationY", 100f, 0f).setDuration(300)

AnimatorSet().apply {
    // Run fadeIn + scaleX + scaleY together, then slideUp
    play(fadeIn).with(scaleX).with(scaleY)
    play(slideUp).after(fadeIn)
    interpolator = DecelerateInterpolator()
    start()
}

Interpolatoren

Interpolatoren steuern die Änderungsrate einer Animation. Häufig verwendete Interpolatoren:

LinearInterpolator — konstante Geschwindigkeit
AccelerateInterpolator — beginnt langsam und wird schneller (Ausblenden)
DecelerateInterpolator — beginnt schnell und wird langsamer (Einblenden)
AccelerateDecelerateInterpolator — langsam → schnell → langsam (Standard)
OvershootInterpolator — überschießt das Ziel und federt zurück
BounceInterpolator — federt am Ende

TransitionManager — Layoutänderungen

Animieren Sie Layoutänderungen automatisch, indem Sie TransitionManager.beginDelayedTransition() aufrufen, bevor Sie Sichtbarkeits- oder Layouteigenschaften ändern:

binding.btnToggle.setOnClickListener {
    // Tell the framework to animate the next layout change
    TransitionManager.beginDelayedTransition(
        binding.root,
        ChangeBounds().apply { duration = 300 }
    )

    // Now change visibility/size — Android animates the difference automatically
    binding.expandedSection.visibility =
        if (binding.expandedSection.isVisible) View.GONE else View.VISIBLE
}

Fragment-Übergänge

Fügen Sie Fragment-Transaktionen Eingangs- und Ausgangsanimationen hinzu:

supportFragmentManager.beginTransaction()
    .setCustomAnimations(
        R.anim.slide_in_right,   // enterAnim
        R.anim.slide_out_left,   // exitAnim
        R.anim.slide_in_left,    // popEnterAnim
        R.anim.slide_out_right   // popExitAnim
    )
    .replace(R.id.container, DetailFragment())
    .addToBackStack(null)
    .commit()

// Or use MaterialSharedAxis for a modern, Material Motion feel:
val forward = MaterialSharedAxis(MaterialSharedAxis.X, true)
exitTransition = forward
enterTransition = MaterialSharedAxis(MaterialSharedAxis.X, true)

Übergänge gemeinsamer Elemente

Verwenden Sie eine View auf zwei Bildschirmen gemeinsam, sodass sie animiert von einer Position zur anderen wechselt (z. B. ein Vorschaubild, das zu einem vollständigen Bild vergrößert wird):

// In ListFragment:
binding.ivThumbnail.transitionName = "hero_image_${item.id}"

val extras = FragmentNavigatorExtras(
    binding.ivThumbnail to "hero_image_${item.id}"
)
findNavController().navigate(R.id.action_list_to_detail, null, null, extras)

// In DetailFragment:
sharedElementEnterTransition = TransitionInflater
    .from(requireContext())
    .inflateTransition(android.R.transition.move)

// ImageView in detail layout must have the same transitionName

Federanimation

Federanimationen wirken natürlicher als lineare Animationen oder Abbremsanimationen, weil sie die physikalischen Eigenschaften einer Feder simulieren:

implementation 'androidx.dynamicanimation:dynamicanimation:1.0.0'

// Spring animation on a button press:
val spring = SpringAnimation(binding.fabAdd, DynamicAnimation.SCALE_X, 1f).apply {
    spring = SpringForce(1f).apply {
        stiffness = SpringForce.STIFFNESS_MEDIUM
        dampingRatio = SpringForce.DAMPING_RATIO_LOW_BOUNCY
    }
}

binding.fabAdd.setOnClickListener {
    binding.fabAdd.scaleX = 0.8f
    spring.start()
}

Lottie — komplexe Animationen

Lottie spielt als JSON exportierte After-Effects-Animationen ab. Ideal für Ladeanimationen, Onboarding und leere Zustände:

// app/build.gradle:
// implementation 'com.airbnb.android:lottie:6.4.0'

<!-- In layout XML -->
<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/lottieView"
    android:layout_width="200dp"
    android:layout_height="200dp"
    app:lottie_rawRes="@raw/loading_animation"
    app:lottie_autoPlay="true"
    app:lottie_loop="true" />

// Control in code:
binding.lottieView.playAnimation()
binding.lottieView.pauseAnimation()

Bewährte Vorgehensweisen für Animationen

Richtlinien für flüssige und barrierefreie Animationen:

Für die meisten UI-Animationen eine Dauer von 150–300 ms verwenden
Immer AnimatorUtils.areAnimatorsEnabled() oder Settings.System.ANIMATOR_DURATION_SCALE berücksichtigen
Nutzer mit vestibulären Erkrankungen deaktivieren möglicherweise Animationen — prüfen Sie die Barrierefreiheitseinstellung Reduce Motion
Animieren Sie nichts, was keine Animation benötigt — weniger ist mehr
Auf leistungsschwachen Geräten testen (Animationen können zu Bildaussetzern führen)

Kurze Überprüfung

Welcher Interpolator eignet sich am besten, damit ein Element beim Einblenden auf dem Bildschirm abbremst und zur Ruhe kommt?

Zusammenfassung: Animationen und Übergänge

Verleihen Sie Ihrer App mit flüssigen Animationen Leben:

view.animate() — schnelle Animationen von Alpha, Verschiebung, Skalierung und Drehung
ObjectAnimator — beliebige Eigenschaften, detaillierte Kontrolle
AnimatorSet — mehrere Animatoren orchestrieren (mit/anschließend)
TransitionManager.beginDelayedTransition() — Layoutänderungen automatisch animieren
Shared Element Transitions — nahtloser Übergang zwischen Bildschirmen
Lottie — komplexe JSON-Animationen aus After Effects

Als Nächstes: Bottom Navigation und Tabs für Apps mit mehreren Bereichen.

Häufig gestellte Fragen

Ist die Lektion „Animationen und Übergänge“ kostenlos?

Ja — der vollständige Text von „Animationen und Übergänge“ 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 5 Lektionen.

Was lerne ich in „Animationen und Übergänge“?

Animieren Sie Views mit ViewPropertyAnimator, ObjectAnimator und AnimatorSet. Fügen Sie Fragment-Übergänge, Animationen gemeinsamer Elemente und Federphysik hinzu. 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 4 von 5.

Wie lange dauert die Lektion „Animationen und Übergänge“?

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