Flutter自定义路由动画

2021-06-08  本文已影响0人  倪大头

项目里的启动图是一个自定义的页面,启动图淡出后push主页,push的时候过渡很不自然,于是在push的时候加入了PageRouteBuilder路由动画

淡入:


8lmtb-5itcu-min.gif

旋转:


ruf9v-x8avw-min.gif

缩放:


hdtwz-q5wpg-min.gif

左滑:


wlhhb-d49kx-min.gif

自定义类继承PageRouteBuilder:

enum RouteTransition {
  fade,
  zoom,
  rotation,
}

class CustomRoute extends PageRouteBuilder {
  final Widget widget; // 目标页面
  final RouteTransition transition; // 动画效果
  final int duration; // 动画时长

  CustomRoute(this.widget, {this.transition, this.duration = 500})
      : super(
          // 过渡时间
          transitionDuration: Duration(milliseconds: duration),
          // 构造器
          pageBuilder: (BuildContext context, Animation<double> animation1,
              Animation<double> animation2) {
            return widget;
          },
          transitionsBuilder: (BuildContext context,
              Animation<double> animation1,
              Animation<double> animation2,
              Widget child) {
            if (transition == RouteTransition.fade) {
              // 淡入
              return FadeTransition(
                opacity: Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation(
                    parent: animation1, curve: Curves.fastOutSlowIn)),
                child: child,
              );
            } else if (transition == RouteTransition.zoom) {
              // 缩放
              return ScaleTransition(
                scale: Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation(
                    parent: animation1, curve: Curves.fastOutSlowIn)),
                child: child,
              );
            } else if (transition == RouteTransition.rotation) {
              // 旋转
              return RotationTransition(
                turns: Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation(
                    parent: animation1, curve: Curves.fastOutSlowIn)),
                child: ScaleTransition(
                  scale: Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation(
                      parent: animation1, curve: Curves.fastOutSlowIn)),
                  child: child,
                ),
              );
            } else {
              // 左滑进入
              return SlideTransition(
                  position: Tween<Offset>(
                          begin: Offset(1.0, 0.0), end: Offset(0.0, 0.0))
                      .animate(CurvedAnimation(
                          parent: animation1, curve: Curves.fastOutSlowIn)),
                  child: child);
            }
          },
        );
}

使用:

Navigator.pushReplacement(
    context,
    CustomRoute(
      TabBarController(),
      transition: RouteTransition.fade,
      duration: 1000,
    ),
);

transition默认左滑动画,duration动画时长(毫秒)

上一篇 下一篇

猜你喜欢

热点阅读