Flutter 自定义路由动画案例

最新推荐文章于 2024-04-21 16:21:18 发布
最新推荐文章于 2024-04-21 16:21:18 发布
阅读量383 收藏
点赞数
分类专栏： flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xq610928/article/details/108945548
版权
本文介绍了如何在Flutter中创建自定义路由动画，包括渐变、缩放、旋转加缩放以及左右滑动的路由动画效果。通过自定义PageRouteBuilder并结合FadeTransition、ScaleTransition、RotationTransition和SlideTransition等动画组件，详细讲解了实现这些动画的步骤和代码示例。最后，提供了项目源码地址和QQ交流群信息。
摘要由CSDN通过智能技术生成

前言：

各位同学大家好，最近国庆放假期间因为没有回老家过节（没买到车票啊）就写了一些flutter小案例就分享给大家 （Flutter 自定义路由动画案例）,那么废话不多说我们正式开始

准备工作

需要安装flutter的开发环境：大家可以去看看之前的教程：
1 win系统flutter开发环境安装教程: https://www.jianshu.com/p/152447bc8718
2 mac系统flutter开发环境安装教程：https://www.jianshu.com/p/bad2c35b41e3

效果图：

渐变.gif
缩放.gif

了解本专栏 订阅专栏 解锁全文 超级会员免费看
xq9527--
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
dy_flutter:斗鱼直播APP 多元化Flutter开源项目。涵盖礼物特效、手势动画、弹幕池、抽奖、鱼吧等（另提供服务端Mock接口）
05-02
尽可能接入更多功能，方法附带注释，帮助你在使用flutter进行开发新的应用提供实用的借鉴案例 APP截图： 包含功能： 启动页广告位 开播列表上拉加载、下拉刷新、返回顶部 列表图片缓存加载优化 渐进式头部动画 底部...
Flutter之自定义路由切换动画
weixin_43740011的博客
06-21 2465
Flutter提供了PageRouteBuilder类来自定义路由切换动画。我们可以继承PageRouteBuilder类，并重写其中的buildTransitions方法和buildPage方法来实现自己的路由切换动画。: super(},// 自定义路由动画});在上面的代码中，我们定义了一个CustomPageRoute类，它继承自PageRouteBuilder类。其中的widget参数表示我们要跳转的页面。transitionDuration：表示路由切换动画的持续时间。
Flutter路由动画
JUSTIN的博客
10-03 783
在常规app开发中，肯定避免不了自定义路由动画，那么我们怎么给flutter定义路由动画呢。相信大家在谷歌搜索会出现很多定义路由动画的，但是按他们实现的动画，大部分是有一定缺陷的，比如这种路由动画！！！！！！点我。
flutter系列之:如何自定义动画路由
程序那些事
04-19 761
flutter中有默认的Route组件，叫做MaterialPageRoute，一般情况下我们在flutter中进行跳转的话，只需要向Navigator中传入一个MaterialPageRoute就可以了。但是MaterialPageRoute太普通了，如果我们想要做点不同的跳转特效应该如何处理呢？一起来看看吧。如果要实现特定的路由动画，那么需要进行路由的自定义。在flutter中也就是要使用PageRouteBuilder来自定义一个Route。})
[译] 关于 Flutter 页面路由过渡动画，你所需要知道的一切
2401_84049001的博客
04-01 1165
对程序员来说，很多技术的学习都是“防御性”的。也就是说，我们是在为未来学习。我们学习新技术的目的，或是为了在新项目中应用，或仅仅是为了将来的面试。但不管怎样，一定不能“止步不前”，不能荒废掉。!文章以下内容会给出阿里与美团的面试题（答案+解析）、面试题库、Java核心知识点梳理等《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门即可获取！[外链图片转存中…(img-mTfguRrG-1711907303877)]
Flutter 之 自定义路由切换动画
Dream It Possible
11-05 1608
无论是MaterialPageRoute、CupertinoPageRoute，还是PageRouteBuilder，它们都继承自PageRoute类，而PageRouteBuilder其实只是PageRoute的一个包装，我们可以直接继承PageRoute类来实现自定义路由。@override@override@override@override@override}@override}}使用MSFadeRoute},),);完整代码@override),
flutter大纲资料.txt
04-12
同时，开发者还可以创建自定义的Widget来满足特定需求，为应用添加动画和过渡效果来增强用户体验。 Flutter中的状态管理是保证应用动态交互和高效渲染的核心。基础的状态管理包括StatefulWidget、InheritedWidget和...
flutter比较好的几个ui案例和框架.rar
03-03
3. **Custom Paint**：Flutter的Custom Paint类允许开发者自定义绘制复杂的图形和动画，极大地扩展了UI设计的可能性。 4. **Stateful Hot Reload**：Flutter的一大亮点是其热重载功能，允许开发者在运行时快速看到...
Flutter Projects.pdf
03-20
6. **动画和图形**：Flutter支持丰富的动画效果，书中会介绍如何创建自定义动画和使用AnimationController、Tween等工具。 7. **集成第三方服务**：包括API调用、网络请求（如使用http包）、本地存储（sqflite）、...
flutter版高仿微信70
08-10
4. **Navigation**：掌握 Flutter 中的路由系统，包括 MaterialPageRoute、MaterialApp、Navigator 和 PageRoute 等，实现页面间的跳转。 5. **Custom Painter**：为了实现一些自定义的视觉效果，可能需要使用 ...
Flutter路由的跳转、动画和传参详解（最简单）
08-26
主要给大家介绍了关于Flutter路由的跳转、动画和传参的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Flutter GetX页面跳转动画与属性
yang_6799的博客
07-27 2745
fade: 页面渐变动画，新页面会从透明度为 0 的状态渐变到完全显示。fadeIn: 渐入动画，新页面会从透明度为 0 的状态渐变到完全显示。rightToLeft: 从右向左滑动动画，新页面从屏幕右侧滑入显示。leftToRight: 从左向右滑动动画，新页面从屏幕左侧滑入显示。upToDown: 从上到下滑动动画，新页面从屏幕顶部滑入显示。downToUp: 从下到上滑动动画，新页面从屏幕底部滑入显示。topLevel: 顶层动画，新页面从顶部覆盖到当前页面。native: 原生平台的切换动画。
Flutter动画库：animations（路由过渡动画或者页面切换动画）
weixin_41897680的博客
07-21 2307
Flutter动画库：animations（路由过渡动画或者页面切换动画）
[译] 关于 Flutter 页面路由过渡动画，你所需要知道的一切(1)
2401_84132381的博客
04-05 564
有任何问题，欢迎广大网友一起来交流，分享高阶Android学习视频资料和面试资料包~偷偷说一句：群里高手如云，欢迎大家加群和大佬们一起交流讨论啊！《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门即可获取！有任何问题，欢迎广大网友一起来交流，分享高阶Android学习视频资料和面试资料包~偷偷说一句：群里高手如云，欢迎大家加群和大佬们一起交流讨论啊！[外链图片转存中…(img-wsTHRqj7-1712305324875)]
flutter 普通路由切换动画效果
weixin_43294560的博客
04-27 1112
1、构造类来继承 PageRouteBuilder class xx extends PageRouteBuilder 2、构造函数传入组件，并重写父类构造器 final Widget x; CusRoute(this.x):super( transitionDuration:Duration(seconds: 1), 动画时间 pageBuilde...
Flutter酷炫的路由动画效果
weixin_30507481的博客
07-23 500
现在Flutter的路由效果已经非常不错了，能满足大部分App的需求，但是谁不希望自己的App更酷更炫那，下面介绍几个酷炫的路由动画。 其实路由动画的原理很简单，就是重写并继承PageRouterBuilder这个类里的transitionsBuilder方法。 不过这个方法还是有很多写法的，通过写法的不同，产生的动画效果也有所不同。 1、渐隐渐现的动画效果 先编写一个主入口方法，还是...
Ionic项目打包Android在9版本以上不能进行HTTP通信问题
2401_84024148的博客
04-11 231
目前已经更新的部分资料：一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**[外链图片转存中…(img-sprRxJTF-1712847727713)]
Android保活黑科技的技术实现，金九银十旗开得胜
最新发布
2301_82242130的博客
04-21 718
其实客户端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。然而Android架构学习进阶是一条漫长而艰苦的道路，不能靠一时激情，更不是熬几天几夜就能学好的，必须养成平时努力学习的习惯。贵在坚持！《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！点击传送门即可获取！**
【Flutter 实战】动画序列、共享动画、路由动画
老孟Flutter
08-25 1432
老孟导读：此篇文章是 Flutter 动画系列文章第四篇，本文介绍动画序列、共享动画、路由动画。 动画序列 Flutter中组合动画使用Interval，Interval继承自Curve，用法如下： Animation _sizeAnimation = Tween(begin: 100.0, end: 300.0).animate(CurvedAnimation( parent: _animationController, curve: Interval(0.5, 1.0))); 表示_siz..
flutter 自定义pop动画
05-31
Flutter提供了一个很好的动画框架，可以轻松地自定义任何动画效果。要自定义pop动画，可以使用`PageRouteBuilder`类来创建自定义路由。 下面是一个示例： ```dart class CustomPageRoute<T> extends PageRoute<T> { CustomPageRoute({ @required this.builder, this.transitionDuration = const Duration(milliseconds: 500), this.opaque = true, this.barrierDismissible = false, this.barrierColor, this.barrierLabel, this.maintainState = true, }); final WidgetBuilder builder; @override final Duration transitionDuration; @override final bool opaque; @override final bool barrierDismissible; @override final Color barrierColor; @override final String barrierLabel; @override final bool maintainState; @override Widget buildPage(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) { return builder(context); } @override Widget buildTransitions(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) { return SlideTransition( position: Tween<Offset>( begin: Offset(0.0, 1.0), end: Offset.zero, ).animate(animation), child: child, ); } } ``` 这里我们创建了一个`CustomPageRoute`类，它继承自`PageRoute`，并重写了`buildTransitions`方法来定义我们的自定义动画效果。在这个例子中，我们使用`SlideTransition`来实现一个从底部向上滑动的动画效果。你可以根据需要替换为其他动画效果。 使用自定义动画时，可以使用`Navigator.push`来打开路由： ```dart Navigator.push(context, CustomPageRoute(builder: (context) => NextPage())); ``` 这将打开一个名为`NextPage`的路由，并使用我们定义的自定义动画效果进行过渡。同样，你可以使用`Navigator.pop`来关闭当前路由： ```dart Navigator.pop(context); ``` 希望这个例子能帮到你！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xq9527--

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值