Sobes.tech
Middle

Μίλησέ μου για την κινούμενη εικόνα στο Flutter.

sobes.tech AI

Απάντηση από AI

Στο Flutter, οι κινούμενες εικόνες χωρίζονται σε δύο βασικούς τύπους: έμμεσες και ρητές.

  • Οι έμμεσες κινούμενες εικόνες είναι απλές κινούμενες εικόνες που διαχειρίζονται αυτόματα τις αλλαγές κατάστασης του widget. Για παράδειγμα, το AnimatedContainer αλλάζει ομαλά τις παραμέτρους του (χρώμα, μέγεθος) όταν αλλάζουν οι ιδιότητες, χωρίς να χρειάζεται να γράψετε ελεγκτές κινούμενης εικόνας.

  • Οι ρητές κινούμενες εικόνες προσφέρουν πλήρη έλεγχο στη διαδικασία της κινούμενης εικόνας. Για αυτές, χρησιμοποιείται ο AnimationController, που διαχειρίζεται τον χρόνο και την πρόοδο της κινούμενης εικόνας. Με το Tween και το Animation, μπορείτε να ορίσετε πώς αλλάζουν οι τιμές με την πάροδο του χρόνου.

Παράδειγμα έμμεσης κινούμενης εικόνας:

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

Παράδειγμα ρητής κινούμενης εικόνας:

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();
  }
}

Έτσι, το Flutter παρέχει ισχυρά εργαλεία για τη δημιουργία ομαλών και ανταποκρινόμενων κινούμενων εικόνων που βελτιώνουν την εμπειρία του χρήστη.