flutter-路由跳转动画效果（渐隐渐现，缩放效果，旋转缩放）

1.渐隐渐现过渡效果

自定义CustomRoute Widget

新建一个custom_router.dart文件，这个就是要自定义的路由方法，自定义首先要继承于通用的路由的构造器类PageRouterBuilder。继承之后重写父类的CustomRoute构造方法。

构造方法可以简单理解为：只要以调用这个类或者说是Widget，构造方法里的所有代码就执行了。

import 'package:flutter/material.dart';


//自定义的路由方法
class CustomRoute extends PageRouteBuilder{

  final Widget widget;

  //重写构造方法（一调用该方法就执行的方法 就叫构造方法）
  CustomRoute(this.widget)
    :super( //父类的方法
      //设置动画持续的时间，建议再1和2之间
      transitionDuration:const Duration(seconds: 1),
      //页面的构造器
      pageBuilder:(
        BuildContext context,
        Animation<double> animation1,
        Animation<double> animation2,
      ){
        return widget;
      },
      //过度效果
      transitionsBuilder:(
        BuildContext  context,
        Animation<double> animation1,
        Animation<double> animation2,
        Widget child
      ){
        // 过度的动画的值
        return FadeTransition(
          // 过度的透明的效果 
          opacity: Tween(begin: 0.0,end: 1.0)
            // 给他个透明度的动画   CurvedAnimation：设置动画曲线
            .animate(CurvedAnimation(
              //父级动画
              parent: animation1,
              //动画曲线
              curve: Curves.ease
            )),
          child: child,
        );
  });
}


//使用

import 'custom_router.dart';

Navigator.push(context, CustomRoute(SecondPage()));

FadeTransition:渐隐渐现过渡效果，主要设置opactiy（透明度）属性，值是0.0-1.0。

animate :动画的样式，一般使用动画曲线组件（CurvedAnimation）。
curve: 设置动画的节奏，也就是常说的曲线，Flutter准备了很多节奏，通过改变动画取消可以做出很多不同的效果。
transitionDuration：设置动画持续的时间，建议再1和2之间。

2.缩放效果

//缩放的动画效果
        return ScaleTransition(
          scale: Tween(begin: 0.0,end: 1.0)
            .animate(CurvedAnimation(
              parent: animation1,
              //快出慢进
              curve: Curves.fastOutSlowIn
            )),
            child: child,
        );

3.旋转+缩放效果

//旋转+缩放效果
        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,
            ),
        );

4.左右切换滑动

//左右滑动切换
        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.push(
              context,
              PageRouteBuilder(
                transitionDuration: Duration(milliseconds: 500), //动画时间为500毫秒
                pageBuilder: (BuildContext context, Animation animation,
                    Animation secondaryAnimation) {
                      return ScaleTransition(
                        scale: Tween(begin: 0.0,end: 1.0)
                          .animate(CurvedAnimation(
                            parent:animation,
                            curve:Curves.fastOutSlowIn
                          )),
                        child: SecondPage(),
                      );
                },
              ),
            );

flutter-路由跳转动画效果（渐隐渐现，缩放效果，旋转缩放）

自定义CustomRoute Widget

相关推荐