Mobiludvikling med Flutter · Lektion

Eksplicitte animationer og Heroes

Bliv fortrolig med eksplicitte animationer ved hjælp af `AnimationController` og `Tween`s, og skab fængende overgange mellem delte elementer med Hero-widgets.

Lektion 3 af 410 trin

Eksplicitte animationer og Heroes er en gratis Mobiludvikling med Flutter-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Mobiludvikling med Flutter, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Mobiludvikling med Flutter-kurset indeholder 4 lektioner i alt.

Introduktion til eksplicitte animationer

Velkommen til eksplicitte animationer! I modsætning til implicitte animationer, som animerer automatisk, når egenskaber ændres, giver eksplicitte animationer dig fuld kontrol.

Du definerer hvordan og hvornår en animation kører, samt dens varighed og kurve. Det er effektivt til komplekse, brugerdefinerede effekter.

AnimationController: Dirigenten

I centrum for eksplicitte animationer står AnimationController. Forestil dig den som dirigenten for et orkester, der styrer afspilningen af animationen.

Den genererer en ny værdi for hver billedramme.
Den styrer animationens varighed.
Den kan køres fremad, baglæns eller gentages.

Den skal bruge en TickerProviderStateMixin for at synkronisere med skærmens opdateringshastighed.

Opsætning af AnimationController

Du initialiserer typisk en AnimationController i din widgets initState og frigiver den i dispose for at forhindre hukommelseslækager.

Her er en grundlæggende opsætning:

import 'package:flutter/material.dart';

class MyAnimationScreen extends StatefulWidget {
  @override
  _MyAnimationScreenState createState() => _MyAnimationScreenState();
}

class _MyAnimationScreenState extends State<MyAnimationScreen> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Controller Setup')),
      body: Center(
        child: Text('Animation controller ready!')
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(home: MyAnimationScreen()));
}

Tween: Definition af intervallet

Mens AnimationController leverer en værdi fra 0.0 til 1.0 over dens varighed, definerer en Tween (forkortelse for 'in-betweening') det interval af værdier, du faktisk vil animere.

En Tween omsætter controllerens interval fra 0.0 til 1.0 til dine ønskede værdier for begin og end.
Almindelige typer omfatter Tween, ColorTween og SizeTween.

Forbindelse mellem Tween og controller

Hvis du vil bruge en Tween, opretter du et Animation-objekt ved at kalde animate() på Tween og videregive din AnimationController.

Dette Animation-objekt leverer derefter værdier inden for dit definerede interval, efterhånden som controlleren bevæger sig fra 0.0 til 1.0.

import 'package:flutter/material.dart';

class MyTweenExample extends StatefulWidget {
  @override
  _MyTweenExampleState createState() => _MyTweenExampleState();
}

class _MyTweenExampleState extends State<MyTweenExample> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );
    // Define a tween that animates a double from 0.0 to 200.0
    _animation = Tween<double>(begin: 0.0, end: 200.0).animate(_controller);
    _controller.forward(); // Start the animation
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Tween Connection')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Animation value: ${_animation.value.toStringAsFixed(2)}'),
            // Note: This won't update automatically without a listener or AnimatedBuilder yet
          ],
        )
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(home: MyTweenExample()));
}

AnimatedBuilder for effektivitet

Hvis du vil have din brugergrænseflade til at reagere på animationsværdier, kan du bruge addListener og setState. AnimatedBuilder er dog en mere effektiv widget til dette.

Den genopbygger kun den animerede del af dit widgettræ og forhindrer unødvendig genopbygning af statiske widgets.

import 'package:flutter/material.dart';

class MyAnimatedBuilder extends StatefulWidget {
  @override
  _MyAnimatedBuilderState createState() => _MyAnimatedBuilderState();
}

