In Flutter, Interval is used for composite animation, which is inherited from Curve. The usage is as follows:

Animation _sizeAnimation = Tween(begin: 100.0, end: 300.0).animate(CurvedAnimation(
    parent: _animationController, curve: Interval(0.5, 1.0)));

Indicates that the "sizeAnimation" animation starts from 0.5 (half) to the end. If the animation duration is 6 seconds, the "sizeAnimation" starts from the third second.

The values of the begin and end parameters in Interval range from 0.0 to 1.0.

The following implementation implements a color change first, and a size change in execution. The code is as follows:

class AnimationDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _AnimationDemo();
}

class _AnimationDemo extends State<AnimationDemo>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation _colorAnimation;
  Animation _sizeAnimation;

  @override
  void initState() {
    _animationController =
        AnimationController(duration: Duration(seconds: 5), vsync: this)
    ..addListener((){setState(() {
      
    });});

    _colorAnimation = ColorTween(begin: Colors.red, end: Colors.blue).animate(
        CurvedAnimation(
            parent: _animationController, curve: Interval(0.0, 0.5)));

    _sizeAnimation = Tween(begin: 100.0, end: 300.0).animate(CurvedAnimation(
        parent: _animationController, curve: Interval(0.5, 1.0)));

    //Start animation
    _animationController.forward();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Container(
              height: _sizeAnimation.value,
              width: _sizeAnimation.value,
              color: _colorAnimation.value),
        ],
      ),
    );
  }

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

The effect is as follows:

We can also animate at the same time, just change the values of two intervals to Interval(0.0, 1.0).

Imagine the following scene, a red box, with an animation duration of 6 seconds. The first 40% of the time is from 100 to > 200, and then keeps 200 unchanged for 20% of the time, and the last 40% of the time is from 200 to > 300. This effect is achieved by tweetsequence. The code is as follows:

_animation = TweenSequence([
  TweenSequenceItem(
      tween: Tween(begin: 100.0, end: 200.0)
          .chain(CurveTween(curve: Curves.easeIn)),
      weight: 40),
  TweenSequenceItem(tween: ConstantTween<double>(200.0), weight: 20),
  TweenSequenceItem(tween: Tween(begin: 200.0, end: 300.0), weight: 40),
]).animate(_animationController);

Weight is the weight of each Tween.

The final effect is as follows:

Communication

If you have any questions or technical doubts about Flutter, please join the Flutter communication group (wechat: laomengit).

Meanwhile, I also welcome my official account of Flutter, the official account of Flutter.

Flutter address: http://laomengit.com It contains the detailed usage of more than 160 components.