flutter动画组件

18-RotationTransition

效果：

代码:

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
class GMExampleRotationTransitionTest extends StatefulWidget {
  GMExampleRotationTransitionTest({Key key}) : super(key: key);

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

class _GMExampleRotationTransitionTestState
    extends State<GMExampleRotationTransitionTest>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation _animation;

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

    _animation = Tween(begin: 0.0, end: 0.5).animate(_animationController);

    //开始动画
    _animationController.forward();

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return RotationTransition(
      turns: _animation,
      child: Container(
        height: 200,
        width: 200,
        color: Colors.red,
        alignment: Alignment.center,
        child: Text("test"),
      ),
    );
  }

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

    super.dispose();
  }
}
flutter动画组件

17-RelativePositionedTransition

效果：

代码:

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
class GMExampleRelativePositionedTransitionTest extends StatefulWidget {
  GMExampleRelativePositionedTransitionTest({Key key}) : super(key: key);

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

class _GMExampleRelativePositionedTransitionTestState
    extends State<GMExampleRelativePositionedTransitionTest>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation _animation;

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

    _animation = RectTween(
      begin: Rect.fromLTRB(10.0, 10.0, 10.0, 10.0),
      end: Rect.fromLTRB(300.0, 300.0, 300.0, 300.0),
    ).animate(_animationController);

    //开始动画
    _animationController.forward();

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      width: 300,
      color: Colors.blue,
      child: Stack(
        children: <Widget>[
          RelativePositionedTransition(
            rect: _animation,
            size: Size(0.0, 0.0),
            child: Container(
              color: Colors.red,
            ),
          ),
        ],
      ),
    );
  }

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

    super.dispose();
  }
}
flutter动画组件

16-PositionedTransition

效果：

代码:

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
class GMExamplePositionedTransitionTest extends StatefulWidget {
  GMExamplePositionedTransitionTest({Key key}) : super(key: key);

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

class _GMExamplePositionedTransitionTestState
    extends State<GMExamplePositionedTransitionTest>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation _animation;

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

    _animation = RelativeRectTween(
      begin: RelativeRect.fromLTRB(10, 10, 10, 10),
      end: RelativeRect.fromLTRB(100, 100, 100, 100),
    ).animate(_animationController);

    //开始动画
    _animationController.forward();

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      width: 300,
      color: Colors.blue,
      child: Stack(
        children: <Widget>[
          PositionedTransition(
            rect: _animation,
            child: Container(color: Colors.red),
          ),
        ],
      ),
    );
  }

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

    super.dispose();
  }
}
flutter动画组件

15-AnimatedDefaultTextStyle

效果：

代码:

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
class GMExampleAnimatedDefaultTextStyleTest extends StatefulWidget {
  GMExampleAnimatedDefaultTextStyleTest({Key key}) : super(key: key);

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

class _GMExampleAnimatedDefaultTextStyleTestState
    extends State<GMExampleAnimatedDefaultTextStyleTest>
    with SingleTickerProviderStateMixin {
  TextStyle _style;

  @override
  void initState() {
    _style = TextStyle(color: Colors.blue, fontSize: 14);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        SizedBox(
          height: 200,
        ),
        AnimatedDefaultTextStyle(
          style: _style,
          duration: Duration(seconds: 2),
          child: Text("老孟"),
        ),
        SizedBox(
          height: 100,
        ),
        RaisedButton(
          onPressed: () {
            setState(() {
              _style = TextStyle(color: Colors.red, fontSize: 24);
            });
          },
        ),
      ],
    );
  }
}
flutter动画组件

14-DefaultTextStyleTransition

效果：

代码:

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
class GMExampleDefaultTextStyleTransitionTest extends StatefulWidget {
  GMExampleDefaultTextStyleTransitionTest({Key key}) : super(key: key);

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

class _GMExampleDefaultTextStyleTransitionTestState
    extends State<GMExampleDefaultTextStyleTransitionTest>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation _animation;

  @override
  void initState() {
    _animationController =
        AnimationController(duration: Duration(seconds: 2), vsync: this);
    _animation = TextStyleTween(
      begin: TextStyle(color: Colors.blue, fontSize: 14),
      end: TextStyle(color: Colors.red, fontSize: 24),
    ).animate(_animationController);

    //开始动画
    _animationController.forward();

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTextStyleTransition(
      style: _animation,
      child: Text("老孟"),
    );
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }
}
flutter动画组件

13-DecoratedBoxTransition

效果：

代码:

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
59
60
61
class GMExampleDecoratedBoxTransitionTest extends StatefulWidget {
  GMExampleDecoratedBoxTransitionTest({Key key}) : super(key: key);

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

class _GMExampleDecoratedBoxTransitionTestState
    extends State<GMExampleDecoratedBoxTransitionTest>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation _animation;

