flutter开发实战-TweenSequence实现动画序列

flutter开发实战-TweenSequence实现动画序列

一、TweenSequence

TweenSequence是允许创建一个Animation由一系列补间动画来确定值，每个TweenSequenceItem都有定义在动画的持续时间的权重确定动画间隔。

• TweenSequence 动画组类
• TweenSequenceItem 用来定义每一个动画的具体实现的类

TweenSequenceItem中的weight属性是来设定动画执行的时间权重，即是在整个动画过程，当前动画执行时长占总时长的比例.

如一个动画差值占的时间比例为weight2/(weight1+weight2)

二、TweenSequence实现动画序列

声明动画控制器AnimationController 和 动画Animation。
通过TweenSequence实现动画序列

示例代码如下

class TweenSequencePage extends StatefulWidget {
  const TweenSequencePage({super.key});

  @override
  State createState() => _TweenSequencePageState();
}

class _TweenSequencePageState extends State
    with TickerProviderStateMixin {
  AnimationController? _animationController;
  Animation? _animation;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
        duration: Duration(milliseconds: 1000), vsync: this);
    TweenSequenceItem downMarginItem = TweenSequenceItem(
        tween: Tween(begin: 1.0, end: 300.0), weight: 5);
    TweenSequenceItem upMarginItem = TweenSequenceItem(
      tween: Tween(begin: 300.0, end: 50.0),
      weight: 4,
    );
    TweenSequenceItem downMarginItem2 = TweenSequenceItem(
      tween: Tween(begin: 50.0, end: 200.0),
      weight: 3,
    );
    TweenSequenceItem upMarginItem2 = TweenSequenceItem(
      tween: Tween(begin: 200.0, end: 100.0),
      weight: 2,
    );
    TweenSequenceItem endMarginItem = TweenSequenceItem(
      tween: Tween(begin: 100.0, end: 50.0),
      weight: 1,
    );
    TweenSequence tweenSequence = TweenSequence([
      downMarginItem,
      upMarginItem,
      downMarginItem2,
      upMarginItem2,
      endMarginItem,
    ]);
    _animation = tweenSequence.animate(_animationController!);
    _animation!.addListener(() {
      setState(() {});
    });

    _animation!.addStatusListener((status) {
      print("TweenSequence status:${status}");
      if (status == AnimationStatus.completed) {
        ///正向执行完毕后立刻反向执行（倒回去）
        _animationController?.reverse();
      } else if (status == AnimationStatus.dismissed) {
        ///无次数限定执行
        _animationController?.forward();
      }
    });
  }

  void startEasyAnimation() {
    _animationController?.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('TweenSequencePage'),
      ),
      body: Stack(alignment: Alignment.center, children: [
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 200,
              height: 50,
              color: Colors.blue,
              margin: EdgeInsets.only(top: _animation?.value ?? 0),
            ),
          ],
        ),
        Positioned(
          bottom: 20,
          child: OutlinedButton(
            onPressed: startEasyAnimation,
            child: Text(
              "点击执行动画",
              style: TextStyle(color: Colors.black38),
            ),
          ),
        ),
      ]),
    );
  }
}
    
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

三、小结

flutter开发实战-TweenSequence实现动画序列

学习记录，每天不停进步。