Flutter进阶实战 15-20 打开应用的闪屏动画案例

前言：

打开一个APP，经常会看到精美的启动页，这种启动页也称为闪屏动画。它是从无到有有一个透明度的渐变动画的。图像展示完事后，才跳转到用户可操作的页面。这里学习一下闪屏动画的制作。

实现效果：

知识点： 

一、AnimationController

AnimationController是Animation的一个子类，它可以控制Animation, 也就是说它是来控制动画的，比如说控制动画的执行时间。

我们这里有了两个参数 ：

• vsync:this :垂直同步设置，使用this就可以了。
• duration : 动画持续时间，这个可以使用seconds秒，也可以使用milliseconds毫秒，工作中经常使用毫秒，因为秒还是太粗糙了。

来看一段代码，这段代码就是控制动画的一个典型应用。

 _controller = AnimationController(vsync:this,duration:Duration(milliseconds:3000));
_animation = Tween(begin: 0.0,end:1.0).animate(_controller);

这段代码的意思是，设置一个动画控制器，这个动画控制器控制动画执行时间是3000毫秒。然后我们设置了一段动画，动画使用了动画控制器的约定。

二、animation.addStatusListener

animation.addStatusListener动画事件监听器，它可以监听到动画的执行状态，我们这里只监听动画是否结束，如果结束则执行页面跳转动作。

_animation.addStatusListener((status){
  if(status == AnimationStatus.completed){
    Navigator.of(context).pushAndRemoveUntil(
      MaterialPageRoute(builder: (context)=>MyHomePage()), 
      (route)=> route==null);
  }
});

• AnimationStatus.completed:表示动画已经执行完毕。
• pushAndRemoveUntil:跳转页面，并销毁当前控件。

实现代码： 

入口文件main.dart:

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

void main() => runApp(new MyApp());

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

闪屏动画文件splash_screen.dart代码：

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

class SplashScreen extends StatefulWidget {
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> with SingleTickerProviderStateMixin{
  //with是dart的关键字，意思是混入的意思，就是说可以将一个或者多个类的功能添加到自己的类无需继承这些类，避免多重继承导致的问题。可以在https://stackoverflow.com/questions/21682714/with-keyword-in-dart中找到答案
  //为什么是SingleTickerProviderStateMixin呢，因为初始化animationController的时候需要一个TickerProvider类型的参数Vsync参数，所以我们混入了TickerProvider的子类SingleTickerProviderStateMixin
  
  AnimationController _controller;//该对象管理着animation对象
  Animation _animation;  //该对象是当前动画的状态，例如动画是否开始，停止，前进，后退。

  //初始化动画
  @override
  void initState() {
    super.initState();
    _controller=AnimationController(vsync: this,duration: Duration(milliseconds: 3000));
    _animation=Tween(begin: 0.0,end: 1.0).animate(_controller);

     /*动画事件监听器，
    它可以监听到动画的执行状态，
    我们这里只监听动画是否结束，
    如果结束则执行页面跳转动作,跳转到home界面。 */
    _animation.addStatusListener((status){
       if(status==AnimationStatus.completed){
         Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(builder: (context)=>MyHomePage()), (route)=>route==null);
       }
    });
    //播放动画
    _controller.forward();
  }
  
  //销毁生命周期
  @override
  void dispose(){
     super.dispose();
     _controller.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=1565625853431&di=074322e4694e662d371c60743e16784d&imgtype=0&src=http%3A%2F%2Fupload.taihainet.com%2Fnews%2FUploadFiles_6334%2F201312%2F20131226073319201_m.jpg',
        scale:2.0,//图片缩放
        fit:BoxFit.cover    // 充满父容器
      ),
    );
  }
}

闪屏过后的界面文件home_page.dart代码：

import 'package:flutter/material.dart';

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