Flutter 跳转路由 转场动画SlideTransition

首先是点击按钮滑动跳转页面的效果:

这里使用的是Flutter 官网的一些代码:

Navigator.push(
            context,
            PageRouteBuilder(//自定义路由
              pageBuilder: (context, a, _) => MyApp2(),//需要跳转的页面
              transitionsBuilder: (context, a, _, child) {
                const begin =
                    Offset(1, 0); //Offset是一个2D小部件,他将记录坐标轴的x,y前者为宽,后者为高
                const end = Offset.zero; //得到Offset.zero坐标值
                const curve = Curves.ease; //这是一个曲线动画
                var tween = Tween(begin: begin, end: end)
                    .chain(CurveTween(curve: curve)); //使用补间动画转换为动画
                return SlideTransition(
                  //转场动画//目前我认为只能用于跳转效果
                  position: a.drive(tween), //这里将获得一个新的动画
                  child: child,
                );
              },
            ),
          );

现在的效果是点击后页面2从右向左滑来,返回则是从左到右滑回去

如果将begin =Offset(1,0)改为(0,1),

效果则会变成从下到上

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值