Sobes.tech
Middle

როგორ შევარჩიოთ შესაბამისი მეთოდი Flutter-ის აპლიკაციაში ანიმაციების ჩასართავად?

sobes.tech AI

პასუხი AI-სგან

არჩევა დამოკიდებულია ანიმაციის სირთულეზე, მისი სიხშირეზე და მომხმარებელთან ურთიერთობის ხარისხზე.

ძირითადი მეთოდები:

  • ImplicitlyAnimatedWidgets: მარტივი გადასვლის ანიმაციები მდგომარეობის ცვლილებისთვის (ზომა, ფერი, გამჭვირვალობა). ავტომატურად ანიმირებს თვისებების ცვლილებებს:

    // მაგალითი 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-ის საშუალებით და 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: აბსტრაქტული კლასი, რომელიც ქმნის გამეორებად ანიმირებულ ვიჯეტებს. გამარტივებს 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 — რთული გრაფიკისთვის.