Hero Animation: wat is het, animatie van gedeelde elementen in Flutter

Wat is Hero Animation?

Hero Animation — een interface-animatietechniek waarbij een gedeeld element soepel van het bronscherm naar het doelscherm beweegt en zijn identiteit behoudt. De naam weerspiegelt de metafor van de „held" — het sleutelelement dat door een scène-overgang tussen schermen gaat en de aandacht van de gebruiker trekt. In tegenstelling tot standaardovergangen verbreekt Hero Animation de visuele band niet: de gebruiker ziet het continue pad van het element, wat het begrip van de navigatiehiërarchie verbetert.

Het concept van Hero Animation is verankerd in Material Design als aanbeveling voor lijst-detailschermen, galerijen en kaarten. Het animatie-algoritme bestaat uit drie fasen: op het bronscherm wordt het element gemarkeerd en vastgezet op een absolute positie; tijdens de overgang wordt het geschaald, verplaatst en van vorm veranderd volgens de doelcontainer; op het eindscherm wordt het element in de nieuwe lay-out geïntegreerd. Volgens Material Design 3 vermindert een correct geïmplementeerde heldenanimatie het aantal verkeerde „terug"-klikken met 22%.

Hero in Flutter: tags en FlightShuttle

In Flutter wordt Hero Animation geïmplementeerd via de Hero-widget, die de verplichte parameter tag — een unieke identifier — accepteert. Flutter vindt automatisch een paar Hero met dezelfde tag op de bron- en doelroutes en start de animatie. De Hero-widget vereist geen handmatig animatiebeheer — het framework berekent zelf de baan en past de transformatie toe via het interne FlightShuttle-object.

FlightShuttle — een onzichtbare „shuttle" die op het moment van de overgang een overlay-kopie van de Hero-widget maakt, deze in het absolute coördinatensysteem plaatst en de transformatie (scale, translate, rotate) van begin- naar eindpositie animeert. Aan FlightShuttle kunnen aangepaste curven worden doorgegeven via de eigenschap flightShuttleBuilder, waardoor de vliegbaan kan worden gestuurd: vliegen in een boog, stuiteren op grenzen of vertragen voor aankomst. In Flutter 3.16+ ondersteunt Hero animatie met behoud van clipRect en borderRadius, wat het effect geeft van afgeronde kaarten die transformeren naar rechthoekige schermen.

matchedGeometryEffect in SwiftUI

In SwiftUI is het equivalent van Hero Animation de modifier matchedGeometryEffect, geïntroduceerd in iOS 14. Het verbindt twee elementen via een identifier (id) en een naamruimte (namespace). In tegenstelling tot Flutter, waar Hero automatisch de overgang onderschept, vereist SwiftUI een expliciete declaratie van de namespace en toepassing van de modifier op beide delen van de scène — bron en doel — binnen dezelfde hiërarchie of via GeometryReader.

De matchedGeometryEffect-animatie ondersteunt transformatie van positie, grootte, rotatie en hoekradius (cornerRadius). Voor vloeiendheid wordt Animation ingesteld in withAnimation. SwiftUI interpoleert automatisch tussenliggende toestanden op basis van de standaard easeInOut-curve. In iOS 17+ is ondersteuning voor matchedTransitionSource toegevoegd voor TabView en NavigationStack — een systeemanaloog van Hero Animation met een vooraf gedefinieerd pad voor standaardovergangen.

Shared Element Transition in Android

In Android heet Hero Animation Shared Element Transition en wordt geïmplementeerd via ActivityOptions.makeSceneTransitionAnimation of FragmentTransaction.addSharedElement. Elk gedeeld element wordt gemarkeerd met het attribuut transitionName in XML of via code, en Android is verantwoordelijk voor de animatie tussen activiteiten. Sinds Android 5.0 (API 21) maken overgangen deel uit van het framework; daarvoor moesten aangepaste animaties worden geschreven via ValueAnimator.

In Jetpack Compose wordt Shared Element Transition geïmplementeerd via de modifier Modifier.sharedElement en Modifier.sharedBounds in combinatie met AnimatedContent of SharedTransitionLayout (beschikbaar vanaf Compose BOM 2024.01). In tegenstelling tot het View-systeem tekent Compose elementen lui, waardoor het gedeelde element in CompositionLocal wordt gecachet. Compose ondersteunt ook de animatie van lijst naar detail (list→detail) met behoud van scrollOffset — een belangrijke mogelijkheid voor Hero-overgangen. Volgens Google I/O 2024 werkt Compose Shared Element Transition 15% sneller dan de View-versie dankzij direct beheer van RenderNode.

Codevoorbeelden

Flutter: Hero met afbeelding

