当前位置：首页 > news >正文

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

news 来源：原创 2025/5/19 13:58:17

一、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<TweenSequencePage> createState() => _TweenSequencePageState();
}

class _TweenSequencePageState extends State<TweenSequencePage>
    with TickerProviderStateMixin {
  AnimationController? _animationController;
  Animation<double>? _animation;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
        duration: Duration(milliseconds: 1000), vsync: this);
    TweenSequenceItem<double> downMarginItem = TweenSequenceItem<double>(
        tween: Tween(begin: 1.0, end: 300.0), weight: 5);
    TweenSequenceItem<double> upMarginItem = TweenSequenceItem<double>(
      tween: Tween(begin: 300.0, end: 50.0),
      weight: 4,
    );
    TweenSequenceItem<double> downMarginItem2 = TweenSequenceItem<double>(
      tween: Tween(begin: 50.0, end: 200.0),
      weight: 3,
    );
    TweenSequenceItem<double> upMarginItem2 = TweenSequenceItem<double>(
      tween: Tween(begin: 200.0, end: 100.0),
      weight: 2,
    );
    TweenSequenceItem<double> endMarginItem = TweenSequenceItem<double>(
      tween: Tween(begin: 100.0, end: 50.0),
      weight: 1,
    );
    TweenSequence<double> tweenSequence = TweenSequence<double>([
      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: <Widget>[
            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),
            ),
          ),
        ),
      ]),
    );
  }
}