24. Flutter实战-酷炫的路由跳转动画效果
现在 Flutter 的路由效果已经非常不错了,能满足大部分 App 的需求,但是谁不希望自己的 App 更酷更炫,让人看了赞不绝口呢。本文就教大家给自己的 APP 加上酷炫的路由动画效果。
其实路由动画的原理很简单,就是重写并继承PageRouterBuilder
这个类里的transitionsBuilder
方法。
不过这个方法还是有很多写法的,通过写法的不同,产生的动画效果也有所不同。
主入口方法
先编写一个主入口方法,还是最简单的格式,只不过 home 属性,使用的FirstPage
的组件是我们自定义的,需要我们再次编写。入口文件的代码如下:
import 'package:flutter/material.dart'; import 'pages.dart'; void main()=>runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title:'Flutter Demo', theme: new ThemeData( primarySwatch: Colors.blue, ), home:FirstPage() ); } }
pages.dart 页面的编写
主入口文件用import
引入了pages.dart
文件,这个文件就是生成了两个页面(Flutter 里的页面也是 Widget,这个你要跟网页区分开)。有了两个页面就可以实现路由跳转了。
pages.dart
文件的代码如下,这里我们先用普通路由代替,看一看效果。
import 'package:flutter/material.dart'; class FirstPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.blue, appBar:AppBar( title:Text('FirstPage',style: TextStyle(fontSize: 36.0)), elevation: 0.0, ), body:Center( child: MaterialButton( child: Icon( Icons.navigate_next, color:Colors.white, size:64.0, ), onPressed: (){ Navigator.of(context).push( MaterialPageRoute( builder:(BuildContext context){ return SecondPage(); })); }, ), ) ); } } class SecondPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.pinkAccent, appBar: AppBar( title: Text('SecondPage',style:TextStyle(fontSize:36.0),), backgroundColor: Colors.pinkAccent, leading:Container(), elevation: 0.0, ), body:Center( child: MaterialButton( child: Icon( Icons.navigate_before, color:Colors.white, size:64.0 ), onPressed: ()=>Navigator.of(context).pop(), ), ) ); } }
上面代码中有一个新知识点,需要学习一下:
AppBar Widger 的 elevation
属性:这个值是AppBar
滚动时的融合程度,一般有滚动时默认是 4.0,现在如果我们设置成 0.0,就是和也 main 完全融合了。
写完这个页面代码后,已经可以进行最基本的导航了,但是并没有什么酷炫的动画。
自定义 CustomRoute Widget
新建一个custome_router.dart
文件,这个就是要自定义的路由方法,自定义首先要继承于通用的路由的构造器类PageRouterBuilder
。继承之后重写父类的CustomRoute
构造方法。
构造方法可以简单理解为:只要以调用这个类或者说是 Widget,构造方法里的所有代码就执行了。
custome_router.dart
代码如下:
import 'package:flutter/material.dart'; class CustomRoute extends PageRouteBuilder{ final Widget widget; CustomRoute(this.widget) :super( transitionDuration:const Duration(seconds:1), 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, ); } ); }
- FadeTransition:渐隐渐现过渡效果,主要设置 opactiy(透明度)属性,值是 0.0-1.0。
- animate :动画的样式,一般使用动画曲线组件(CurvedAnimation)。
- curve: 设置动画的节奏,也就是常说的曲线,Flutter 准备了很多节奏,通过改变动画取消可以做出很多不同的效果。
- transitionDuration:设置动画持续的时间,建议再 1 和 2 之间。
写完代码,我们已经可以看到在切换路由时有了动画效果:
三个常用的动画效果
缩放路由动画
return ScaleTransition( scale:Tween(begin:0.0,end:1.0).animate(CurvedAnimation( parent:animation1, curve: Curves.fastOutSlowIn )), child:child );
旋转+缩放路由动画
旋转+缩放的思路是在一个路由动画里的 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, ) );
左右滑动路由动画
其实用的做多的还是左右滑动路由动画,其实实现起来也是非常简单,直接使用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, );
总结
动画的使用会让我们的 APP 更加酷炫,也会让别人觉的你不是一个新手,再 Flutter 里使用动画是非常方便的,所以你可以把这些动画效果事先写好,在工作中直接使用。
码云笔记 » 24. Flutter实战-酷炫的路由跳转动画效果