flutter 设置启动页动画

朴灿烈づ我的快乐病毒、 2021-07-24 19:41 878阅读 0赞

1、在main.dart的MaterialApp内,将home对应的组件内容设置成,启动页所在组件
    
    2、启动页设置有状态组件，第二个状态类还要with多继承SingleTickerProviderStateMixin
    
    3、在initState生命周期函数中定义动画控制器和监听动画结束跳转到指定页面
    
    	AnimationController  xx=AnimationController(vsync: this,duration: Duration(milliseconds:动画毫秒数 ));
    		
    	 _animation.addStatusListener((status){
    	    if(status==AnimationStatus.completed)   动画结束状态
    		    {
    		    跳转时销毁页面,避免动画占据内存
    		      Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (context)=>组件名()),(route) => route == null);
    		    }
    	  });
    
    4、在dispose生命周期函数中销毁控制器,避免内存泄露
    	xx.dispose();
    
    5、设置动画
    	直接在build中
    	其他种类动画和混合动画,查看普通路由的切换动画文章
    	return FadeTransition(
          opacity:  Tween(begin: 0.0,end:1.0).animate(xx控制器)，
          child: 启动页内容,
        );

代码示例:  
main.dart

import 'package:flutter/gestures.dart';
    import "package:flutter/material.dart";
    import 'package:flutter/rendering.dart';
    import "drag.dart";
    import 'dart:ui';
    
    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> with SingleTickerProviderStateMixin { 
    
      // List _page=[Home3(),Home2(),Home4()];
      // int index=0;
      TabController con;
    
      @override
      void initState() { 
        // TODO: implement initState
        super.initState();
        con=new TabController(length: 3, vsync: this);
      }
    
      @override
      void dispose() { 
        // TODO: implement dispose
        super.dispose();
        con.dispose();
      }
    
      @override
      Widget build(BuildContext context) { 
        return  MaterialApp(
          home:Home3() ,
          
          //去掉右上角的debug贴纸
          debugShowCheckedModeBanner: false,
          theme: ThemeData(
            primarySwatch: Colors.blue
          ),
          );
      }
    }

启动页:

import 'package:flutter/material.dart';
    import "3.dart";
    
    class Home3 extends StatefulWidget { 
      Home3({ Key key}) : super(key: key);
    
      @override
      _Home3State createState() => _Home3State();
    }
    
    class _Home3State extends State<Home3> with SingleTickerProviderStateMixin{ 
    
    AnimationController _con;
    Animation _animation;
    
    
    @override
    void initState() {  
      super.initState();
      _con=AnimationController(vsync: this,duration: Duration(milliseconds:3000 ));
      _animation= Tween(begin: 0.0,end:1.0).animate(_con);
    
      _animation.addStatusListener((status){ 
        if(status==AnimationStatus.completed)
        { 
          Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (context)=>Home4()),(route) => route == null);
        }
      });
    
      _con.forward(); //播放动画
    }
    
    @override
      void dispose() { 
        // TODO: implement dispose
        super.dispose();
        _con.dispose();
      }
    
      @override
      Widget build(BuildContext context) { 
        return FadeTransition(
          opacity: _animation,
          child: Image.asset("images/2.0x/钢铁侠4.jpg",scale: 2.0,fit: BoxFit.cover,),
        );
      }
    
    
    }

跳转页:

import 'dart:async';
    import 'dart:convert' as convert;
    import 'package:http/http.dart' as http;
    import 'package:dio/dio.dart';
    
    import 'package:flutter/material.dart';
    import 'package:date_format/date_format.dart';
    import 'package:flutter_cupertino_date_picker/flutter_cupertino_date_picker.dart';
    import 'package:flutter_swiper/flutter_swiper.dart';
    import 'package:fluttertoast/fluttertoast.dart';
    import 'package:myflutter/page/me.dart';
    
    
    class Home4 extends StatefulWidget { 
      Home4({ Key key}) : super(key: key);
    
      @override
      _Home2State createState() => _Home2State();
    }
    
    class _Home2State extends State<Home4> { 
      String news='哈哈';
      @override
      void initState() {  
        super.initState();
    
    
      }
      var url="http://api.tianapi.com/txapi/ncov/index?key=4a8edfc8ac5eae9b0c5bf08157abba96";
      get() async{ 
         Response response = await Dio().get(url);
          print(response);
      }
      
      var url2="http://api.tianapi.com/txapi/ncov/index";
      post() async
      { 
       Response response = await Dio().post(url2, data:{ 'key':'4a8edfc8ac5eae9b0c5bf08157abba96'});
        print(response);
      }
    
      @override
      Widget build(BuildContext context) { 
        return Scaffold(
          appBar: AppBar(),
          body:Container(
          width: double.infinity,
          color: Colors.blue,
           child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
             children: <Widget>[
               
              RaisedButton(
                child: Text(news),
                color: Theme.of(context).accentColor,
                onPressed: (){ 
                  get();
                },
              ),
              RaisedButton(
                child: Text('post'),
                color: Theme.of(context).accentColor,
                onPressed: (){ 
                  post();
                },
              ),
    
           ]),
        )
        );
      }
    }
    
    
      
    
    
    // 因为表单组件需要改变状态,所以要使用有状态组件
    
    /* 轮播图必须外包一层有高度的父容器或者使用子元素宽高比组件AspectRatio json.encode(Map); 将Map类型转换成json字符串 json.decode(json); 将json字符串类型转换成Map */