給你的Flutter頁面跳轉加上動畫

CoorChice發表於2019-04-06
Flutter動畫

目錄傳送門：《Flutter快速上手指南》先導篇

頁面轉場動畫對於一個成熟的應用來說，是十分重要的。

Flutter 提供了很便捷的方式實現頁面轉場動畫。

通常，在頁面跳轉的時候會使用 Flutter 提供的 MaterialPageRoute，它提供了預設的頁面跳轉動畫。

當然，我們也可以定義自己的頁面跳轉動畫。

1. 使用 PageRouteBuilder

使用 PageRouteBuilder，可以快速的自定義一個頁面跳轉動畫。

Navigator.push(context, PageRouteBuilder(pageBuilder:
                      (BuildContext context, Animation animation,
                          Animation secondaryAnimation) {
                    return ScaleTransition(
                        scale: animation,
                        alignment: Alignment.bottomRight,
                        child: AnimPage());
複製程式碼

2.繼承 PageRoute

通過繼承 PageRoute，也可以自定義頁面跳轉動畫。

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

  final WidgetBuilder pageBuilder;

  @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) => pageBuilder(context);

  @override
  Widget buildTransitions(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation, Widget child) {
    return FadeTransition(
      opacity: animation,
      child: pageBuilder(context),
    );
  }
}
複製程式碼

關鍵就是實現 buildPage() 和 buildTransitions() 兩個函式。

在 buildTransitions() 中新增轉場 Widget 。

使用：

Navigator.push(context, FadeRoute(builder: (context) {
  return AnimPage();
}));
複製程式碼

定義起來不是很方便，但是便於封裝統一的轉場動畫。

目錄傳送門：《Flutter快速上手指南》先導篇

如何找到我？

傳送門：CoorChice 的主頁

傳送門：CoorChice 的 Github


相關文章