flutter动画组件

01-AnimatedBuilder

Catalogue

AnimatedBuilder可以让我们轻松的构建动画控件，下面的案例是让flutter logo图片旋转

效果：

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
class GMExampleAnimatedBuilderTest extends StatefulWidget {
  GMExampleAnimatedBuilderTest({Key key}) : super(key: key);

  @override
  _GMExampleAnimatedBuilderTestState createState() =>
      _GMExampleAnimatedBuilderTestState();
}

class _GMExampleAnimatedBuilderTestState
    extends State<GMExampleAnimatedBuilderTest> with TickerProviderStateMixin {
  AnimationController animationController;

  Animation<double> animation;

  @override
  void initState() {
    super.initState();

    this.animationController =
        AnimationController(duration: Duration(seconds: 2), vsync: this);

    this.animationController.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        this.animationController.reverse();
      } else if (status == AnimationStatus.dismissed) {
        this.animationController.forward();
      }
    });

    this.animation =
        Tween(begin: 0.0, end: 2.0 * math.pi).animate(this.animationController);

    //开始动画
    this.animationController.forward();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: animation,
      builder: (BuildContext ctx, Widget child) {
        return Transform.rotate(
          angle: animation.value,
          child: child,
        );
      },
      child: FlutterLogo(
        size: 60,
      ),
    );
  }

  @override
  void dispose() {
    this.animationController.dispose();
    super.dispose();
  }
}