  @override
  void initState() {
    _animationController =
        AnimationController(duration: Duration(seconds: 1), vsync: this);

    _animation = DecorationTween(
      begin: BoxDecoration(
        color: Colors.red,
        borderRadius: BorderRadius.circular(15),
      ),
      end: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(55),
      ),
    ).animate(_animationController);

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

    //开始动画
    _animationController.forward();

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return DecoratedBoxTransition(
      decoration: _animation,
      child: Container(
        height: 100,
        width: 100,
      ),
    );
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }
}
flutter动画组件

12-TweenAnimationBuilder

开发App中有时需要一个简单的动画，可以通过AnimationController实现，但比较麻烦，有没有一个内置的隐式动画组件来解决这个问题？TweenAnimationBuilder可以满足你对所有自定义动画的需求，而不用关系AnimationController。

效果：

代码:

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

class GMExampleTweenAnimationBuilderTest extends StatefulWidget {
  GMExampleTweenAnimationBuilderTest({Key key}) : super(key: key);

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

class _GMExampleTweenAnimationBuilderTestState
    extends State<GMExampleTweenAnimationBuilderTest> {
  double _value = 200;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: TweenAnimationBuilder<double>(
        tween: Tween<double>(begin: 100.0, end: _value),
        duration: Duration(seconds: 1),
        // curve: Curves.bounceIn,
        curve: Curves.easeIn,
        builder: (context, value, child) {
          return Container(
            height: value,
            width: value,
            child: child,
          );
        },
        onEnd: () {
          setState(() {
            _value = _value == 200 ? 250 : 200;
          });
        },
        child: Image.network(
          "https://gfs5.gomein.net.cn/T1QMW7BCZT1RCvBVdK",
          fit: BoxFit.fill,
        ),
      ),
    );
  }
}
flutter动画组件

11-AnimatedIcon

我们都知道Flutter系统中提供了大量的图标，但你是否知道Flutter还提供了很多动画图标，想要使用这些动画图标需要使用AnimatedIcon控件，首先需要设置图标，

效果：

代码:

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
class GMExampleAnimatedIconTest extends StatefulWidget {
  GMExampleAnimatedIconTest({Key key}) : super(key: key);

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

class _GMExampleAnimatedIconTestState extends State<GMExampleAnimatedIconTest>
    with SingleTickerProviderStateMixin {
  AnimationController animationController;

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

    animationController =
        AnimationController(duration: Duration(seconds: 1), vsync: this)
          ..addStatusListener((AnimationStatus status) {
            if (status == AnimationStatus.completed) {
              animationController.reverse();
            } else if (status == AnimationStatus.dismissed) {
              animationController.forward();
            }
          });
    animationController.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100,
      width: 100,
      alignment: Alignment.center,
      child: AnimatedIcon(
        icon: AnimatedIcons.view_list,
        progress: animationController,
      ),
    );
  }

  @override
  void dispose() {
    animationController.dispose();
    super.dispose();
  }
}
flutter动画组件

10-AnimatedSwitcher

AnimatedSwitcher在2个或者多个子组件之间切换时使用动画

效果：

代码:

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
class GMExampleAnimatedSwitcherTest extends StatefulWidget {
  GMExampleAnimatedSwitcherTest({Key key}) : super(key: key);

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

class _GMExampleAnimatedSwitcherTestState
    extends State<GMExampleAnimatedSwitcherTest> {
  var _currChild;

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

    _currChild = Container(
      key: ValueKey("1"),
      height: 300,
      width: 300,
      color: Colors.red,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnimatedSwitcher(
        duration: Duration(seconds: 1),
        child: _currChild,
        switchInCurve: Curves.easeIn,
        layoutBuilder: (Widget currentChild, List<Widget> previousChildren) {
          return Stack(
            children: <Widget>[
              ...previousChildren,
              currentChild,
            ],
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _currChild = Container(
              key: ValueKey("2"),
              height: 100,
              width: 100,
              color: Colors.blue,
            );
          });
        },
      ),
    );
    // return Scaffold(
    //   body: Center(
    //     child: AnimatedSwitcher(
    //       duration: Duration(seconds: 1),
    //       child: _currChild,
    //       switchInCurve: Curves.easeIn,
    //       transitionBuilder: (Widget child, Animation<double> value) {
    //         return ScaleTransition(
    //           child: child,
    //           scale: value,
    //         );
    //       },
    //     ),
    //   ),
    //   floatingActionButton: FloatingActionButton(
    //     onPressed: () {
    //       setState(() {
    //         _currChild = Container(
    //           key: ValueKey("2"),
    //           height: 300,
    //           width: 300,
    //           color: Colors.blue,
    //         );
    //       });
    //     },
    //   ),
    // );
  }
}