flutter动画组件

12-TweenAnimationBuilder

Catalogue

开发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,
        ),
      ),
    );
  }
}