美文网首页
Flutter 打开App显示动画

Flutter 打开App显示动画

作者: 叶秋_YQ | 来源:发表于2019-05-06 18:07 被阅读0次
打开动画

入口文件

import 'package:flutter/material.dart';
import 'splash_screen.dart';
main(){
  runApp(MyApp());
}
class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue
      ),
      home: SplashScreen(),
    );
  }
}

方法文件

import 'package:flutter/material.dart';
import 'my_home_page.dart';
class SplashScreen extends StatefulWidget {
  SplashScreen({Key key}) : super(key: key);

  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> with SingleTickerProviderStateMixin{
  

  AnimationController _animationController;
  Animation _animation;

  // 初始化状态
  @override
  void initState() {
    super.initState();
    // 两个参数 垂直动态演示  和显示的秒数
    _animationController = AnimationController(vsync: this,duration: Duration(milliseconds: 8000));

    _animation = Tween(begin: 0.0,end: 1.0).animate(_animationController);


    /*动画事件监听器,
    它可以监听到动画的执行状态,
    这里只监听动画是否结束,
    如果结束则执行页面跳转动作。 */
    _animation.addStatusListener((status){
      // 判断动画是否结束
      if(status == AnimationStatus.completed){
        Navigator.of(context).pushAndRemoveUntil(
          // 动画结束跳转到首页
          MaterialPageRoute(builder: (context)=> MyHomePage()), 
          (route) => route == null);
      }
    });
    // 进入页面播放动画
    _animationController.forward();
  }

  // 销毁控制器
  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // 动画透明的控件
    return FadeTransition(
      opacity: _animation,
    // 随便找的一张网络图片
      child: Image.network('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557146841827&di=59a69d473e5bb3633832f3b02073c29e&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20181203%2F32b39d8647304af6b3eb6d78c740ea4a.gif',
      scale: 2.0,
      fit: BoxFit.cover,),
    );
  }
}

首页文件

import 'package:flutter/material.dart';
class MyHomePage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('首页'),),
      body: Center(
        child: Text('我是首页'),
      ),
    );
  }
}

相关文章

网友评论

      本文标题:Flutter 打开App显示动画

      本文链接:https://www.haomeiwen.com/subject/hmbdoqtx.html