flutter 普通路由切换动画效果

矫情吗；* 2021-07-24 20:06 576阅读 0赞

1、构造类来继承 PageRouteBuilder
    		class xx extends PageRouteBuilder
    2、构造函数传入组件，并重写父类构造器
    		final Widget x;
    		
    		CusRoute(this.x):super(
    		    transitionDuration:Duration(seconds: 1),    动画时间
    		    pageBuilder:(BuildContext context,Animation<double> animation1,Animation<double> animation2)
    		    {
    		      return x;
    		    },
    		
    		    transitionsBuilder:(
    		      BuildContext context,
    		      Animation<double> animation1,
    		      Animation<double> animation2,
    		      Widget child
    		    ){
    		      实现动画
    		      return
    		      1、渐变 
    		       FadeTransition(
    		         child: child,   若混合其他动画,child内容直接放其他动画,优先级次于主动画
    		         opacity: Tween(begin: 0.0,end:1.0).animate(CurvedAnimation(parent: animation1, curve: Curves.动画曲线)),
    		       );
    		       
    		      2、缩放
    		      ScaleTransition(
    		         child: child,
    		         scale: Tween(begin: 0.0,end:1.0).animate(CurvedAnimation(parent: animation1, curve:  Curves.动画曲线)),
    		       );
    		       
    		      3、旋转
    		      RotationTransition(
    		         child: child,
    		         turns: Tween(begin: 0.0,end:1.0).animate(CurvedAnimation(parent: animation1, curve: Curves.动画曲线)),
    		       );
    		       
    		      4、先旋转后缩放
    		       RotationTransition(
    		         child:ScaleTransition(
    		           child: child,
    		           scale: Tween(begin: 0.0,end:1.0).animate(CurvedAnimation(parent: animation1, curve: Curves.动画曲线)),
    		         ) ,
    		         turns: Tween(begin: 0.0,end:1.0).animate(CurvedAnimation(parent: animation1, curve: Curves.动画曲线)),
    		       );
    		       
    		      5、平滑
    		      SlideTransition(
    		        child: child,
    		        position: Tween<Offset>(begin:Offset(-1.0,0.0),end:Offset(0.0,0.0)).animate(CurvedAnimation(parent: animation1, curve:  Curves.动画曲线)),
    		        	-1.0代表最小位置
    		        	 0.0代表最大位置
    		      );
    		    }
    
      );
      
    3、使用动画
    	先引入动画类,在回调中
    		 Navigator.of(context).push(xx(路由组件()));

代码示例:  
动画类:

import 'package:flutter/material.dart';
    
    class CusRoute extends PageRouteBuilder{ 
      final Widget comp;
    
      CusRoute(this.comp):super(
        transitionDuration:Duration(seconds: 1),
        pageBuilder:(BuildContext context,Animation<double> animation1,Animation<double> animation2)
        { 
          return comp;
        },
    
        transitionsBuilder:(
          BuildContext context,
          Animation<double> animation1,
          Animation<double> animation2,
          Widget child
        ){ 
          //实现动画
          return
          //渐变 
          // FadeTransition(
          // child: child,
          // opacity: Tween(begin: 0.0,end:1.0).animate(CurvedAnimation(parent: animation1, curve: Curves.easeIn)),
          // );
          //缩放
          // ScaleTransition(
          // child: child,
          // scale: Tween(begin: 0.0,end:1.0).animate(CurvedAnimation(parent: animation1, curve: Curves.easeIn)),
          // );
          //旋转
          // RotationTransition(
          // child: child,
          // turns: Tween(begin: 0.0,end:1.0).animate(CurvedAnimation(parent: animation1, curve: Curves.easeIn)),
          // );
          //先旋转后缩放
          // RotationTransition(
          // child:ScaleTransition(
          // child: child,
          // scale: Tween(begin: 0.0,end:1.0).animate(CurvedAnimation(parent: animation1, curve: Curves.easeIn)),
          // ) ,
          // turns: Tween(begin: 0.0,end:1.0).animate(CurvedAnimation(parent: animation1, curve: Curves.easeIn)),
          // );
          //平滑
          SlideTransition(
            child: child,
            position: Tween<Offset>(begin:Offset(-1.0,0.0),end:Offset(0.0,0.0)).animate(CurvedAnimation(parent: animation1, curve: Curves.easeIn)),
          );
        }
    
      );
    
    }

跳转dart:

import "package:flutter/material.dart";
    import "drag.dart";
    
    import 'page/1.dart';
    import 'page/2.dart';
    import 'page/3.dart';
    import 'xuan.dart';
    
    void main()
    { 
      runApp(App());
    }
    class App extends StatelessWidget { 
      const App({ Key key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) { 
        return App2();
      }
    }
    
    class App2 extends StatefulWidget { 
      App2({ Key key}) : super(key: key);
    
      @override
      _AppState createState() => _AppState();
    }
    
    class _AppState extends State<App2> { 
    
      List _page=[Home3(),Home2(),Home4()];
      int index=0;
    
      @override
      Widget build(BuildContext context) { 
        return  MaterialApp(
          home:Scaffold(
            appBar:AppBar(
              title: Text('小案例'),
            ),
            body:Home() ,
            floatingActionButton: FloatingActionButton(
              onPressed: (){ },
              tooltip: 'js',
              child: Icon(
                Icons.add,
                color: Colors.white,
              ),
            ),
            floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
            //导航栏
            bottomNavigationBar:BottomAppBar(
              color: Colors.lightBlue,
              //有缺口的圆形矩阵,用来放置浮动按钮
              shape: CircularNotchedRectangle(),
              child: Row(
                mainAxisAlignment:MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  IconButton(
                    icon:Icon(Icons.home),
                    color: Colors.white,
                    onPressed: (){ },
                  ),
                  IconButton(
                    icon:Icon(Icons.category),
                    color: Colors.white,
                    onPressed: (){ },
                  ),
              ],),
            )
          ),
          routes: { 
            '/test':(context)=>Home4()
          },
          
          //去掉右上角的debug贴纸
          debugShowCheckedModeBanner: false,
          theme: ThemeData(
            primarySwatch: Colors.blue
          ),
          );
      }
    }
    
    
    class Home extends StatefulWidget { 
    
      @override
      _HomeState createState() => _HomeState();
    }
    
    class _HomeState extends State<Home> { 
    
      Color dragColor=Colors.orange;
    
      @override
      Widget build(BuildContext context) { 
        return Container(
          width: double.infinity,
          color: Colors.red,
           child: Column(children: <Widget>[
           	
           	//跳转
             RaisedButton(
               child: Text('跳转'),
               onPressed: (){ 
                 Navigator.of(context).push(CusRoute(Home4()));
               },
             ),
             
           ],)
        );
      }
    }