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); @override Widget build(BuildContext context) { // TODO: implement build return 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 交流群: