Kuidas valida sobiv animatsiooni rakendamise viis…

Valik sõltub animatsiooni keerukusest, selle sagedusest ja kasutaja interaktsiooni astmest.

Põhivõtted:

ImplicitlyAnimatedWidgets: Lihtsad üleminekud animatsioonid oleku muutmiseks (suurus, värv, läbipaistvus). Automaatselt animatsioonid muutusi:

// Näide AnumatedContainer
AnimatedContainer(
  duration: const Duration(seconds: 1),
  width: _size,
  height: _size,
  color: _color,
  alignment: Alignment.center,
  curve: Curves.fastOutSlowIn,
  child: const FlutterLogo(size: 75),
);

AnimatedBuilder ja AnimationController: Keerulisemate ja kasutaja kohandatud animatsioonide jaoks. Nõuab selget kontrolli animatsiooni üle AnimationController kaudu ja uuesti joonistamist AnimatedBuilder abil:

// RotationTransition näide koos AnimationController'iga
class RotatingSquare extends StatefulWidget {
  @override
  _RotatingSquareState createState() => _RotatingSquareState();
}

class _RotatingSquareState extends State<RotatingSquare> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

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

    _animation = CurvedAnimation(
      parent: _controller,
      curve: Curves.linear, // Lineaarne animatsiooni kurve
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return RotationTransition( // Pöörlemise widget
      turns: _animation,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blue,
      ),
    );
  }
}

AnimatedWidget: Abstraktne klass, mis võimaldab luua taaskasutatavaid animatsioone sisaldavaid widget'e. Lihtsustab AnimationController-ile põhinevate widget'ite loomist:
```
// ScaleTransition näide (pärineb AnimatedWidget'ist)
ScaleTransition(
  scale: _animation,
  child: const FlutterLogo(size: 75),
);
```

Hero animatsioonid: Üleminekud ekraanide vahel, kui sama widget "lendab" ühest ekraanist teise:

// Esimesel ekraanil
Hero(tag: 'logo', child: FlutterLogo(size: 50));

// Teisel ekraanil
Hero(tag: 'logo', child: FlutterLogo(size: 200));

CustomPaint: Kasutatakse kasutaja joonistatud graafika ja selle animatsiooni jaoks. Vajab sügavat joonistamise teadmist:

Võrdlustabel:

Meetod	Keerukus	Kontroll animatsiooni üle	Kasutamine
ImplicitlyAnimatedWidgets	Madal	Piiratud	Lihtsad omaduste muutused
AnimatedBuilder/Controller	Keskmine	Täielik	Keerukad/kohandatud animatsioonid
AnimatedWidget	Keskmine	Täielik	Taaskasutatavad animatsioonid
Hero animatsioonid	Madal	Piiratud	Üleminekud ekraanide vahel
CustomPaint	Kõrge	Täielik	Kasutaja graafika

Valige kõige lihtsam meetod, mis vastab animatsiooni nõuetele. Lihtsate juhtude puhul on eelistatud ImplicitlyAnimatedWidgets. Keerulisemate ja kohandatud stsenaariumide jaoks kasutage AnimatedBuilder koos AnimationController-iga. Hero sobib üleminekutele, CustomPaint keerulise graafika jaoks.

Kuidas valida sobiv animatsiooni rakendamise viis Flutter rakenduses?