[译] 关于 Flutter 页面路由过渡动画，你所需要知道的一切(1)

本文链接：https://blog.csdn.net/2401_84121897/article/details/137573272

本文介绍了Flutter中的各种页面路由过渡动画，如RotationRoute、SizeRoute、FadeRoute以及如何组合使用Stack、EnterExitRoute和ScaleRotateRoute创建复杂动画效果。作者还分享了如何在页面进出时应用堆栈过渡动画，以及如何结合缩放和旋转。

摘要由CSDN通过智能技术生成

);
}

代码运行的效果是…

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

旋转过渡

旋转过渡会以转动作为组件的动画。你也可以为你的 PageRouteBuilder 加入 transitionDuration。

import ‘package:flutter/material.dart’;

class RotationRoute extends PageRouteBuilder {
final Widget page;
RotationRoute({this.page})
: super(
pageBuilder: (
BuildContext context,
Animation animation,
Animation secondaryAnimation,
) =>
page,
transitionDuration: Duration(seconds: 1),
transitionsBuilder: (
BuildContext context,
Animation animation,
Animation secondaryAnimation,
Widget child,
) =>
RotationTransition(
turns: Tween(
begin: 0.0,
end: 1.0,
).animate(
CurvedAnimation(
parent: animation,
curve: Curves.linear,
),
),
child: child,
),
);
}

代码运行的效果是…

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

大小过渡

import ‘package:flutter/material.dart’;

class SizeRoute extends PageRouteBuilder {
final Widget page;
SizeRoute({this.page})
: super(
pageBuilder: (
BuildContext context,
Animation animation,
Animation secondaryAnimation,
) =>
page,
transitionsBuilder: (
BuildContext context,
Animation animation,
Animation secondaryAnimation,
Widget child,
) =>
Align(
child: SizeTransition(
sizeFactor: animation,
child: child,
),
),
);
}

代码运行的效果是…

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

渐变过渡

import ‘package:flutter/material.dart’;

class FadeRoute extends PageRouteBuilder {
final Widget page;
FadeRoute({this.page})
: super(
pageBuilder: (
BuildContext context,
Animation animation,
Animation secondaryAnimation,
) =>
page,
transitionsBuilder: (
BuildContext context,
Animation animation,
Animation secondaryAnimation,
Widget child,
) =>
FadeTransition(
opacity: animation,
child: child,
),
);
}

代码运行的效果是…

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

棒棒哒！！ 现在我们学习过了所有基础的过渡效果。

现在我们来实践一些更高级的。如果在进入页面和离开页面这两个路由跳转的时候都想要动画该怎么做呢？我们可以使用堆栈过渡动画（stack transition animations），并应用于这两个路由跳转上。一个例子就是滑入新页面，然后划出旧页面。这是我最喜欢的过渡动画了 ❤️。我们来看看代码是如何实现的。

import ‘package:flutter/material.dart’;

class EnterExitRoute extends PageRouteBuilder {
final Widget enterPage;
final Widget exitPage;
EnterExitRoute({this.exitPage, this.enterPage})
: super(
pageBuilder: (
BuildContext context,
Animation animation,
Animation secondaryAnimation,
) =>
enterPage,
transitionsBuilder: (
BuildContext context,
Animation animation,
Animation secondaryAnimation,
Widget child,
) =>
Stack(
children: [
SlideTransition(
position: new Tween(
begin: const Offset(0.0, 0.0),
end: const Offset(-1.0, 0.0),
).animate(animation),
child: exitPage,
),
SlideTransition(
position: new Tween(
begin: const Offset(1.0, 0.0),
end: Offset.zero,
).animate(animation),
child: enterPage,
)
],
),
);
}

然后如下这样来使用 EnterExitRoute：

Navigator.push(context,
EnterExitRoute(exitPage: this, enterPage: Screen2()))

代码运行的效果是…

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

我们也可以将多个过渡效果结合在一起，创建出很多神奇的效果，比如同时应用缩放和旋转。首先，创建 ScaleTransition，它的 child 属性包括了 RotationTransition，而 RotationTransition 的 child 属性则是要显示动画的页面。

import ‘package:flutter/material.dart’;

class ScaleRotateRoute extends PageRouteBuilder {
final Widget page;
ScaleRotateRoute({this.page})
: super(
pageBuilder: (
BuildContext context,
Animation animation,
Animation secondaryAnimation,
) =>
page,
transitionDuration: Duration(seconds: 1),
transitionsBuilder: (
BuildContext context,
Animation animation,
Animation secondaryAnimation,
Widget child,
) =>
ScaleTransition(
scale: Tween(
begin: 0.0,
end: 1.0,
).animate(
CurvedAnimation(
parent: animation,
curve: Curves.fastOutSlowIn,
),
),
child: RotationTransition(
turns: Tween(
begin: 0.0,
end: 1.0,
).animate(
CurvedAnimation(
parent: animation,
curve: Curves.linear,
),
),
child: child,
),
),
);
}