flutter --- app启动页动画

2023年3月29日 524次阅读 来源: 一个flutter大菜鸟

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.

    原文作者：一个flutter大菜鸟
    原文地址: https://blog.csdn.net/a875801/article/details/88806087
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