"Flutter animated series a" super full 25 kinds of animation component summary

Principle of operation of animation

Animation principle of any program is the same, namely: the persistence of vision, persistence of vision called Vision pause, the human eye when viewing the scene, the light signals into the brain, subject to a short period of time, after the end of the action of light , visual image does not disappear immediately, this residual vision called "after-image" visual phenomenon is called "persistence of vision."

The film is relying on persistence of vision, in the sense the film is continuous. The animation has a smooth feel, at least the frame rate to reach 24, namely: Play 24 images, animation has a very critical performance parameters FPS (Frame Per Second), that is, the frame rate, reaching 24fps, the picture is more per second fluent, FPS Flutter theoretically can reach 60fps, more than 48fps, you will feel silky smooth.

Flutter animation system

In order to facilitate the developer to develop animation, the animation system Flutter encapsulated, four abstract concepts: Animation, Curve, AnimationController, Tween.

• Animation: Flutter animation core class, which is an abstract class, the use of its subclasses usually: AnimationController, you can obtain the current status and value of the animation, you can also add value and status change monitor change monitor.
• Curve: animation execution decision graph, and the Interpolator (difference device) is the same as the Android, responsible for controlling the rate of change of the animation, the system has 10 kinds of packaging the animation curve, see Curvesclass.
• AnimationController: animation controller to control the animation starts, stops. Inherited from Animation.
• Tween: generate different map value ranges, the value of the animation is AnimationController double type, color change if required, Tween can do this job.

The size of the control by the Container 100 becomes 300, as follows:

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

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

  @override
  void initState() {
    _animationController = AnimationController(
        duration: Duration(seconds: 2),
        lowerBound: 100.0,
        upperBound: 300.0,
        vsync: this);

    _animationController.addListener(() {
      setState(() {});
    });

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: <Widget>[
          RaisedButton(
            child: Text('开始动画'),
            onPressed: () {
              _animationController.forward();
            },
          ),
          Expanded(
            child: Center(
              child: Container(
                width: _animationController.value,
                height: _animationController.value,
                color: Colors.red,
              ),
            ),
          ),
        ],
      ),
    );
  }

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

AnimationControllerThe initialization vsync, this parameter can say to say to understand one day, we just need to remember its wording, thisrepresents SingleTickerProviderStateMixinthe screen every frame will lead to AnimationControllerchanges in value.

disposeMethods to keep in mind is released AnimationController.

UI is updated through setStateupdates,

_animationController.addListener(() {
  setState(() {});
});

Results are as follows:

By default, the animation curve is linear, modify the animation curve as follows:

class _AnimationDemo extends State<AnimationDemo>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation _animation;
  @override
  void initState() {
    _animationController = AnimationController(
        duration: Duration(seconds: 2),
        vsync: this);

    _animationController.addListener(() {
      setState(() {});
    });

    _animation = CurvedAnimation(parent: _animationController,curve: Curves.easeIn);
    _animation = Tween(begin: 100.0,end: 300.0).animate(_animation);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: <Widget>[
          RaisedButton(
            child: Text('开始动画'),
            onPressed: () {
              _animationController.forward();
            },
          ),
          Expanded(
            child: Center(
              child: Container(
                width: _animation.value,
                height: _animation.value,
                color: Colors.red,
              ),
            ),
          ),
        ],
      ),
    );
  }

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

Modify place as follows:

• In AnimationController lowerBoundand upperBoundcan not be directly set to 100 and 300, need to be as AnimationController CurvedAnimation used, the range of values must be 0-1.
• Since the range of values ​​is AnimationController 0-1, 100-300 and animation changes required, it is introduced Tween.

If the animation is a color change, amend as follows:

_animation = ColorTween(begin: Colors.red,end: Colors.blue).animate(_animation);

Monitor the state of the animation:

_animationController.addStatusListener((status) {
if (status == AnimationStatus.completed) {
//执行结束反向执行
  _animationController.reverse();
} else if (status == AnimationStatus.dismissed) {
//反向执行结束正向执行
  _animationController.forward();
}
});

Animation states:

• dismissed: end of the animation, stop at the beginning.
• forward: Animation forward direction.
• reverse: the animation in reverse.
• completed: end of the animation, stop at the end.

Basic usage is above animation, have not found some common places:

• Each time you refresh UI need to call setState.

"Lazy" is the greatest power of original sin, but also social progress.

Flutter encapsulates AnimatedWidget, this control will encapsulate setState. Although Flutter to encapsulate a lot of animation control, but the original aim.

Flutter 25 Zhong Introducing animation

Flutter is available in a large number of components of animation and detailed usage:

• AnimatedBuilder：http://laomengit.com/flutter/widgets/AnimatedBuilder/
• AlignTransition:http://laomengit.com/flutter/widgets/AlignTransition/
• AnimatedOpacity：http://laomengit.com/flutter/widgets/AnimatedOpacity/
• AnimatedAlign：http://laomengit.com/flutter/widgets/AnimatedAlign/
• AnimatedPadding：http://laomengit.com/flutter/widgets/AnimatedPadding/
• AnimatedCrossFade：http://laomengit.com/flutter/widgets/AnimatedCrossFade/
• AnimatedContainer：http://laomengit.com/flutter/widgets/AnimatedContainer/
• AnimatedPositioned：http://laomengit.com/flutter/widgets/AnimatedPositioned/
• AnimatedPositionedDirectional：http://laomengit.com/flutter/widgets/AnimatedPositionedDirectional/
• AnimatedSwitcher：http://laomengit.com/flutter/widgets/AnimatedSwitcher/
• AnimatedIcon：http://laomengit.com/flutter/widgets/AnimatedIcon/
• TweenAnimationBuilder：http://laomengit.com/flutter/widgets/TweenAnimationBuilder/
• DecoratedBoxTransition：http://laomengit.com/flutter/widgets/DecoratedBoxTransition/
• DefaultTextStyleTransition：http://laomengit.com/flutter/widgets/DefaultTextStyleTransition/
• AnimatedDefaultTextStyle：http://laomengit.com/flutter/widgets/AnimatedDefaultTextStyle/
• PositionedTransition：http://laomengit.com/flutter/widgets/PositionedTransition/
• RelativePositionedTransition：http://laomengit.com/flutter/widgets/RelativePositionedTransition/
• RotationTransition：http://laomengit.com/flutter/widgets/RotationTransition/
• ScaleTransition：http://laomengit.com/flutter/widgets/ScaleTransition/
• SizeTransition：http://laomengit.com/flutter/widgets/SizeTransition/
• SlideTransition：http://laomengit.com/flutter/widgets/SlideTransition/
• FadeTransition：http://laomengit.com/flutter/widgets/FadeTransition/
• AnimatedModalBarrier：http://laomengit.com/flutter/widgets/AnimatedModalBarrier/
• AnimatedList：http://laomengit.com/flutter/widgets/AnimatedList/
• Hero：http://laomengit.com/flutter/widgets/Hero/

In fact, the animation is not just control properties of these changes, as well as the use of self-drawn animation Paint.

To see so many components are not dizzy, I did not expect so many components, then we changed how to select appropriate components? It was a tortured soul ah.

This is the "Flutter animated series," the first chapter, then there are:

• A combination of animation
• Custom Animation
• In the end how to choose animation control

communicate with

If you still have doubts or questions about the technical aspects of Flutter, Flutter welcome to join the exchange group (micro letter: laomengit).

I also welcome the attention of the public Flutter number [programmers] Lao Meng, public starting Flutter number of relevant content.

Flutter Address: http://laomengit.com which contains a plurality of detailed usage assemblies 160.