class _MyAnimatedBuilderState extends State<MyAnimatedBuilder> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );
    _animation = Tween<double>(begin: 50.0, end: 150.0).animate(_controller);

    _controller.forward(); // Start animation
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('AnimatedBuilder Demo')),
      body: Center(
        child: AnimatedBuilder(
          animation: _animation,
          builder: (context, child) {
            return Container(
              width: _animation.value,
              height: _animation.value,
              color: Colors.blue,
              child: Center(child: Text('Size', style: TextStyle(color: Colors.white))),
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _controller.reset();
          _controller.forward();
        },
        child: Icon(Icons.play_arrow),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(home: MyAnimatedBuilder()));
}

Introduktion til Hero-widgets

Hero-widgets muliggør en flot overgang med et delt element mellem ruter (skærme). Når du navigerer fra én skærm til en anden, flyver en Hero-widget fra sin placering på den første skærm til sin nye placering på den anden skærm.

Det skaber en visuelt tiltalende og intuitiv brugeroplevelse, som viser forbindelsen mellem de to skærme.

Implementering af Hero-overgange

Hvis du vil bruge en Hero-widget, skal du have to widgets (én på hver skærm) med præcis det samme tag. Når der navigeres mellem skærmene, håndterer Flutter automatisk animationen.

tag skal være unik blandt alle Hero-widgets, der aktuelt er på skærmen.

import 'package:flutter/material.dart';

// First Screen
class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First Screen')),
      body: Center(
        child: GestureDetector(
          onTap: () {
            Navigator.push(
              context, MaterialPageRoute(builder: (_) => SecondScreen()));
          },
          child: Hero(
            tag: 'hero-image-tag',
            child: Container(
              width: 100,
              height: 100,
              color: Colors.red,
              child: Center(child: Text('Tap Me', style: TextStyle(color: Colors.white))),
            ),
          ),
        ),
      ),
    );
  }
}

// Second Screen
class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Screen')),
      body: Center(
        child: Hero(
          tag: 'hero-image-tag',
          child: Container(
            width: 300,
            height: 300,
            color: Colors.blue,
            child: Center(child: Text('Big Hero', style: TextStyle(color: Colors.white))),
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(home: FirstScreen()));
}

Quiz om eksplicitte animationer og Heroes

Hvilke af følgende udsagn om AnimationController- og Hero-widgets er sande?

Besvar den i den interaktive lektion

Opsummering: Eksplicitte animationer og Heroes

I denne lektion har du lært eksplicitte animationer og Hero-widgets grundigt at kende:

Eksplicitte animationer: Giver detaljeret kontrol over animationers afspilning ved hjælp af AnimationController og Tween.
AnimationController: Håndterer animationens varighed og afspilning (fremad, baglæns).
Tween: Definerer det specifikke interval af værdier, som en animation bevæger sig igennem.
AnimatedBuilder: En effektiv måde kun at genopbygge de animerede dele af din brugergrænseflade på.
Hero-widgets: Skaber fængslende overgange med delte elementer mellem skærme ved hjælp af matchende tag-egenskaber.

Du har nu effektive værktøjer til at skabe dynamiske og engagerende brugergrænseflader!

Gratis at komme i gang

Lær Dart med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 22
Lektioner: 88

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Eksplicitte animationer og Heroes” gratis?

Ja — alle 3 lektioner i læringssporet Mobiludvikling med Flutter, inklusive “Eksplicitte animationer og Heroes”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Mobiludvikling med Flutter-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Eksplicitte animationer og Heroes”?

Bliv fortrolig med eksplicitte animationer ved hjælp af `AnimationController` og `Tween`s, og skab fængende overgange mellem delte elementer med Hero-widgets. Du øver dig i Mobiludvikling med Flutter med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Mobiludvikling med Flutter?

Der kræves ingen tidligere erfaring. Mobiludvikling med Flutter på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Eksplicitte animationer og Heroes”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Mobiludvikling med Flutter-lektion?

Ja. Alle Mobiludvikling med Flutter-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Mobiludvikling med Flutter