Old Meng introduction: introduced in the previous article

A complete summary of the Flutter Animation Series with 25 animation components

  • Laomengit.com/flutter/mod…

Google Engineers guide you to select Flutter animation controls:

  • Laomengit.com/flutter/mod…

In the project, the animation effect is often a combination of several animations, such as color, size, displacement and other attributes change at the same time or in order. This article explains how to achieve the combination of animations

The combination animation of Flutter uses Interval, which is derived from Curve and can be used as follows:

Animation _sizeAnimation = Tween(begin: 100.0, end: 300.0).animate(CurvedAnimation(
    parent: _animationController, curve: Interval(0.5.1.0)));
Copy the code

Indicates that the _sizeAnimation animation starts at 0.5 (half) and ends at 3 seconds if the animation length is 6 seconds.

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

The following implementation of a first implementation of the color change, in the implementation of the size change, code 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(); }}Copy the code

The effect is as follows:

We can also set simultaneous animation by changing the values of both intervals to Interval(0.0, 1.0).

Imagine the following scene, a red box, animation time is 6 seconds, the first 40% of the time size from 100->200, then leave 200 unchanged for 20% of the time, the last 40% of the time size from 200->300, this effect is achieved by TweenSequence, code 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);
Copy the code

Weight is the weight of each Tween.

The final effect is as follows:

communication

The site of Flutter: laomengit.com contains more than 160 detailed uses of Flutter components.