Flutter学习之转场动画

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第21天，点击查看活动详情

本文主要介绍下flutter中转场动画的三方使用

我这里学习下三方的转场动画 page_animation_transition

提供了一些模式，一起学习下吧。我们首先在pubspec.yaml中添加

page_animation_transition: ^0.0.9

1. 转场类型

下面是该库支持的一些类型，我们有下面这些类型

bottomToTop

topToBottom

leftToRight

rightToLeft

fadeAnimation

scaleAnimation

rotateAnimation

topToBottomFaded

bottomToTopFaded

leftToRightFaded

rightToLeftFaded

顾名思义:

底部到顶部

从上到下

左到右

右到左

淡入淡出动画

缩放动画

旋转动画

上到下渐变

下到上渐变

从左到右褪色

从右到左褪色

2. 使用

假设您正在从 PageOne 过渡到 PageTwo

Navigator.of(context).push(PageAnimationTransition(page: const PageTwo(), pageAnimationType: BottomToTopTransition()));

Navigator.of(context).push(PageAnimationTransition(page: const PageTwo(), pageAnimationType: TopToBottomTransition()));

Navigator.of(context).push(PageAnimationTransition(page: const PageTwo(), pageAnimationType: RightToLeftTransition()));

Navigator.of(context).push(PageAnimationTransition(page: const PageTwo(), pageAnimationType: LeftToRightTransition()));

Navigator.of(context).push(PageAnimationTransition(page: const PageTwo(), pageAnimationType: FadeAnimationTransition()));

Navigator.of(context).push(PageAnimationTransition(page: const PageTwo(), pageAnimationType: ScaleAnimationTransition()));

Navigator.of(context).push(PageAnimationTransition(page: const PageTwo(), pageAnimationType: RotationAnimationTransition()));

Navigator.of(context).push(PageAnimationTransition(page: const PageTwo(), pageAnimationType: TopToBottomFadedTransition()));

Navigator.of(context).push(PageAnimationTransition(page: const PageTwo(), pageAnimationType: BottomToTopFadedTransition()));

Navigator.of(context).push(PageAnimationTransition(page: const PageTwo(), pageAnimationType: RightToLeftFadedTransition()));

Navigator.of(context).push(PageAnimationTransition(page: const PageTwo(), pageAnimationType: LeftToRightFadedTransition()));

我们看下这个PageAnimationTransition这个类

class PageAnimationTransition extends PageRouteBuilder {
  final Widget page;
  final PageAnimationInterface pageAnimationType;
  PageAnimationTransition({required this.page, required this.pageAnimationType})
      : super(
            pageBuilder: (
          BuildContext context,
          Animation<double> animation,
          Animation<double> secondaryAnimation,
        ) =>
                page);

  @override
  Widget buildTransitions(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation, Widget child) {
    return pageAnimationType.animate(
        context, animation, secondaryAnimation, child);
  }
}

这个类是继承我们PageRouteBuilder

跳转的时候会有动画设置，因此我们进行拓展，这里以BottomToTopTransition为例

设置了我们想要的动画效果。

我们可以预定义路由的用法

onGenerateRoute: (settings) {
    switch (settings.name) {
      case '/pageTwo':
        return PageAnimationTransition(child: PageTwo(), pageAnimationType: LeftToRightFadedTransition());
        break;
      default:
        return null;
    }
  }

在此之后，新路由可以像这样使用：

Navigator.pushNamed(context, '/pageTwo');

看下展示效果

基本满足了我们大多数的效果，同时对系统动画效果的拓展，支持性也是比较好。

3. 小结

转场动画对于没有要求的，我们使用系统自带的即可。对于想要炫酷的效果，我们可以使用三方的或者自己根据实际需要进行拓展。