Flutter 自定义路由动画案例
前言:
各位同学大家好,最近国庆放假期间因为没有回老家过节(没买到车票啊)就写了一些flutter小案例就分享给大家 (Flutter 自定义路由动画案例),那么废话不多说我们正式开始
准备工作
需要安装flutter的开发环境:大家可以去看看之前的教程:
1 win系统flutter开发环境安装教程: https://www.jianshu.com/p/152447bc8718
2 mac系统flutter开发环境安装教程:https://www.jianshu.com/p/bad2c35b41e3
效果图:
具体实现 :
渐变路由动画
首先我们要自定义 一个自定义路由类继承 PageRouteBuilder 然后重写构造方法 需要传入定义一个 Widget变量在构造函数中传入然后我们在spuer 指向父类构造方法的时候添设置一些属性
transitionDuration 和 pageBuilder transitionsBuilder 等属性
然后我们返回 FadeTransition 来实现渐变效果 具体代码
import 'package:flutter/material.dart';
/**** 创建人:xuqing* 创建时间:2020年10月5日19:06:43* 类说明:自定义路由动画效果 渐隐渐变效果***/class GradualChangeRoute extends PageRouteBuilder{final Widget widget;GradualChangeRoute(this.widget):super(transitionDuration:Duration(seconds: 2),pageBuilder:(BuildContext context,Animation<double>animation1,Animation<double>animation2,){return widget;},transitionsBuilder:(BuildContext context,Animation<double>animation1,Animation<double>animation2,Widget child){//渐隐渐变效果return FadeTransition(opacity: Tween(begin: 0.0,end: 1.0).animate(CurvedAnimation(parent: animation1,curve: Curves.fastOutSlowIn)),child: child,);});}
具体调用 :
Navigator.of(context).push(GradualChangeRoute(SencondPage()));
缩放路由动画
实现方式类似上面渐变需要自定义路由继承 PageRouteBuilder 只是我们返回的时候 是返回
ScaleTransition 属性来实现缩放路由动画效果 具体代码 :
import 'package:flutter/material.dart';
/**** 创建人:xuqing* 创建时间:2020年10月5日19:06:43* 类说明:自定义路由动画效果 缩放的效果
**/
class ZoomRoute extends PageRouteBuilder{final Widget widget;ZoomRoute(this.widget):super(transitionDuration:Duration(seconds: 2),pageBuilder:(BuildContext context,Animation<double>animation1,Animation<double>animation2,){return widget;},transitionsBuilder:(BuildContext context,Animation<double>animation1,Animation<double>animation2,Widget child){// 缩放的效果return ScaleTransition(scale: Tween(begin: 0.0,end: 1.0).animate(CurvedAnimation(parent: animation1,curve: Curves.fastOutSlowIn)),child: child,);});
}
具体调用:
Navigator.of(context).push(ZoomRoute(SencondPage()));
旋转加缩放并用路由动画:
实现方式类似上面渐变需要自定义路由继承 PageRouteBuilder 只是我们返回的时候 我们先返回 RotationTransition旋转的属性 然后我们在旋转属性组件里面child 里面嵌套 ScaleTransition 缩放属性的组件 最后返回我们的定义的child 具体代码如下
//旋转加缩放return RotationTransition(turns: Tween(begin: 0.0,end: 1.0).animate(CurvedAnimation(parent: animation1,curve: Curves.fastOutSlowIn)),child: ScaleTransition(scale: Tween(begin: 0.0,end: 1.0).animate(CurvedAnimation(parent: animation1,curve: Curves.fastOutSlowIn)),child: child,),);
完整旋转加缩放路由类代码:
import 'package:flutter/material.dart';
/**** 创建人:xuqing* 创建时间:2020年10月5日19:06:43* 类说明:自定义路由动画效果 旋转加缩放*/
class RotateAndZoomRoute extends PageRouteBuilder{final Widget widget;RotateAndZoomRoute(this.widget):super(transitionDuration:Duration(seconds: 2),pageBuilder:(BuildContext context,Animation<double>animation1,Animation<double>animation2,){return widget;},transitionsBuilder:(BuildContext context,Animation<double>animation1,Animation<double>animation2,Widget child){//旋转加缩放return RotationTransition(turns: Tween(begin: 0.0,end: 1.0).animate(CurvedAnimation(parent: animation1,curve: Curves.fastOutSlowIn)),child: ScaleTransition(scale: Tween(begin: 0.0,end: 1.0).animate(CurvedAnimation(parent: animation1,curve: Curves.fastOutSlowIn)),child: child,),);});
}
具体调用:
Navigator.of(context).push(RotateAndZoomRoute(SencondPage()));
左右滑动路由动画 :
实现方式类似上面渐变需要自定义路由继承 PageRouteBuilder 只是我们返回的时候 是返回
SlideTransition属性来实现缩左右滑动路由动画效果 具体代码 :
//左右滑动路由动画return SlideTransition(position: Tween<Offset>(begin: Offset(-1.0,0.0),end:Offset(0.0,0.0),).animate(CurvedAnimation(parent: animation1,curve: Curves.fastOutSlowIn)),child: child,);
完整左右滑动路由类代码:
import 'package:flutter/material.dart';
import 'second_page.dart';
import '../routes/gradual_change_route.dart';
import '../routes/zoom_route.dart';
import '../routes/rotateandzoom_route.dart';
import '../routes/sliding_around_route.dart';/**** 创建人:xuqing* 创建时间:2020年10月5日16:57:33* 类说明:测试类***/class FirstPage extends StatelessWidget {FirstPage({Key key}) : super(key: key);TextStyle styles=TextStyle(fontSize: 20,color: Colors.white);@overrideWidget build(BuildContext context) {// TODO: implement buildreturn Scaffold(backgroundColor: Colors.blue,appBar: AppBar(title: Text("Firstpage",style: TextStyle(fontSize: 36.0),),elevation: 4,),body: Center(child:Column(children: <Widget>[MaterialButton(child: Row(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Text("渐变",style: styles,),Icon(Icons.navigate_next,color: Colors.white,size: 64.0,),],),onPressed: (){Navigator.of(context).push(GradualChangeRoute(SencondPage()));},),MaterialButton(child: Row(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Text("缩放",style: styles,),Icon(Icons.navigate_next,color: Colors.white,size: 64.0,),],),onPressed: (){Navigator.of(context).push(ZoomRoute(SencondPage()));},),MaterialButton(child: Row(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Text("缩放并旋转",style: styles,),Icon(Icons.navigate_next,color: Colors.white,size: 64.0,),],),onPressed: (){Navigator.of(context).push(RotateAndZoomRoute(SencondPage()));},),MaterialButton(child: Row(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Text("左右滑动",style: styles,),Icon(Icons.navigate_next,color: Colors.white,size: 64.0,),],),onPressed: (){Navigator.of(context).push(SlidingAroundRoute(SencondPage()));},),],)),);}
}
具体调用:
Navigator.of(context).push(SlidingAroundRoute(SencondPage()));
到此我们的自定义路由动画就讲完了,当然啦flutter类里面还提供了很多其他的动画属性有兴趣的同学可以自己去多尝试我这边就不展开讲了
最后总结:
flutter里面的路由跳转动画还是比较容易实现的 ,flutter sdk里面已经提供了很多好用的动画属性给我们调用 我们只需要调用互相配合嵌套就能实现很炫的动画交互效果 有兴趣的同学可以多尝试,最后希望我的文章能帮助到各位解决问题 ,以后我还会贡献更多有用的代码分享给大家。各位同学如果觉得文章还不错 ,麻烦给关注和star,小弟在这里谢过啦
项目地址
码云 :https://gitee.com/qiuyu123/customroute_animation
QQ 交流群:
Flutter 自定义路由动画案例相关推荐
- 安卓自定义view动画案例
小图片向做移动: 小图片向右移动: 代码: package com.example.customview; import android.content.Context; import android ...
- Flutter之自定义路由切换动画
Flutter之自定义路由切换动画 在Flutter中,我们可以通过Navigator来实现路由管理,包括路由的跳转和返回等.默认情况下,Flutter提供了一些简单的路由切换动画,但是有时候我们需要 ...
- Flutter 之 自定义路由切换动画
Material组件库中提供了一个MaterialPageRoute组件,它可以使用和平台风格一致的路由切换动画,如在iOS上会左右滑动切换,而在Android上会上下滑动切换 1. Cupertin ...
- Flutter 自定义动画 — 数字递增动画和文字逐行逐字出现或消失动画
系列文章 Flutter 旋转动画 - RotationTransition Flutter 平移动画 - 4种实现方式 Flutter 淡入淡出与逐渐出现动画 Flutter 尺寸缩放.形状.颜色. ...
- Android动画案例(五)布局动画与自定义动画
在前面我通过看一些网络视频学习到了动画的基本用法,这几天通过对Android群英传的学习又学到了布局动画和自定义动画 这篇博客我会把我从Android群英传学习到的有关内容写出来 布局动画 这是一个B ...
- Flutter进阶—路由和导航
大部分应用程序都有多个屏幕或页面,并希望用户能从当前屏幕平滑过渡到另一个屏幕,Flutter的路由和导航功能可以帮助我们管理应用程序中的用户界面之间的命名和过渡. 管理多个用户界面有两个核心概念和类: ...
- flutter之路由管理
路由管理 路由(Route)在移动开发中通常指页面(Page),这跟web开发中单页应用的Route概念意义是相同的,Route在Android中通常指一个Activity,在iOS中指一个ViewC ...
- 【Flutter】Flutter 自定义字体 ( 下载 TTF 字体 | pubspec.yaml 配置字体资源 | 同步资源 | 全局应用字体 | 局部应用字体 )
文章目录 一.Flutter 自定义字体 1.ttf 字体文件 2.ttf 字体资源配置 3.获取字体 4.全局使用字体 5.局部使用字体 二.完整代码示例 三.相关资源 一.Flutter 自定义字 ...
- android 自定义刷新控件,Android开发中MJRefresh自定义刷新动画效果
有时候我们对自己开发的项目经常不满意,但是我们要达到自定义刷新动画的效果有一定的难度,别着急,下面爱站技术频道和大家分享Android开发中MJRefresh自定义刷新动画效果,一起来学习吧! [一] ...
最新文章
- Structured Streaming编程 Programming Guide
- 2017年8月Science肠道菌群研究
- EA问题的JDK14实例
- Bootstrap警告框
- iPhone入门教程 (视频)
- php和windows对应,哪个.so文件可以用于windows系统中与.dll文件相对应的linux系统,以便将php连接到ms sql server...
- 实时音频编程(二):实践与技巧
- 2019 ACM/ICPC 全国邀请赛(西安)J And And And (树DP+贡献计算)
- rnqoj-28-合唱队形-最长上升子序列
- 计算器与计算机小键盘的使用,会计神器!用上Cherry轴的计算器还能当小键盘用...
- 高级终端termux下载不了Python_基于Termux打造Android手机渗透工具
- reportviewer动态加载报表的实现以及动态控制报表,套打,存折打印模式等的一些探讨,欢迎批评指正!
- 个人免签监测APP源码 短信微信支付宝 实时捕获回调收款通知!
- 64位处理器_32位和64位Windows系统差别在哪里
- Chrome插件安装以及常见问题
- 数码数字字体_2020年最佳创意数字艺术软件
- Python编写的命令行版微信。(已集成自动聊天机器人(通过网址api形式))
- 一致 先验分布 后验分布_先验概率、似然函数与后验概率
- E500 TLB miss 及 DSI处理分析(2)
- java8新特性 Stream流之根据条件过滤统计个数