Sobes.tech
Middle

Rääkige mulle Flutteri animatsioonist.

sobes.tech AI

Vastus AI-lt

Flutteris jaguneb kahe põhiliiki: implitsiitseteks ja eksplitsiitseteks animatsioonideks.

  • Implitsiitne animatsioon on lihtne animatsioon, mis automaatselt juhib vidžeti oleku muutusi. Näiteks AnimatedContainer muudab sujuvalt oma parameetreid (värv, suurus) muutuste ajal, ilma et peaks kirjutama animatsiooni kontrollerit.

  • Eksplitsiitne animatsioon annab täieliku kontrolli animatsiooni protsessi üle. Selle jaoks kasutatakse AnimationControllerit, mis juhib aega ja edenemist. Tweeni ja Animationi abil saab määrata, kuidas väärtused aja jooksul muutuvad.

Implitsiitse animatsiooni näide:

AnimatedContainer(
  duration: Duration(seconds: 1),
  width: _selected ? 200 : 100,
  height: _selected ? 200 : 100,
  color: _selected ? Colors.blue : Colors.red,
  child: ...,
)

Eksplitsiitse animatsiooni näide:

class MyAnimatedWidget extends StatefulWidget {
  @override
  _MyAnimatedWidgetState createState() => _MyAnimatedWidgetState();
}

class _MyAnimatedWidgetState extends State<MyAnimatedWidget> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

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

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) {
        return Container(
          width: _animation.value,
          height: _animation.value,
          color: Colors.blue,
        );
      },
    );
  }

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

Seega pakub Flutter võimsad vahendid sujuvate ja reageerivate animatsioonide loomiseks, mis parandavad kasutajakogemust.