flutter --- app启动页动画

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/a875801/article/details/88806087

flutter App 启动页动画

代码如下

import 'package:flutter/material.dart';
import 'page.dart';



void main() {
  runApp(
    MaterialApp(
      home: MyHome(),
    )
  );
}

class MyHome extends StatefulWidget {
  @override
  _MyHomeState createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> with SingleTickerProviderStateMixin{

  AnimationController _controller;//AnimationController是Animation的一个子类,它可以控制Animation,可以控制动画的时间,类型,过渡3曲线
  Animation _animation;

  @override
  void initState() {
    _controller = AnimationController(vsync: this, duration: Duration(milliseconds: 3000));
    _animation = Tween(begin: 0.0, end: 1.0).animate(_controller);
    //上面两行代码表示初始化一个Animation控制器, vsync垂直同步,动画执行时间3000毫秒,然后我们设置一个Animation动画,使用上面设置的控制器


    //监听动画运行状态,当状态为completed时,动画执行结束,跳转首页
    _animation.addStatusListener((status){
      if(status == AnimationStatus.completed){
        Navigator.of(context).pushAndRemoveUntil(
          MaterialPageRoute(builder: (context){
            return pageSliver();
          }),
            (route) => route == null
        );
      }
    });
    _controller.forward(); // 播放动画
    super.initState();
  }

  @override
  void dispose() {
    _controller.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=1546851657199&di=fdd278c2029f7826790191d59279dbbe&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0112cb554438090000019ae93094f1.jpg%401280w_1l_2o_100sh.jpg',
          fit: BoxFit.cover, //图片铺满
          scale: 2.0, //进行缩放
      ),

    );
  }
}


本文学习于大佬技术胖https://jspang.com,大家一起来学习flutter.

展开阅读全文

没有更多推荐了,返回首页