页面跳转切换动画

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app_demo/pages/Route/route_page2.dart';

import 'FadeRoute.dart';
import 'ScaleRoute.dart';
import 'SizeRoute.dart';
import 'SlideRoute.dart';

/// @description 作用:
/// @date: 2021/6/28
/// @author:lrs
class RoutePage1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("跳转切换"),
      ),
      body: Padding(
        padding: EdgeInsets.all(20),
        child: Column(
          children: [
            RaisedButton(
              onPressed: () {
                //使用PageRouteBuilder跳转
                // Navigator.push(
                //     context,
                //     PageRouteBuilder(
                //         transitionDuration: Duration(milliseconds: 500),
                //         pageBuilder: (BuildContext context, Animation animation,
                //             Animation secondaryAnimation) {
                //           return new FadeTransition(
                //             opacity: animation,
                //             child: RoutePage2(),
                //           );
                //         }));
                //封装跳转
                Navigator.push(context, FadeRoute(builder: (context) {
                  return RoutePage2();
                }));
              },
              child: Text("Fade跳转"),
            ),
            RaisedButton(
              onPressed: () {
                //使用PageRouteBuilder跳转
                // Navigator.push(
                //     context,
                //     PageRouteBuilder(
                //         transitionDuration: Duration(milliseconds: 500),
                //         pageBuilder: (BuildContext context, Animation animation,
                //             Animation secondaryAnimation) {
                //           return new FadeTransition(
                //             opacity: animation,
                //             child: RoutePage2(),
                //           );
                //         }));
                //封装跳转
                Navigator.push(context, ScaleRoute(builder: (context) {
                  return RoutePage2();
                }));
              },
              child: Text("Scale跳转"),
            ),
            RaisedButton(
              onPressed: () {
                //使用PageRouteBuilder跳转
                // Navigator.push(
                //     context,
                //     PageRouteBuilder(
                //         transitionDuration: Duration(milliseconds: 500),
                //         pageBuilder: (BuildContext context, Animation animation,
                //             Animation secondaryAnimation) {
                //           return new FadeTransition(
                //             opacity: animation,
                //             child: RoutePage2(),
                //           );
                //         }));
                //封装跳转
                Navigator.push(context, SizeRoute(builder: (context) {
                  return RoutePage2();
                }));
              },
              child: Text("Size跳转"),
            ),
            RaisedButton(
              onPressed: () {
                //使用PageRouteBuilder跳转
                // Navigator.push(
                //     context,
                //     PageRouteBuilder(
                //         transitionDuration: Duration(milliseconds: 500),
                //         pageBuilder: (BuildContext context, Animation animation,
                //             Animation secondaryAnimation) {
                //           return new FadeTransition(
                //             opacity: animation,
                //             child: RoutePage2(),
                //           );
                //         }));
                //封装跳转
                Navigator.push(context, RotationRoute(builder: (context) {
                  return RoutePage2();
                }));
              },
              child: Text("Rotation跳转"),
            )
          ],
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';

/// @description 作用:
/// @date: 2021/6/28
/// @author:
class RoutePage2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("页面2"),
      ),
      body: Center(
        child: Text("页面2"),
      ),
    );
  }
}

import 'package:flutter/widgets.dart';

class FadeRoute extends PageRoute {
  FadeRoute({
    @required this.builder,
    this.transitionDuration = const Duration(milliseconds: 300),
    this.opaque = true,
    this.barrierDismissible = false,
    this.barrierColor,
    this.barrierLabel,
    this.maintainState = true,
  });

  final WidgetBuilder builder;
  @override
  final Duration transitionDuration;

  @override
  final bool opaque;

  @override
  final bool barrierDismissible;

  @override
  final Color barrierColor;

  @override
  final String barrierLabel;

  @override
  final bool maintainState;

  @override
  Widget buildPage(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation) {
    return builder(context);
  }

  @override
  Widget buildTransitions(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation, Widget child) {
    return FadeTransition(
      opacity: animation,
      child: builder(context),
    );
  }
}

import 'package:flutter/widgets.dart';

class ScaleRoute extends PageRoute {
  ScaleRoute({
    @required this.builder,
    this.transitionDuration = const Duration(milliseconds: 300),
    this.opaque = true,
    this.barrierDismissible = false,
    this.barrierColor,
    this.barrierLabel,
    this.maintainState = true,
  });

  final WidgetBuilder builder;
  @override
  final Duration transitionDuration;

  @override
  final bool opaque;

  @override
  final bool barrierDismissible;

  @override
  final Color barrierColor;

  @override
  final String barrierLabel;

  @override
  final bool maintainState;

  @override
  Widget buildPage(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation) {
    return builder(context);
  }

  @override
  Widget buildTransitions(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation, Widget child) {

    return ScaleTransition(
      scale: animation,
      child: builder(context),
    );
  }
}

import 'package:flutter/widgets.dart';

class SizeRoute extends PageRoute {
  SizeRoute({
    @required this.builder,
    this.transitionDuration = const Duration(milliseconds: 300),
    this.opaque = true,
    this.barrierDismissible = false,
    this.barrierColor,
    this.barrierLabel,
    this.maintainState = true,
  });

  final WidgetBuilder builder;
  @override
  final Duration transitionDuration;

  @override
  final bool opaque;

  @override
  final bool barrierDismissible;

  @override
  final Color barrierColor;

  @override
  final String barrierLabel;

  @override
  final bool maintainState;

  @override
  Widget buildPage(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation) {
    return builder(context);
  }

  @override
  Widget buildTransitions(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation, Widget child) {
    return SizeTransition(
      sizeFactor: animation,
      child: builder(context),
    );
  }
}

import 'package:flutter/widgets.dart';

class RotationRoute extends PageRoute {
  RotationRoute({
    @required this.builder,
    this.transitionDuration = const Duration(milliseconds: 300),
    this.opaque = true,
    this.barrierDismissible = false,
    this.barrierColor,
    this.barrierLabel,
    this.maintainState = true,
  });

  final WidgetBuilder builder;
  @override
  final Duration transitionDuration;

  @override
  final bool opaque;

  @override
  final bool barrierDismissible;

  @override
  final Color barrierColor;

  @override
  final String barrierLabel;

  @override
  final bool maintainState;

  @override
  Widget buildPage(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation) {
    return builder(context);
  }

  @override
  Widget buildTransitions(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation, Widget child) {
    return RotationTransition(
      turns: animation,
      child: builder(context),
    );
  }
}

image.png

apk下载地址

https://www.pgyer.com/IUVS