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

最新推荐文章于 2024-04-11 23:02:22 发布

2024spring

最新推荐文章于 2024-04-11 23:02:22 发布

阅读量792

点赞数 17

分类专栏：程序员学习文章标签： flutter

本文链接：https://blog.csdn.net/2401_83620959/article/details/136861020

版权

本文详细介绍了Flutter中几种页面路由过渡动画的实现，包括缩放、旋转、大小和渐变过渡。通过示例代码展示了如何创建这些动画，并提到了更高级的堆栈过渡动画。此外，还分享了作者的个人经历和Android开发学习资源。

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

我们现在就可以像这样使用 SlideRightRoute ，代替了之前的 MaterialPageRoute。

Navigator.push(context, SlideRightRoute(page: Screen2()))

代码运行的效果是…

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

代码非常简单的对吧？你可以通过修改偏移量 offset 来改变滑动过渡的方向。

缩放过渡

缩放过渡会通过改变组件的大小来完成动画效果。你也可以通过修改 CurvedAnimation 的 curves 来改变动画。下面这个例子我使用的是 Curves.fastOutSlowIn。

import ‘package:flutter/material.dart’;

class ScaleRoute extends PageRouteBuilder {
final Widget page;
ScaleRoute({this.page})
: super(
pageBuilder: (
BuildContext context,
Animation animation,
Animation secondaryAnimation,
) =>
page,
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: child,
),
);
}