ScaleTransition(
scale: Tween(
begin: 0.0,
end: 1.0,
).animate(
CurvedAnimation(
parent: animation,
curve: Curves.fastOutSlowIn,
),
),
child: child,
),
);
}
代码运行的效果是…
旋转过渡
旋转过渡会以转动作为组件的动画。你也可以为你的 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,
),
),
);
}
代码运行的效果是…
棒极了!这些就是关于 Flutter 页面路由过渡动画,你所需要知道的一切。亲自试着将不同的过渡效果结合起来,创造出一些很棒的动画吧,并且别忘了和我分享你的成果。所有代码的源码可见:GitHub 仓库。
最后
由于题目很多整理答案的工作量太大,所以仅限于提供知识点,详细的很多问题和参考答案我都整理成了 PDF文件
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》,点击传送门,即可获取!
于提供知识点,详细的很多问题和参考答案我都整理成了 PDF文件
[外链图片转存中…(img-rANEoX9S-1715015852461)]
[外链图片转存中…(img-vm4CuCRX-1715015852462)]
[外链图片转存中…(img-4grnzx7c-1715015852463)]
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》,点击传送门,即可获取!