注:一些动画不支持部分Curve值,具体参阅wen
效果:
class _TestNavigatorState extends State<TestNavigator> with SingleTickerProviderStateMixin{
AnimationController _animationController;
Animation _animation;
Animation _changeSize;
Animation _changeColor;
Animation _changeOpacity;
Animation _changeRadians;
@override
void initState() {
// TODO: implement initState
super.initState();
// 创建动画
_animationController = AnimationController(
duration: Duration(seconds: 1),
vsync: this
);
// 设置Curve
_animation = CurvedAnimation(parent: _animationController, curve: Curves.easeInOut);
// 设置Tween
_changeSize = Tween(begin: 50.0,end: 100.0).animate(_animation);// 修改尺寸动画
_changeColor = ColorTween(begin: Colors.red,end: Colors.pink).animate(_animationController);//修改颜色动画
_changeOpacity = Tween(begin: 0.0,end: 1.0).animate(_animationController);//修改透明度
_changeRadians = Tween(begin: 0.0,end: 2*pi).animate(_animationController);//旋转角度
// 监听动画状态的改变
_animationController.addStatusListener((status) {
if(status == AnimationStatus.completed){// 动画执行完成
// 反转动画
_animationController.reverse();
}
else if(status == AnimationStatus.dismissed){// 动画状态恢复到初始状态
_animationController.forward();
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("动画"),
),
body: Center(
child:Column(
children: [
Center(
child: AnimatedBuilder(
animation: _animationController,
builder: (context,child){
return Opacity(
opacity: _changeOpacity.value,
child: Transform(
transform:Matrix4.rotationX(_changeRadians.value),//旋转
alignment: Alignment.center,//沿中心点旋转
child: Container(
height: _changeSize.value,
width: _changeSize.value,
color: _changeColor.value,
),
),
);
},
),
),
FloatingActionButton(
child: Icon(Icons.play_arrow),
onPressed: (){
if (_animationController.isAnimating){// 动画正在执行
_animationController.stop();
}
else{// 动画执行结束
if (_animationController.status == AnimationStatus.forward){
// 动画正向执行
_animationController.forward();
}
else if (_animationController.status == AnimationStatus.reverse){
// 动画反转执行
_animationController.reverse();
}
else{
_animationController.forward();
}
}
// _animationController.isAnimating ? _animationController.stop() : _animationController.forward();
},
)
],
)
),
);
}
@override
void dispose() {
_animationController.dispose();
// TODO: implement dispose
super.dispose();
}
}
网友评论