Simple use of Flutter animation

To animate a Flutter we need to remember three points: AnimationController, Thween, and Forward(). A simple Flutter animation consists of these three points

AnimationController: The AnimationController controls the animation. The AnimationController controls the start, backplay, pause, and so on. The Controller generates a new value for each frame

AnimationController({
  double value,
  this.duration,
  this.reverseDuration,
  this.debugLabel,
  this.lowerBound = 0.0.this.upperBound = 1.0.this.animationBehavior = AnimationBehavior.normal,
  @required TickerProvider vsync,
})
Copy the code

Duration: duration of animation lowerBound, upperBound: generated numeric interval, AnimationController generates linear numeric interval vsync during animation: Receive a TickerProvider that prevents off-screen animations from consuming unnecessary resources. A SchedulerBinding binds Flutter when it starts. This allows a callback for every screen refresh. Ticker uses this SchedulerBinding to add screen refresh callbacks. Each time the screen refresh will be called to TickCallBack simple using method is as follows: we set up a 10 seconds animation controller, I’m introduced to this because I had with vsync SingleTickerProviderStateMixin

AnimationController controller= AnimationController(vsync: this,duration: Duration(seconds: 10));
Copy the code

Tweed: We can linearly generate a range of numbers using the AnimationController, but what if we want to generate colors? Or what else? We can use Tweed to do this. There are other subclasses of Thweed that we can use in addition to numbers. To use Tween, we need to call animatie and pass in an Animation

If you want to set the color but use Tween, you will get an error

Animation anmitiontween= ColorTween(begin:Colors.transparent,end:Colors.blue).animate(curved).. addListener((){ setState(() { }); });Copy the code

Here’s what you can use Tweed for:

Curve: The process of animation can be uniform, accelerated, decelerated, or added before subtraction, or subtraction before addition, etc. You can play it however you want. We can set the Curve of CurvedAnimation through Curve. Curve class provides some curves for us. We can define our own Curve, inherit Curve, and implement its method, returning a double

• Using the method provided by Curve:

CurvedAnimation curved=CurvedAnimation(parent: controller, curve: Curves.bounceIn);
// Use CurvedAnimation to combine a Controller with curve to generate a new animation object
Copy the code

• Define the Curve method yourself:

class ShakeCurve extends Curve {
  @override
  double transform(double t) {
    return math.sin(t * math.PI * 2); }}Copy the code

In our actual development, it is better to extract some general animations and make them into AnimationUtils to avoid writing some repetitive animation code. Below is the core code of a color gradient animation

AnimationController controller;

  Animation anmitiontween;

  CurvedAnimation curved;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

   controller= AnimationController(vsync: this,duration: Duration(seconds: 5));
   
// curved=CurvedAnimation(parent: controller, curve: Curves.bounceIn);anmitiontween= ColorTween(begin:Colors.transparent,end:Colors.red).animate(controller).. addListener((){ setState(() { }); }); controller.forward(); }@override
    Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("CCCC"),
      ),
      body: Center(
        child: GestureDetector(
          child: Container(
            width: 100.0,
            height: 100.0,
            child: Text("111"),
            color: anmitiontween.value==null? Colors.transparent:anmitiontween.value, ), ), ), ); }@override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    controller.dispose();
  }
Copy the code

The effect is as follows: