flutter页面切换动画

首先介绍流程1.在components文件夹中建立一个cartoon.dart2.使用案例，在个人中心头像有个点击跳转页面功能(导入cartoon.dart动画组件，导入你要跳转dart页面)关键代码：Navigator.push(context, CustomRouteSlide(DetailPage()));CustomRouteSlide是动画效果就是cartoon.dart文件中定义的cl

吃柠檬的猫

2807人浏览 · 2020-05-22 14:34:40

吃柠檬的猫 · 2020-05-22 14:34:40 发布

动画曲线
首先介绍流程
1.在components文件夹中建立一个cartoon.dart
在这里插入图片描述
2.使用案例，在个人中心头像有个点击跳转页面功能(导入cartoon.dart动画组件，导入你要跳转dart页面)
关键代码：Navigator.push(context, CustomRouteSlide(DetailPage()));
CustomRouteSlide是动画效果就是cartoon.dart文件中定义的class，自己选择用哪个
DetailPage()就是你跳转的dart页面, 在这里插入图片描述
3.cartoon.dart代码

import 'package:flutter/material.dart';

//淡入淡出
class CustomRouteJianBian extends PageRouteBuilder {
  final Widget widget;
  CustomRouteJianBian(this.widget)
      : super(
            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: 2.0).animate(CurvedAnimation(
                    parent: animation1, curve: Curves.fastOutSlowIn)),
                child: child,
              );
            });
}

//缩放
class CustomRouteZoom extends PageRouteBuilder {
  final Widget widget;
  CustomRouteZoom(this.widget)
      : super(
            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 ScaleTransition(
                  scale: Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation(
                      parent: animation1, curve: Curves.fastOutSlowIn)),
                  child: child);
            });
}

//旋转+缩放效果
class CustomRouteRotateZoom extends PageRouteBuilder {
  final Widget widget;
  CustomRouteRotateZoom(this.widget)
      : super(
            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 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,
                  ));
            });
}

//滑动效果
class CustomRouteSlide extends PageRouteBuilder {
  final Widget widget;

  CustomRouteSlide(this.widget)
      : super(
            transitionDuration: const Duration(milliseconds: 500),
            pageBuilder: (BuildContext context, Animation<double> animation1,
                Animation<double> animation2) {
              return widget;
            },
            transitionsBuilder: (BuildContext context,
                Animation<double> animation1,
                Animation<double> animation2,
                Widget child) {
              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,
              );
            });
}