前言:前面在路由动画1中我们介绍了“渐隐渐现过度动画”的使用,这里再介绍三种动画以及叠加动画的使用!
一、缩放路由动画
return ScaleTransition(
scale:Tween(begin:0.0,end:1.0).animate(CurvedAnimation(
parent:animation1,
curve: Curves.fastOutSlowIn
)),
child:child
);
运行效果:
二、缩放+旋转路由动画
return ScaleTransition(
//scale缩放设置
scale: Tween(begin: 0.0,end: 1.0).animate(
CurvedAnimation(
parent: animation1,
curve: Curves.fastOutSlowIn //快进慢出的动画节奏
)
),
child: RotationTransition( //嵌套一个旋转动画
//turns旋转设置
turns: Tween(begin: 0.0,end: 1.0).animate(
CurvedAnimation(
parent:animation1,
curve: Curves.fastOutSlowIn
)
),
child: child, //可继续嵌套下一个动画
)
);
运行效果:
三、左右滑动路由动画
return SlideTransition(
//设置滑动的位置
position: Tween<Offset>( //offset位置
begin: Offset(-1.0, 0.0), //开始位置x轴在-1.0
end: Offset(0.0, 0.0) //结束位置x轴在0.0
).animate(CurvedAnimation(
parent:animation1,
curve:Curves.fastOutSlowIn
)),
child: child,
);
运行效果: