Flutter: Geschwindigkeit und Timing von Hero-Animationen

Die Hero-Animation ist einer der schnellsten Wege, das Gefühl einer Flutter-App zu verbessern. Der Unterschied zwischen einem guten und einem großartigen Hero-Effekt liegt meist nicht in der Animation selbst, sondern darin, wie schnell sie läuft und welcher Kurve sie folgt.

Live-Demo

Sie können die Hero-Animation im interaktiven Beispiel unten ausprobieren:

💡 Falls sich das Beispiel nicht öffnet, klicken Sie auf den Link DartPad, um es in einem neuen Tab auszuführen.

Warum die Geschwindigkeit der Hero-Animation zählt

Ein gut abgestimmter Übergang lässt die Oberfläche hochwertig und souverän wirken. Ist er zu langsam, fühlt sich die App schwerfällig an. Ist er zu schnell, verlieren Nutzer den Zusammenhang.

Deshalb wird häufig nach Begriffen wie „flutter hero animation speed“ oder „hero transition duration flutter“ gesucht. Entscheidend ist nicht, Hero überhaupt zu verwenden, sondern das Timing richtig zu treffen.

Grundlegender Hero-Aufbau

Die Hero-Animation benötigt auf beiden Seiten denselben tag.

Hero(
  tag: 'product-image',
  child: Image.network(
    imageUrl,
    fit: BoxFit.cover,
  ),
)

Auf der Zielseite verwenden Sie denselben Tag erneut.

Hero(
  tag: 'product-image',
  child: Image.network(
    imageUrl,
    fit: BoxFit.cover,
  ),
)

Die Dauer des Übergangs ändern

Der einfachste Weg, die Hero-Geschwindigkeit zu beeinflussen, ist die Steuerung der Routendauer über PageRouteBuilder.

Navigator.push(
  context,
  PageRouteBuilder(
    transitionDuration: const Duration(milliseconds: 450),
    pageBuilder: (context, animation, secondaryAnimation) => const DetailPage(),
  ),
);

Damit verschieben Sie das Erlebnis in Richtung eines weicheren oder kompakteren Übergangs.

Mit Curve die Bewegung formen

Die Dauer ist nur die halbe Miete. Die Wahl der Kurve verändert die emotionale Wirkung der Bewegung.

Navigator.push(
  context,
  PageRouteBuilder(
    transitionDuration: const Duration(milliseconds: 500),
    pageBuilder: (context, animation, secondaryAnimation) => const DetailPage(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      final curvedAnimation = CurvedAnimation(
        parent: animation,
        curve: Curves.easeOutCubic,
      );

      return FadeTransition(
        opacity: curvedAnimation,
        child: child,
      );
    },
  ),
);

Einen hochwertigeren Bewegungsaufbau gestalten

In echten Produkten funktioniert Hero oft am besten zusammen mit einigen dezenten Begleiteffekten.

• Hero für das zentrale Bildelement
• Ein Fade für begleitenden Text
• Ein leichter Skalierungseffekt für den letzten Schliff
• 350–600 ms Routendauer für die Balance

Diese Kombination wirkt besonders gut in E-Commerce-, Portfolio- und Medien-Apps.

Eigener Flight Shuttle

Wenn Sie während der Flugphase mehr Kontrolle möchten, verwenden Sie flightShuttleBuilder.

Hero(
  tag: 'avatar',
  flightShuttleBuilder: (flightContext, animation, direction, fromContext, toContext) {
    return Material(
      color: Colors.transparent,
      child: ScaleTransition(
        scale: CurvedAnimation(parent: animation, curve: Curves.easeOutBack),
        child: const CircleAvatar(radius: 40, backgroundColor: Colors.blue),
      ),
    );
  },
  child: const CircleAvatar(radius: 24, backgroundColor: Colors.blue),
)

Das ist bei Avataren, Produktbildern und symbolgeführten Übergängen sehr nützlich.

Was macht createRectTween?

Mit createRectTween ändern Sie den Weg, den das Hero zwischen den Seiten nimmt.

Hero(
  tag: 'card',
  createRectTween: (begin, end) {
    return MaterialRectArcTween(begin: begin, end: end);
  },
  child: Container(
    width: 120,
    height: 120,
    color: Colors.indigo,
  ),
)

Dadurch bewegt es sich in einem natürlicheren Bogen statt auf einer strengen Geraden.

Häufige Fehler

• Denselben Tag für mehrere Hero-Widgets verwenden
• Für eine einfache Interaktion eine sehr lange Dauer wählen
• Überall dieselbe Kurve nutzen, ohne die Wirkung zu prüfen
• Quell- und Zielgröße zu stark auseinanderlaufen lassen

Praktischer Leitfaden zum Timing

• 200–300 ms: sehr schnell, gut für Mikro-Interaktionen
• 350–500 ms: der sicherste und ausgewogenste Bereich
• Ab 600 ms: nur für dramatische oder besondere Übergänge

Häufig gestellte Fragen

Warum wirkt meine Hero-Animation langsam?

Prüfen Sie zuerst transitionDuration und vereinfachen Sie dann die Kurve. Sehr weiche Kurven lassen die Bewegung langsamer wirken als erwartet.

Brauche ich zusammen mit Hero auch Seitenübergänge?

Nicht immer, aber die Kombination führt meist zu einem deutlich ausgereifteren Ergebnis.

Wann sollte ich auf Hero verzichten?

Verzichten Sie darauf, wenn das Element auf den Screens eine andere Bedeutung bekommt oder der Übergang das Verständnis nicht unterstützt.

Zusammenfassung

Die Geschwindigkeit der Hero-Animation in Flutter ist ein wesentlicher Teil der Nutzererfahrung und kein Detail am Rande. Mit transitionDuration, CurvedAnimation, flightShuttleBuilder und createRectTween gestalten Sie kontrolliertere, elegantere Bewegungen im Sinne modernen Motion Designs.