收藏不迷路 —— Flutter 转场动效大合集

前言

动画经常会用于场景切换，比如滑动，缩放，尺寸变化，为应对这样的场景转换需要，Flutter 提供了 Transition 系列的动画组件，可以让场景转换动画变得更加简单。本篇为你整理了常用的 Transition 组件的应用。

CupertinoFullscreenDialogTransition

名称显示是苹果风格的全屏对话转换动效，构造方法如下：

CupertinoFullscreenDialogTransition({
  Key? key,
  required Animation primaryRouteAnimation,
  required Animation secondaryRouteAnimation,
  required this.child,
  required bool linearTransition,
}) 

从源码可以看到实际上是基于 SlideTransition 实现的，其 build 方法定义如下，使用了两个 SlideTransition 实现了该动效。可以看成是实现了两个方向的移动，如果只移动一个方向的话，将secondaryRouteAnimation的动画值begin 和 end 设置为相同即可。

Widget build(BuildContext context) {
  assert(debugCheckHasDirectionalit