Flutter的闪屏动画案例AnimationController

打开一个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) => 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毫秒

    _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('首页'),

       ),

    );

  }

}

巴特西

Flutter的闪屏动画案例AnimationController

AnimationController

animation.addStatusListener

最新文章

热门文章