动画化页面路由过渡
设计语言(例如 Material)定义了路由(或屏幕)之间过渡的标准行为。然而,有时自定义的屏幕间过渡可以让应用更加独特。为此,PageRouteBuilder
提供了一个 Animation
对象。这个 Animation
可以与 Tween
和 Curve
对象一起使用,以自定义过渡动画。本示例展示了如何通过将新路由从屏幕底部动画进入视图来在路由之间进行过渡。
要创建自定义页面路由过渡,本示例使用了以下步骤:
- 设置 PageRouteBuilder
- 创建
Tween
- 添加
AnimatedWidget
- 使用
CurveTween
- 组合两个
Tween
1. 设置 PageRouteBuilder
#首先,使用 PageRouteBuilder
创建一个 Route
。PageRouteBuilder
有两个回调:一个用于构建路由的内容 (pageBuilder
),另一个用于构建路由的过渡 (transitionsBuilder
)。
以下示例创建了两个路由:一个带有“Go!”按钮的主页路由,以及一个名为“Page 2”的第二个路由。
import 'package:flutter/material.dart';
void main() {
runApp(const MaterialApp(home: Page1()));
}
class Page1 extends StatelessWidget {
const Page1({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.of(context).push(_createRoute());
},
child: const Text('Go!'),
),
),
);
}
}
Route _createRoute() {
return PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) => const Page2(),
transitionsBuilder: (context, animation, secondaryAnimation, child) {
return child;
},
);
}
class Page2 extends StatelessWidget {
const Page2({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: const Center(child: Text('Page 2')),
);
}
}
2. 创建 Tween
#为了让新页面从底部动画进入,它应该从 Offset(0,1)
动画到 Offset(0, 0)
(通常使用 Offset.zero
构造函数定义)。在这种情况下,Offset 是 'FractionalTranslation' 组件的 2D 向量。将 dy
参数设置为 1 表示垂直平移一个完整的页面高度。
transitionsBuilder
回调有一个 animation
参数。它是一个生成 0 到 1 之间值的 Animation<double>
。使用 Tween 将 Animation<double>
转换为 Animation<Offset>
transitionsBuilder: (context, animation, secondaryAnimation, child) {
const begin = Offset(0.0, 1.0);
const end = Offset.zero;
final tween = Tween(begin: begin, end: end);
final offsetAnimation = animation.drive(tween);
return child;
},
3. 使用 AnimatedWidget
#Flutter 有一组扩展 AnimatedWidget
的组件,它们会在动画值改变时重新构建自身。例如,SlideTransition 接收一个 Animation<Offset>
,并在动画值改变时平移其子组件(使用 FractionalTranslation 组件)。
AnimatedWidget 返回一个带有 Animation<Offset>
和子组件的 SlideTransition
transitionsBuilder: (context, animation, secondaryAnimation, child) {
const begin = Offset(0.0, 1.0);
const end = Offset.zero;
final tween = Tween(begin: begin, end: end);
final offsetAnimation = animation.drive(tween);
return SlideTransition(position: offsetAnimation, child: child);
},
4. 使用 CurveTween
#Flutter 提供了一系列缓动曲线,用于调整动画随时间变化的速率。Curves
类提供了一组预定义的常用曲线。例如,Curves.easeOut
使动画快速开始并缓慢结束。
要使用 Curve,请创建一个新的 CurveTween
并为其传递一个 Curve
var curve = Curves.ease;
var curveTween = CurveTween(curve: curve);
这个新的 Tween 仍然生成 0 到 1 之间的值。在下一步中,它将与第 2 步中的 Tween<Offset>
组合。
5. 组合两个 Tween
#要组合这些 Tween,请使用 chain()
const begin = Offset(0.0, 1.0);
const end = Offset.zero;
const curve = Curves.ease;
var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
然后通过将其传递给 animation.drive()
来使用这个 Tween。这会创建一个新的 Animation<Offset>
,可以将其提供给 SlideTransition
组件。
return SlideTransition(position: animation.drive(tween), child: child);
这个新的 Tween(或 Animatable)首先评估 CurveTween
,然后评估 Tween<Offset>
来生成 Offset
值。当动画运行时,值的计算顺序如下:
- 动画(提供给 transitionsBuilder 回调)产生 0 到 1 之间的值。
- CurveTween 根据其曲线将这些值映射到 0 到 1 之间的新值。
Tween<Offset>
将double
值映射到Offset
值。
另一种使用缓动曲线创建 Animation<Offset>
的方法是使用 CurvedAnimation
transitionsBuilder: (context, animation, secondaryAnimation, child) {
const begin = Offset(0.0, 1.0);
const end = Offset.zero;
const curve = Curves.ease;
final tween = Tween(begin: begin, end: end);
final curvedAnimation = CurvedAnimation(parent: animation, curve: curve);
return SlideTransition(
position: tween.animate(curvedAnimation),
child: child,
);
}
互动示例
#import 'package:flutter/material.dart';
void main() {
runApp(const MaterialApp(home: Page1()));
}
class Page1 extends StatelessWidget {
const Page1({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.of(context).push(_createRoute());
},
child: const Text('Go!'),
),
),
);
}
}
Route _createRoute() {
return PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) => const Page2(),
transitionsBuilder: (context, animation, secondaryAnimation, child) {
const begin = Offset(0.0, 1.0);
const end = Offset.zero;
const curve = Curves.ease;
var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
return SlideTransition(position: animation.drive(tween), child: child);
},
);
}
class Page2 extends StatelessWidget {
const Page2({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: const Center(child: Text('Page 2')),
);
}
}