The basic animation of Flutter (2)

Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Xiao CAI learned the following basic Animation in the first two days, and then xiao CAI learned the following slightly more advanced version of Animation.

Composite animation

Xiao CAI’s first two days of learning is the basic single animation, of course, there is no problem with multiple animation effects, Xiao CAI next try a picture explicit recessive and zoom at the same time cycle use Demo;

1. AddStatusListener is used to listen for the current animation state, that is, the start or end;
2. AddListener is used to firm up the animation process and obtain a real-time value.

AnimationController controller;
Animation<double> animation, sizeAnim;

@override
void initState() {
  super.initState();
  controller = AnimationController(
      duration: const Duration(milliseconds: 2000), vsync: this);
  animation = Tween(begin: 0.0, end: 1.0).animate(controller);
  sizeAnim = Tween(begin: 0.0, end: 180.0).animate(controller);
  animation.addStatusListener((status) {
    if (status == AnimationStatus.completed) {
      controller.reverse();
    } else if (status == AnimationStatus.dismissed) {
      controller.forward();
    }
  });
  sizeAnim.addStatusListener((status) {
    if (status == AnimationStatus.completed) {
      controller.reverse();
    } else if (status == AnimationStatus.dismissed) {
      controller.forward();
    }
  });
}

Widget bodyWid() {
  return Center(
      child: Opacity(
          opacity: animation.value,
          child: FlutterLogo(size: sizeAnim.value)));
}
Copy the code

Time period animation

Since you can monitor the animation process and animation state, the overall animation can be flexibly mastered; Small dish next try to divide time animation, the first 50% explicit implicit processing, the last 50% zoom processing;

AnimationController controller; Animation<double> animation, sizeAnim; @override void initState() { super.initState(); controller = AnimationController(duration: const Duration(milliseconds: 2000), vsync: this); Animation = Tween<double>(begin: 0.0, end: 1.0,). Animate (Parent: controller, curve: The Interval (0.0, 0.5, the curve: Curves. Ease))); SizeAnim = Tween<double>(begin: 100.0, end: 180.0,). Animate (Parent: controller, curve: The Interval (0.5, 1.0, the curve: Curves. FastOutSlowIn))); } Widget bodyWid() { return Center( child: Opacity( opacity: animation.value, child: FlutterLogo(size: sizeAnim.value))); }Copy the code

Custom animation

Animation is flexible, we can customize the animation effect according to their own needs, small dishes try a circle around a circle;

AnimationController controller; Animation<double> animation; @override void initState() { super.initState(); controller = AnimationController(duration: const Duration(milliseconds: 2000), vsync: this); Animation = Tween(begin: -1.0, end: 1.0). Animate (controller); } class AnimationCanvas extends CustomPainter { Animation<double> animation; AnimationCanvas(this.animation); Paint _paint = Paint() .. color = Colors.blue .. StrokeWidth = 4.0.. style = PaintingStyle.stroke; @override void paint(Canvas canvas, Size size) { canvas.save(); Canvas. Methods like drawCircle (Offset (300, 300.0), 150.0, _paint); canvas.restore(); canvas.save(); canvas.translate(150 * sin(pi * animation.value), 150 * cos(pi * animation.value)); Canvas. Methods like drawCircle (Offset (300, 300.0), 10.0, _paint. J. color = Colors.red); canvas.restore(); } @override bool shouldRepaint(CustomPainter oldDelegate) { return true; }}Copy the code

Hero animation

Hero animation is the flyin animation provided by Flutter. It is mainly used to animate when the Flutter switches between pages and when the animation returns to the original path. When using, set the same tag between the two pages, convenient and concise;

Widget bodyWid04() {return Container(child: Padding(Padding: EdgeInsets. All (10.0), Child: GestureDetector(child: Row(children: <Widget>[Hero(tag: 'user_header', child: FlutterLogo(size: 50.0)), Padding(Padding: EdgeInsets. Only (left: 12.0), child: Text('Flutter Ptoto')]), onTap: () { Navigator.pushNamed(context, 'animateRoute01'); }))); }Copy the code

Xiao CAI learned a little more advanced animation, if there is a problem, please kindly guide!

Source: Little Monk A Ce