Sobes.tech
Middle

Чӣ гуна интихоби роҳи мувофиқ барои ворид кардани анимация дар барномаи Flutter?

sobes.tech AI

Ҷавоб аз AI

Интихоб вобаста аст аз мураккабияти анимация, басомати он ва суръати он ва дараҷаи ҳамкории бо корбар.

Роҳҳои асосӣ:

  • ImplicitlyAnimatedWidgets: Анимацияҳои содда барои гузариш барои тағир додани хусусиятҳои widget (андоза, ранг, шаффофият). Автоматӣ тағиротҳоро аниматсия мекунанд.
    // Мисоли 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 ва AnimationController: Барои анимацияҳои мураккаб ва фармоишӣ. Ниёз дорад ба идоракунии равшан тавассути AnimationController ва навсозии widget бо AnimatedBuilder.
    // Мисоли RotationTransition бо AnimationController
    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(); // Такрор додани анимация
    
        _animation = CurvedAnimation(
          parent: _controller,
          curve: Curves.linear, // Кривая ростиии хаттӣ
        );
      }
    
      @override
      void dispose() {
        _controller.dispose();
        super.dispose();
      }
    
      @override
      Widget build(BuildContext context) {
        return RotationTransition( // Вижаги барои чархзанӣ
          turns: _animation,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
        );
      }
    }
    
  • AnimatedWidget: Класс абстрактӣ барои сохтани widget-ҳои аниматсионӣ, ки метавонанд такрор истифода шаванд. Соддасозии сохтани widget-ҳое, ки аз AnimationController вобастаанд.
    // Мисоли ScaleTransition (аз AnimatedWidget мерос мегирад)
    ScaleTransition(
      scale: _animation,
      child: const FlutterLogo(size: 75),
    );
    
  • Hero анимацияҳо: Анимацияҳои гузариш байни экранҳо, вақте ки як ваҳдати "парвоз" мекунад аз як экран ба дигар.
    // Дар аввалин экран
    Hero(tag: 'logo', child: FlutterLogo(size: 50));
    
    // Дар дуввумин экран
    Hero(tag: 'logo', child: FlutterLogo(size: 200));
    
  • CustomPaint: Барои расмкашии графикаи фармоишӣ ва анимацияи он. Ниёз дорад ба фаҳмиши амиқ дар расмкашӣ дар канвас.

Таблиғи муқоиса:

Раванди Мураккабият Назорат бар анимация Истифода
ImplicitlyAnimatedWidgets Кам маҳдуд Тасҳеҳоти содда дар хусусиятҳо
AnimatedBuilder/Controller Миёна пурра Анимацияҳои мураккаб/фармоишӣ
AnimatedWidget Миёна пурра Вижагиҳои аниматсионӣ барои такрор истифода бурда мешаванд
Hero анимацияҳо Кам маҳдуд Гузаришҳо байни экранҳо
CustomPaint Баландӣ пурра Графикаи фармоишӣ

Интихоб кунед усули соддатар, ки талаботҳои анимацияро қонеъ мекунад. Барои ҳолатҳои содда, ImplicitlyAnimatedWidgets беҳтар аст. Барои сценарийҳои мураккаб ва фармоишӣ, AnimatedBuilder бо AnimationController истифода баред. Hero барои гузаришҳо, CustomPaint барои графикаи мураккаб.