Explorer les animations flottantes : du simple au complexe

Flutter fournit une large gamme d'outils pour créer de superbes animations dans votre application. Des simples fondus aux animations complexes basées sur la physique, il existe des possibilités infinies pour ajouter une touche visuelle à votre interface utilisateur. Dans cet article, nous allons explorer certaines des bases de l'animation dans Flutter et passer à des exemples plus complexes.

1. Premiers pas avec AnimationController La AnimationControllerclasse est au cœur de toutes les animations Flutter. Il fournit un moyen de créer des animations qui peuvent être contrôlées et manipulées au fil du temps. Voici un exemple d'utilisation d'un AnimationControllerpour créer une animation de fondu d'entrée simple :

class FadeInAnimation extends StatefulWidget {
  final Widget child;
  final Duration duration;

  FadeInAnimation({required this.child, this.duration = const Duration(milliseconds: 500)});

  @override
  _FadeInAnimationState createState() => _FadeInAnimationState();
}

class _FadeInAnimationState extends State<FadeInAnimation> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _opacityAnimation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: widget.duration);
    _opacityAnimation = Tween<double>(begin: 0, end: 1).animate(_controller);
    _controller.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _opacityAnimation,
      builder: (BuildContext context, Widget? child) {
        return Opacity(
          opacity: _opacityAnimation.value,
          child: widget.child,
        );
      },
    );
  }
}

class ColorAnimation extends AnimatedWidget {
  final Widget child;

  ColorAnimation({required Animation<Color?> animation, required this.child})
      : super(listenable: animation);

  @override
  Widget build(BuildContext context) {
    final Animation<Color?> animation = listenable as Animation<Color?>;
    return ColorFiltered(
      colorFilter: ColorFilter.mode(animation.value!, BlendMode.modulate),
      child: child,
    );
  }
}

class ColorAnimationExample extends StatefulWidget {
  @override
  _ColorAnimationExampleState createState() => _ColorAnimationExampleState();
}

class _ColorAnimationExampleState extends State<ColorAnimationExample>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<Color?> _colorAnimation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: Duration(seconds: 2));
    _colorAnimation =
        ColorTween(begin: Colors.red, end: Colors.blue).animate(_controller);
    _controller.repeat(reverse: true);
  }

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ColorAnimation(
        animation: _colorAnimation,
        child: Container(
          width: 200,
          height: 200,
          decoration: BoxDecoration(
            shape: BoxShape.circle),
      child: Center(
        child: Text(
          "Hello, World!",
          style: TextStyle(fontSize: 24),
        ),
      ),
    ),
  ),
);
}
}

3. Travailler avec des courbes et des animations
Les animations dans Flutter peuvent être personnalisées avec des courbes, qui définissent la progression de l'animation dans le temps. Plusieurs courbes intégrées sont disponibles, telles que `Curves.linear` et `Curves.easeInOut`. Voici un exemple d'utilisation d'une courbe personnalisée pour créer une animation dynamique :

class BouncyAnimation extends StatefulWidget {
final Widget child;
final Duration duration;

BouncyAnimation({required this.child, this.duration = const Duration(milliseconds: 500)});

@override
_BouncyAnimationState createState() => _BouncyAnimationState();
}

class _BouncyAnimationState extends State<BouncyAnimation>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _animation;

@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this, duration: widget.duration, lowerBound: -0.5, upperBound: 1.0);
_animation = Tween<double>(begin: 0, end: 1).animate(
CurvedAnimation(
parent: _controller,
curve: Curves.bounceOut,
),
);
_controller.forward();
}

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

@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _animation,
builder: (BuildContext context, Widget? child) {
return Transform.scale(
scale: 1 + _animation.value,
child: widget.child,
);
},
);
}
}

4. Animation de widgets complexes avec CustomPaint
Parfois, les widgets intégrés ne suffisent pas pour créer l'animation souhaitée. Dans ces cas, vous pouvez utiliser le widget "CustomPaint" pour créer vos propres animations personnalisées. Voici un exemple d'utilisation de `CustomPaint` pour créer une animation de dégradé rotatif :

class GradientAnimation extends StatefulWidget {
final Widget child;
final Duration duration;

GradientAnimation({required this.child, this.duration = const Duration(seconds: 2)});

@override
_GradientAnimationState createState() => _GradientAnimationState();
}

class _GradientAnimationState extends State<GradientAnimation>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation<double> _animation;

@override
void initState() {
super.initState();
_controller = AnimationController(vsync: this, duration: widget.duration)
..repeat();
_animation = Tween<double>(begin: 0, end: 2 * math.pi).animate(_controller);
}

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

@override
Widget build(BuildContext context) {
return CustomPaint(
painter: GradientPainter(_animation),
child: widget.child,
);
}
}
class GradientPainter extends CustomPainter {
final Animation<double> animation;

GradientPainter(this.animation) : super(repaint: animation);

@override
void paint(Canvas canvas, Size size) {
final rect = Offset.zero & size;
final gradient = SweepGradient(
center: Alignment.center,
colors: [
Colors.red,
Colors.green,
Colors.blue,
],
startAngle: animation.value,
endAngle: animation.value + math.pi / 2,
);
canvas.drawPaint(Paint()..shader = gradient.createShader(rect));
}

@override
bool shouldRepaint(CustomPainter oldDelegate) => true;
}

Conclusion
Les animations Flutter peuvent être simples ou complexes, selon vos besoins. En comprenant les bases des animations, en utilisant des widgets prédéfinis tels que "AnimatedBuilder" et "CustomPaint", et en personnalisant les animations avec des courbes et des contrôleurs, vous pouvez créer de belles animations attrayantes dans vos applications Flutter. Que vous créiez une application simple ou complexe, les animations peuvent aider à améliorer l'expérience utilisateur et à faire en sorte que votre application se démarque des autres.