Einführung in die Flutter-Animation

Es gibt zwei Arten von Flutter-Animation. Die „implizite Animation“. Und die „Explizite Animation“. Die implizite Animation ist einfacher als die explizite Animation. Wir werden beide Arten von Animationen besprechen. Außerdem werden wir lernen, wie man sie benutzt.

Bevor wir jedoch die Animation in Flutter verwenden, müssen wir einige Fakten kennen.

Wir haben eine spezielle Kategorie für die Animation. erstellt. Daher erhalten Sie alle animationsbezogenen Artikel in dieser Kategorie.

Flutter hat übrigens schon ein paar eingebaute Animations-Widgets für uns.

Dadurch wird unsere Aufgabe eingeschränkt. Obwohl wir wissen müssen, wie man diese eingebauten Animations-Widgets verwendet.

In diesem Abschnitt werden wir lernen, das AnimatedWidget zu verwenden.

Wie der Name schon sagt, animiert der Flutter das Widget. Namen wie AnimatedWidget, AnimatedOpacity, AnimatedContainer, oder AnimatedBuilder stehen für beides. Die implizite Animation und die explizite Animation.

Und wieder stehen Namen wie TweenAnimationBuilder, oder SlideTransition auch für beide Arten von Animationen in Flutter.

Daher hilft uns das Namensmuster nicht bei der Unterscheidung.

Wenn wir jedoch einen Namen wie SlideTransition, finden, funktioniert er nicht wie AnimatedWidget. Im Fall von SlideTransition ist Slide die Eigenschaft, die wir animieren. Und im Falle von AnimatedWidget ist das Widget die Eigenschaft, die wir animieren.

Lassen Sie uns versuchen, das animierte Widget in unserem nächsten Codebeispiel zu verwenden.

Wie erhalte ich ein sich bewegendes Widget?

Mit Hilfe des animierten Widgets können wir das Widget verschieben. Wir können es drehen. Darüber hinaus können wir die Rotationsgeschwindigkeit steuern.

Das animierte Widget baut sich selbst neu auf, wenn es benachrichtigt wird. Zur Verdeutlichung benötigt es eine Listenable-Klasse. Wenn sich das Listenable ändert, wird das AnimatedWidget neu erstellt. Als Ergebnis erhalten wir das bewegte Objekt.

Wir verwenden das AnimatedWidget mit Animation, das die Listenable-Klasse implementiert. Kurz gesagt, Listenable enthält ChangeNotifier und ValueNotifier die die Listener benachrichtigen.

Wir werden diese Konzepte in einem separaten Artikel besprechen. Sie finden diese Artikel in unserer Kategorie Animation.

Was wird unser erster Schritt zur Verwendung des animierten Widgets sein?

Wir müssen davon Unterklassen erstellen und die Build-Funktion implementieren.

import 'package:flutter/material.dart';

import 'dart:math' as math;

class RotatingWheel extends AnimatedWidget {
  const RotatingWheel({
    Key? key,
    required AnimationController controller,
  }) : super(key: key, listenable: controller);

  Animation<double> get progressOfAnimation => listenable as Animation<double>;

  @override
  Widget build(BuildContext context) {
    return Transform.rotate(
      /// rotating speed is increasing
      angle: progressOfAnimation.value * 10.0 * math.pi,
      child: Row(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        children: const [
          AnimatedContainer(
            color: Colors.red,
          ),
          // ignore: prefer_const_constructors
          AnimatedContainer(
            color: Colors.blue,
          ),
          AnimatedContainer(
            color: Colors.green,
          ),
          AnimatedContainer(
            color: Colors.purple,
          ),
        ],
      ),
    );
  }
}

class AnimatedContainer extends StatelessWidget {
  const AnimatedContainer({
    Key? key,
    required this.color,
  }) : super(key: key);

  final Color color;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(8.0),
      color: color,
      child: Container(
        margin: const EdgeInsets.all(
          5.0,
        ),
        padding: const EdgeInsets.all(
          5.0,
        ),
        width: 70,
        height: 50,
        child: const Text(
          'Explicit Animation',
          style: TextStyle(
            color: Colors.white,
            fontSize: 10.0,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }
}

Als Ergebnis erhalten wir das sich bewegende Objekt, das sich dreht.

Nicht nur das, wir können auch die Rotationsgeschwindigkeit steuern.

Jetzt beginnt es sich zu drehen.

Wir haben das Zeilen-Widget und einige Container-Widgets verwendet.

Wie animiere ich ein Widget?

Was haben wir im obigen Code gesehen?

Eine benutzerdefinierte Klasse RotatingWheel erweitert das AnimatedWidget. Danach implementiert es als Unterklasse das „Listenable“ über den Animation Controller.

Jetzt können wir das RotatingWheel-Widget über jedes Stateful-Widget zurückgeben.

import 'package:flutter/material.dart';

import 'animated_container.dart';

class MyAppHome extends StatefulWidget {
  const MyAppHome({Key? key}) : super(key: key);

  @override
  State<MyAppHome> createState() => _MyAppHomeState();
}

class _MyAppHomeState extends State<MyAppHome> with TickerProviderStateMixin {
  late final AnimationController controller = AnimationController(
    /// reducing the number increases the speed of rotation
    duration: const Duration(seconds: 3),
    vsync: this,
  )..repeat();

  static const String title = 'Explicit Animation';
  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(title),
      ),
      body: RotatingWheel(controller: controller),
    );
  }
}

Das vollständige Code-Snippet finden Sie im entsprechenden GitHub-Repository.

Der Animationscontroller hat einen „erforderlichen“ Parameter – „Dauer“.

Wenn wir die Anzahl der Zeiten verringern, erhöht sich die Rotationsgeschwindigkeit.

duration: const Duration(seconds: 3),

Folglich erhalten wir das rotierende Rad.

Was nun?

Books at Leanpub

Books in Apress

My books at Amazon

GitHub repository

Technical blog

Twitter