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<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 pleted) { ///正向执行完毕后立刻反向执行（倒回去） _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), ), ), ), ]), ); } } 三、小结

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

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