Basisvoorbeeld van Hero Animation in Flutter: een miniatuur op het lijstscherm en een volledig schermbeeld op het detailscherm. De tag image-hero verbindt de twee widgets en FlightShuttle animeert automatisch de overgang van kaart naar volledig scherm.

import 'package:flutter/material.dart';

class ListScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [
          Hero(
            tag: 'image-hero',
            child: GestureDetector(
              onTap: () {
                Navigator.push(context,
                  MaterialPageRoute(
                    builder: (_) => DetailScreen(),
                  ),
                );
              },
              child: ClipRRect(
                borderRadius: BorderRadius.circular(12),
                child: Image.network(
                  'https://picsum.photos/200',
                  width: 100, height: 100,
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Detail')),
      body: Center(
        child: Hero(
          tag: 'image-hero',
          child: Image.network(
            'https://picsum.photos/800',
            width: 300, height: 400,
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }
}

Het sleutelpunt — dezelfde tag (image-hero) op beide schermen. Flutter matcht Hero-widgets op tag tijdens de route-overgang. Als de tags verschillen, wordt de animatie niet gestart — het element verschijnt gewoon op het nieuwe scherm zonder overgang. Elk type kan voor de tag worden gebruikt, maar strings zijn de meest betrouwbare optie.

SwiftUI: matchedGeometryEffect tussen schermen

Voorbeeld van Hero Animation in SwiftUI met NavigationStack. De modifier matchedGeometryEffect verbindt de afbeelding in de lijst en het detailscherm via namespace, en withAnimation start een soepele overgang.

import SwiftUI

struct HeroExampleView: View {
    @Namespace private var heroNamespace
    @State private var isDetailShown = false

    var body: some View {
        VStack {
            if isDetailShown {
                DetailView(namespace: heroNamespace)
                    .transition(.identity)
            } else {
                ListView(namespace: heroNamespace)
                    .transition(.identity)
            }
        }
        .animation(Animation.easeInOut(duration: 0.4),
                   value: isDetailShown)
    }
}

struct ListView: View {
    let namespace: Namespace.ID

    var body: some View {
        Image("thumbnail")
            .resizable()
            .frame(width: 100, height: 100)
            .cornerRadius(12)
            .matchedGeometryEffect(id: "hero", in: namespace)
    }
}

struct DetailView: View {
    let namespace: Namespace.ID

    var body: some View {
        Image("thumbnail")
            .resizable()
            .frame(width: 300, height: 400)
            .cornerRadius(0)
            .matchedGeometryEffect(id: "hero", in: namespace)
    }
}

@Namespace creëert een naamruimte voor de identifier van matchedGeometryEffect. Beide elementen gebruiken dezelfde id (hero) en een gedeelde namespace. Wanneer isDetailShown wordt gewisseld, animeert SwiftUI de transformatie van grootte, positie en cornerRadius tussen de twee weergaven, waardoor het heldeneffect ontstaat. Gebruik voor standaard NavigationLink met iOS 16+ navigationTransition(.hero).

Android: Shared Element Transition met Jetpack Compose

Voorbeeld van Shared Element Transition in Jetpack Compose met SharedTransitionLayout. De modifier sharedElement animeert het gedeelde element tussen schermen tijdens navigatie.

@OptIn(ExperimentalSharedTransitionApi::class)
@Composable
fun HeroExample() {
    SharedTransitionLayout {
        var isDetail by remember { mutableStateOf(false) }

        AnimatedContent(
            targetState = isDetail,
            transitionSpec = {
                fadeIn() togetherWith fadeOut()
            }
        ) { detail ->
            if (detail) {
                Box(
                    modifier = Modifier
                        .fillMaxSize()
                        .sharedElement(
                            state = rememberSharedContentState(key = "hero"),
                            animatedVisibilityScope = this
                        )
                ) {
                    AsyncImage(
                        model = "https://picsum.photos/800",
                        contentDescription = null,
                        modifier = Modifier.fillMaxSize()
                    )
                }
            } else {
                Box(
                    modifier = Modifier
                        .size(100.dp)
                        .sharedElement(
                            state = rememberSharedContentState(key = "hero"),
                            animatedVisibilityScope = this
                        )
                ) {
                    AsyncImage(
                        model = "https://picsum.photos/200",
                        contentDescription = null,
                        modifier = Modifier.fillMaxSize()
                    )
                }
            }
        }
    }
}

Compose SharedTransitionLayout (Compose BOM 2024.01+) omhult de hiërarchie, en de modifier sharedElement met de sleutel hero verbindt de begin- en eindelementen. AnimatedContent schakelt de toestand en Compose animeert automatisch de grootte, positie en vorm van de afbeelding. Het belangrijkste voordeel is de ondersteuning voor bounds- en clipBounds-animatie, wat het effect geeft van afronding van de kaart tijdens de overgang.