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});@overrideState<TweenSequencePage> createState() => _TweenSequencePageState();
}class _TweenSequencePageState extends State<TweenSequencePage>with TickerProviderStateMixin {AnimationController? _animationController;Animation<double>? _animation;@overridevoid 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();}@overridevoid dispose() {_animationController?.dispose();super.dispose();}@overrideWidget 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实现动画序列

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