Flutter - 路由动画 PageRoute(2020.01

页面跳转动画是在开发中经常需要使用到的，根据经验撸了一个动画路由类： AnimationPageRoute.

BUG: 出事了，请暂停使用该路由！经验证发现该路由在页面切出去然后再返回，会导致ExitPage对象的类中的initState（原只会执行一次生命周期），didDependencesChanged重复执行多次！显然这不是我们要的效果！因为往往我们会在initState执行网络调用等一类的操作，如此以来就会导致页面多次调用网络请求等初始化操作
注意：文章最下方有一种另类解决方案！

使用事项：
1.exitPage 可忽略对象，如果不传，则只执行enterPage的动画；
2.exitPage 对象应该是指一个完整的Page页面，不可为某一个部件，否则动画会很怪异；

import 'package:flutter/material.dart';

enum AnimationType {
  /// 从右到左的滑动
  SlideRL,

  /// 从左到右的滑动
  SlideLR,

  /// 从上到下的滑动
  SlideTB,

  /// 从下到上的滑动
  SlideBT,

  /// 透明过渡
  Fade,
}

class AnimationPageRoute extends PageRouteBuilder {
  /// 进入的页面
  Widget enterPage;

  /// 退出的页面
  Widget exitPage;

  AnimationPageRoute({
    @required this.enterPage,
    this.exitPage,
    AnimationType animationType = AnimationType.SlideRL,
    Duration transitionDuration = const Duration(milliseconds: 300),
    bool opaque = true,
    bool barrierDismissible = false,
    Color barrierColor,
    String barrierLabel,
    bool maintainState = true,
  })  : assert(enterPage != null, '参数[enterPage]不能为空!'),
        super(
          transitionDuration: transitionDuration,
          pageBuilder: (BuildContext context, Animation<double> animation,
                  Animation<double> secondaryAnimation) =>
              enterPage,
          transitionsBuilder: (BuildContext context,
                  Animation<double> animation,
                  Animation<double> secondaryAnimation,
                  Widget child) =>
              _getAnimation(enterPage, exitPage, animation,
                  animationType: animationType),
          opaque: opaque,
          barrierColor: barrierColor,
          barrierLabel: barrierLabel,
          maintainState: maintainState,
        );

  static Widget _getAnimation(
      Widget enterPage, Widget exitPage, Animation<double> animation,
      {AnimationType animationType = AnimationType.SlideRL}) {
    List<Widget> _animationWidgets = <Widget>[];
    if (animationType == AnimationType.Fade) {
      _animationWidgets.addAll([
        if (exitPage != null)
          FadeTransition(
              opacity: Tween<double>(begin: 1, end: 0).animate(animation),
              child: exitPage),
        FadeTransition(
            opacity: Tween<double>(begin: 0, end: 1).animate(animation),
            child: enterPage)
      ]);
    } else {
      Offset oBegin, oEnd, iBegin, iEnd;
      if (animationType == AnimationType.SlideBT) {
        oBegin = Offset.zero;
        oEnd = Offset(0, -1);
        iBegin = Offset(0, 1);
        iEnd = Offset.zero;
      } else if (animationType == AnimationType.SlideTB) {
        oBegin = Offset.zero;
        oEnd = Offset(0, 1);
        iBegin = Offset(0, -1);
        iEnd = Offset.zero;
      } else if (animationType == AnimationType.SlideLR) {
        oBegin = Offset.zero;
        oEnd = Offset(1, 0);
        iBegin = Offset(-1, 0);
        iEnd = Offset.zero;
      } else {
        oBegin = Offset.zero;
        oEnd = Offset(-1, 0);
        iBegin = Offset(1, 0);
        iEnd = Offset.zero;
      }
      _animationWidgets.addAll([
        if (exitPage != null)
          SlideTransition(
              position:
                  Tween<Offset>(begin: oBegin, end: oEnd).animate(animation),
              child: exitPage),
        SlideTransition(
            position:
                Tween<Offset>(begin: iBegin, end: iEnd).animate(animation),
            child: enterPage)
      ]);
    }
    return Stack(children: _animationWidgets);
  }
}

一种另类的解决这种问题的方案

使用RenderPaintBoundary把当前页面图像绘制出来，然后设置它为exitPage，方法如下：

  final GlobalKey _repaintBoundaryKey = GlobalKey();

  Future<Image> getScreenImage() async {
    RenderRepaintBoundary renderRepaintBoundary =
        _repaintBoundaryKey.currentContext.findRenderObject();
    UI.Image image = await renderRepaintBoundary.toImage();
    return Image.memory((await image.toByteData(format: UI.ImageByteFormat.png))
        .buffer
        .asUint8List());
  }

 @override
  Widget build(BuildContext context) => RepaintBoundary(
      key: _repaintBoundaryKey,
      child: Scaffold(
          backgroundColor: const Color(0xfff5f5f5),
          appBar: _buildAppBar(),
          body: _buildContentView()));

优化之路，使用Mixin

import 'dart:ui' as Ui;

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:yunnan_season/core/route/animation_page_route.dart';

/// 使用[AnimationPageRoute]需要调用该Mixin
mixin AnimationPageProviderMixin {
  /// 绘制面板关联的GlobalKey对象
  final GlobalKey _repaintBoundaryKey = GlobalKey();

  /// 获取绘制面板中的图像
  Future<RawImage> getUiDrawingImage() async {
    if (_repaintBoundaryKey == null)
      throw Exception('错误：调用该方法前请使用[drawingPad]方法！');
    RenderRepaintBoundary renderBoundary =
        _repaintBoundaryKey.currentContext.findRenderObject();
    return RawImage(
        image: (await renderBoundary.toImage(
            pixelRatio: Ui.window.devicePixelRatio)),
        filterQuality: FilterQuality.high);
  }

  /// 绘画面板
  Widget drawingPad(Widget child) =>
      RepaintBoundary(key: _repaintBoundaryKey, child: child);

  /// 动画路由对象
  AnimationPageRoute<T> animationPageRoute<T>(
    Widget nextPage,
    Widget currentPage, {
    Duration duration = const Duration(milliseconds: 400),
    AnimationType type = AnimationType.SlideRL,
  }) =>
      AnimationPageRoute<T>(
          enterPage: nextPage,
          exitPage: currentPage,
          transitionDuration: duration,
          animationType: type);
}

使用实例：

  void _startWithDrawMainPage() async => Navigator.push(context,
      animationPageRoute(WithDrawMainPage(), (await getUiDrawingImage())));

  @override
  Widget build(BuildContext context) => drawingPad(Scaffold(
      backgroundColor: const Color(0xfff5f5f5),
      appBar: _buildAppBar(),
      body: _buildContentView()));

哈哈，暂时就这样，希望能帮到各位看客！

再次经过多方研究和求证，发现路由页面的切换动画加上CurvedAnimation会生动很多，而且还不会造成异常。因为以前方案都存在缺陷，甚至是报错。经过多次求证，有了如下代码：

简要说明：动画类似iOS的切换动画，ExitPage也具有离开时的动画(但以下代码暂且只提供SlideRL和SlideLR的动画）。更多效果，请研究CurvedAnimation。

// import 'dart:ui' as Ui;

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

final Tween<double> _tweenFade = Tween<double>(begin: 0, end: 1.0);

final Tween<Offset> _primaryTweenSlideFromBottomToTop =
    Tween<Offset>(begin: const Offset(0.0, 1.0), end: Offset.zero);

// final Tween<Offset> _secondaryTweenSlideFromBottomToTop =
//     Tween<Offset>(begin: Offset.zero, end: const Offset(0.0, -1.0));

final Tween<Offset> _primaryTweenSlideFromTopToBottom =
    Tween<Offset>(begin: const Offset(0.0, -1.0), end: Offset.zero);

// final Tween<Offset> _secondaryTweenSlideFromTopToBottom =
//     Tween<Offset>(begin: Offset.zero, end: const Offset(0.0, 1.0));

final Tween<Offset> _primaryTweenSlideFromRightToLeft =
    Tween<Offset>(begin: const Offset(1.0, 0.0), end: Offset.zero);

final Tween<Offset> _secondaryTweenSlideFromRightToLeft =
    Tween<Offset>(begin: Offset.zero, end: const Offset(-1.0, 0.0));

final Tween<Offset> _primaryTweenSlideFromLeftToRight =
    Tween<Offset>(begin: const Offset(-1.0, 0.0), end: Offset.zero);

final Tween<Offset> _secondaryTweenSlideFromLeftToRight =
    Tween<Offset>(begin: Offset.zero, end: const Offset(1.0, 0.0));

/// 动画类型枚举，`SlideRL`,`SlideLR`,`SlideTB`, `SlideBT`, `Fade`
enum AnimationType {
  /// 从右到左的滑动
  SlideRL,

  /// 从左到右的滑动
  SlideLR,

  /// 从上到下的滑动
  SlideTB,

  /// 从下到上的滑动
  SlideBT,

  /// 透明过渡
  Fade,
}

class AnimationPageRoute<T> extends PageRoute<T> {
  AnimationPageRoute({
    @required this.builder,
    this.isExitPageAffectedOrNot = true,
    this.animationType = AnimationType.SlideRL,
    RouteSettings settings,
    this.maintainState = true,
    bool fullscreenDialog = false,
  })  : assert(builder != null),
        assert(isExitPageAffectedOrNot != null),
        assert(animationType != null),
        assert(maintainState != null),
        assert(fullscreenDialog != null),
        assert(opaque),
        super(settings: settings, fullscreenDialog: fullscreenDialog);

  final WidgetBuilder builder;

  /// 该参数只针对当[AnimationType]为[SlideLR]或[SlideRL]新页面及当前页面动画均有效
  final bool isExitPageAffectedOrNot;

  final AnimationType animationType;

  @override
  final bool maintainState;

  @override
  Duration get transitionDuration => const Duration(milliseconds: 1000);

  @override
  Color get barrierColor => null;

  @override
  String get barrierLabel => null;

  @override
  bool canTransitionTo(TransitionRoute<dynamic> nextRoute) =>
      nextRoute is AnimationPageRoute && !nextRoute.fullscreenDialog;

  @override
  Widget buildPage(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation) {
    final Widget result = builder(context);
    assert(() {
      if (result == null) {
        throw FlutterError.fromParts(<DiagnosticsNode>[
          ErrorSummary(
              'The builder for route "${settings.name}" returned null.'),
          ErrorDescription('Route builders must never return null.')
        ]);
      }
      return true;
    }());
    return Semantics(
        scopesRoute: true, explicitChildNodes: true, child: result);
  }

  @override
  Widget buildTransitions(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation, Widget child) {
    if (animationType == AnimationType.Fade)
      FadeTransition(
          opacity: CurvedAnimation(
            parent: animation,
            curve: Curves.linearToEaseOut,
            reverseCurve: Curves.easeInToLinear,
          ).drive(_tweenFade),
          child: child);
    final TextDirection textDirection = Directionality.of(context);
    Tween<Offset> primaryTween = _primaryTweenSlideFromRightToLeft,
        secondTween = _secondaryTweenSlideFromRightToLeft;
    Cubic curve = Curves.linearToEaseOut, reverseCurve = Curves.easeInToLinear;
    if (animationType == AnimationType.SlideBT) {
      primaryTween = _primaryTweenSlideFromBottomToTop;
    } else if (animationType == AnimationType.SlideTB) {
      primaryTween = _primaryTweenSlideFromTopToBottom;
    } else if (animationType == AnimationType.SlideLR) {
      primaryTween = _primaryTweenSlideFromLeftToRight;
      secondTween = _secondaryTweenSlideFromLeftToRight;
      curve = Curves.fastOutSlowIn;
      reverseCurve = Curves.easeOutCubic;
    }
    Widget enterAnimWidget = SlideTransition(
        position: CurvedAnimation(
          parent: animation,
          curve: curve,
          reverseCurve: reverseCurve,
        ).drive(primaryTween),
        textDirection: textDirection,
        child: child);
    if (isExitPageAffectedOrNot != true ||
        ([AnimationType.SlideTB, AnimationType.SlideBT]
            .contains(animationType))) return enterAnimWidget;
    return SlideTransition(
        position: CurvedAnimation(
          parent: secondaryAnimation,
          curve: curve,
          reverseCurve: reverseCurve,
        ).drive(secondTween),
        textDirection: textDirection,
        child: enterAnimWidget);
  }

  @override
  String get debugLabel => '${super.debugLabel}(${settings.name})';
}