Flutter进阶实战 6-20 酷炫的路由动画-2

前言：前面在路由动画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,
        );

运行效果：