Flutter 页面切换动画

Flutter 页面切换动画

创建两个模拟页面

class LeftPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue,
      appBar: AppBar(title: Text("第一页", style: TextStyle(color: Colors.white),),
        elevation: 0,
        backgroundColor: Colors.blue,),
      body: Center(
        child: MaterialButton(onPressed: () {
          Navigator.push(
              context, MaterialPageRoute(builder: (context) => RightPage()));
        },
        // 页面切换示例
        // Navigator.push(context, SlidePageRouteBuilder(RightPage()));
          child: Icon(
              Icons.navigate_next,
              color: Colors.white,
              size: 64.0
          ),),
      ),
    );
  }
}

class RightPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.red,
      appBar: AppBar(title: Text("第二页", style: TextStyle(color: Colors.white),),
        elevation: 0,
        backgroundColor: Colors.red,
        // 不显示返回键
        automaticallyImplyLeading: false,
      ),
      body: Center(
        child: MaterialButton(onPressed: () {
          Navigator.pop(context);
        },
          child: Icon(
              Icons.navigate_before,
              color: Colors.white,
              size: 64.0
          ),),
      ),
    );
  }
}

渐变效果

/// 自定义页面切换动画 - 渐变切换
class CustomPageRouteBuilder extends PageRouteBuilder{
  // 跳转的页面
  final Widget widget;
  CustomPageRouteBuilder(this.widget):super(
      transitionDuration:Duration(seconds: 1),
      pageBuilder:(BuildContext context, Animation animation, Animation secondaryAnimation){
        return widget;
      },
      transitionsBuilder:(BuildContext context, Animation animation, Animation secondaryAnimation, Widget child){
        return FadeTransition(child:child,
            opacity: Tween(begin: 0.0,end: 1.0)
                .animate(CurvedAnimation(parent: animation, curve: Curves.fastOutSlowIn))
        );
      }
  );
}

参数介绍

• FadeTransition:渐隐渐现过渡效果，主要设置opactiy（透明度）属性，值是0.0-1.0。
• animate :动画的样式，一般使用动画曲线组件（CurvedAnimation）。
• curve: 设置动画的节奏，也就是常说的曲线，Flutter准备了很多节奏，通过改变动画取消可以做出很多不同的效果。
• transitionDuration：设置动画持续的时间，建议再1和2之间。

缩放切换

/// 自定义页面切换动画 - 缩放切换
class ScalePageRouteBuilder extends PageRouteBuilder{
  // 跳转的页面
  final Widget widget;
  ScalePageRouteBuilder(this.widget):super(
      transitionDuration:Duration(seconds: 1),
      pageBuilder:(BuildContext context, Animation animation, Animation secondaryAnimation){
        return widget;
      },
      transitionsBuilder:(BuildContext context, Animation animation, Animation secondaryAnimation, Widget child){
        return ScaleTransition(child:child,
            scale: Tween(begin: 0.0,end: 1.0)
                .animate(CurvedAnimation(parent: animation, curve: Curves.fastOutSlowIn))
        );
      }
  );
}

旋转&缩放切换

/// 自定义页面切换动画 - 旋转+缩放切换
class RotationScalePageRouteBuilder extends PageRouteBuilder {
  // 跳转的页面
  final Widget widget;

  RotationScalePageRouteBuilder(this.widget) :super(
      transitionDuration: Duration(seconds: 1),
      pageBuilder: (BuildContext context, Animation animation,
          Animation secondaryAnimation) {
        return widget;
      },
      transitionsBuilder: (BuildContext context, Animation animation,
          Animation secondaryAnimation, Widget child) {
        return RotationTransition(
          turns: Tween(begin: 0.0, end: 1.0)
              .animate(
              CurvedAnimation(parent: animation, curve: Curves.fastOutSlowIn)),
          child: ScaleTransition(scale: Tween(begin: 0.0, end: 1.0)
              .animate(
            CurvedAnimation(parent: animation, curve: Curves.fastOutSlowIn),),
            child: child,),
        );
      }
  );
}
``
## 平移切换
```dart
/// 自定义页面切换动画 - 平移切换
class SlidePageRouteBuilder extends PageRouteBuilder {
  // 跳转的页面
  final Widget widget;

  SlidePageRouteBuilder(this.widget) :super(
      transitionDuration: Duration(seconds: 1),
      pageBuilder: (BuildContext context, Animation animation,
          Animation secondaryAnimation) {
        return widget;
      },
      transitionsBuilder: (BuildContext context, Animation animation,
          Animation secondaryAnimation, Widget child) {
        return SlideTransition(
          position: Tween(
              begin: Offset(-1.0, 0.0), end: Offset(0.0, 0.0))
              .animate(
              CurvedAnimation(parent: animation, curve: Curves.fastOutSlowIn)),
          child: child,);
      }
  );
}