Flutter的闪屏动画案例AnimationController

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

AnimationController

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

我们这里有了两个参数 ：

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

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

_controller = AnimationController(vsync: this,duration: Duration(milliseconds: 3000)); //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) => FirstPage()), 
          (route) => route==null
        ); 
      }
});

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

完整代码如下：

import 'package:flutter/material.dart';

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

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

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

class _SplashScreenState extends State<SplashScreen> with SingleTickerProviderStateMixin{
  AnimationController _controller; //控制器，一般控制动画和时间
  Animation _animation; //动画
  //初始化状态
  @override
  void initState() { 
    super.initState();
    _controller = AnimationController(vsync: this,duration: Duration(milliseconds: 3000)); //3000毫秒
    _animation = Tween(begin: 0.0, end: 1.0).animate(_controller);
    //监听事件
    _animation.addStatusListener((status){
      if(status == AnimationStatus.completed){ //判断动画已经执行完毕
        Navigator.of(context).pushAndRemoveUntil( //跳转到下页，并把动画结束掉
          MaterialPageRoute(builder: (context) => FirstPage()), 
          (route) => route==null
        ); 
      }
    });
     _controller.forward(); //播放动画
  }
  //控制器销毁
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
 
  @override
  Widget build(BuildContext context) {
    return FadeTransition( //动画透明过度
      opacity: _animation,
      child: Image.asset(
        'images/lake.jpg',
        scale:2.0, //图片缩放
        fit:BoxFit.cover //填充 充满屏幕
      ),    
    );
  }
}

FirstPage.dart文件

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
       appBar: AppBar(title: Text('闪屏动画'),),
       body: Center(
         child: Text('首页'),
       ),
    );
  }
}