web-dev-qa-db-fra.com

Comment ajoutez-vous une animation de classe de courbes à l'animationController dans le flutter?

J'essaie d'ajouter l'animation de la classe de courbes 'courbes.bonchonout' à mon code qui utilise une animationController.

Voici mon code:

import 'package:flutter/material.Dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  var squareScale = 1.0;
  static AnimationController _controller;

  @override
  void initState() {
    _controller = AnimationController(
        vsync: this,
        lowerBound: 0.5,
        upperBound: 1.0,
        duration: Duration(milliseconds: 300));

    _controller.addListener(() {
      setState(() {
        squareScale = _controller.value;
      });
    });

    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Bounce Example"),
      ),
      body: Stack(
        children: <Widget>[
          Container(
            width: 150.0,
            height: 150.0,
            color: Colors.yellowAccent,
          ),
          Column(
            children: <Widget>[
              Row(
                children: <Widget>[
                  GestureDetector(
                    onTap: () {
                      _controller.forward(from: 0.0);
                    },
                    child: Transform.scale(
                      scale: squareScale,
                      child: Container(
                        width: 150.0,
                        height: 150.0,
                        color: Colors.green,
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Actuellement, le conteneur vert anime de 0,5 échelle à 1,0 échelle mais ne rebondit pas. Comment puis-je ajouter l'animation 'Curves.BonzOUT' afin que le conteneur rebondit lors de la prise en charge?

Merci d'avance pour votre aide!

dartflutterflutter-animation
6
hello_friend

Vous voudrez utiliser à la fois un contrôleur d'animation et une Tween, ce qui vous permettra d'ajouter Curves.bounceOut.

Quelque part dans votre code ajoutez:

AnimationController _controller;
var scaleAnimation;

Et dans votre méthode initState():

_controller = new AnimationController(
 duration: new Duration(milliseconds: 300),
 vsync: this
)
..addListener(() {
  setState(() {});
});
scaleAnimation = new Tween(
  begin: 0.5,
  end: 1.0,
).animate(new CurvedAnimation(
  parent: _controller,
  curve: Curves.bounceOut
));

Remarque Le ..addListener() est un joli code dard qui vous permet d'ajouter facilement un auditeur. La Tween raconte essentiellement à votre animation qu'il doit aller de la valeur en begin à la valeur de end dans le délai imparti dans le AnimationController. Pour utiliser cette valeur dans votre code, vous pouvez désormais définir l'échelle de votre résultat de votre animation:

child: Transform.scale(
  scale: scaleAnimation.value,
  child: Container(
    width: 150.0,
    height: 150.0,
    color: Colors.green,
  ),
),

Et lorsque l'animation est appelée, il mettra ensuite automatiquement à jour l'échelle du conteneur.

Éditer:

Changez votre widget à ceci:

child: isChanging ? Transform.scale(
  scale: scaleAnimation.value,
  child: Container(
    width: 150.0,
    height: 150.0,
    color: Colors.green,
  ),
) : Transform.scale(
  scale: 1.0,
  child: Container(
    width: 150.0,
    height: 150.0,
    color: Colors.green,
  ),
),

Gardez vos paramètres begin et end par paramètres 0.5 Et 1.0 Respectivement, mais dans votre méthode onTap() avant de transférer votre contrôleur Ajouter:

onTap: () {
  setState(() {
    isChanging = true
  });
  _controller.forward(from: 0.0);
}

Et n'importe où dans votre code ajoutez la ligne bool isChanging. Enfin, vous voudrez réinitialiser le widget affiché à la fin de votre animation, alors changez votre scaleinimation à:

child: Transform.scale(
  scale: scaleAnimation.value,
  child: Container(
    width: 150.0,
    height: 150.0,
    color: Colors.green,
  ),
)..addStatusListener((AnimationStatus status) {
  if (status == AnimationStatus.completed) { //the animation is finished
    _controller.reset();
    setState(() {
      isChanging = false;
    }
  }
});
7
R. Duggan

Un moyen plus succinct de le faire est de simplement utiliser controller.drive() et CurveTween:

anim = animController.drive(CurveTween(curve: Curves.easeOut));

Ensuite, utilisez anim.value Dans votre arbre de widget.

Peut aussi faire cela en ligne si vous voulez:

Opacity(opacity: controller.drive(CurveTween(curve: Curves.easeOut)).value)
0
shawnblais