本头条核心宗旨

欢迎来到「技术刚刚好」作者，「技术刚刚好」是个人维护，每天至少更新一篇Flutter技术文章，实时为大家播报Flutter最新消息。如果你刚好也在关注Flutter这门技术，那就跟我一起学习进步吧，你的赞，收藏，转发是对我个人最大的支持，维护不易，欢迎关注。

技术刚刚好经历

近几年，移动端跨平台开发技术层出不穷，从Facebook家的ReactNative，到阿里家WEEX，前端技术在移动端跨平台开发中大展身手，技术刚刚好作为一名Android开发，经历了从Reactjs到Vuejs的不断学习。而在2018年，我们的主角变成了Flutter，这是Goolge开源的一个移动端跨平台解决方案，可以快速开发精美的移动App。希望跟大家一起学习，一起进步！

做开发很多时候会接触动画运用，作为前端开发人员难免跑不掉动画运用，之前做安卓开发，必须项目里面需要一个登录界面的过渡动画，再比如加载网络数据的时候，由于等待时间较短，这个时候可能就需要用动画来完美等待。

动画这一词早在计算机WEB前端得时候就有运用，那个时候可能是一些简单的flash网页动画，现如今手机已经普及到老人和小孩的手上，所以动画也运用的比较普遍了，很多时候为了有一个好的用户体验，动画有是少不了的角色。

今天我就带大家简单的学习一下Flutter当中动画是什么样子的，应该怎么运用，用一个简单的例子带大家入门Flutter动画，希望你在学习Flutter的时候能够有所帮助，本人也是在学习当中，如有不对的地方还望大家指正。

首先学习知识肯定少不了去官网查资料，本人也是一样，学习程序开发第一份资料就是官网文档API。当我们打开官网文档，进入动画API页面如下图：

Flutter动画API

第一行就说到我们要使用动画第一步是导入动画库；package:flutter/animation.dart。该库提供了在Flutter中实现动画的基本构建块，其实一组动画的核心就是一堆不停变化的数值组织在一起就形成了动画。这个时候我们就要用到这个「Animation」API.这个API可以存储一堆动画的值，使得动画能够顺利的执行。尽管您不能直接实例化Animation（这是一个抽象类），但是可以使用AnimationController创建一个实例。

刚我们提到了「AnimationController」这个是一个动画控制器，可以由他来掌管整个动画的执行顺序和执行效果。

平移动画例子

首先使用有状态的StatefulWidget,创建AnimationController和Animation,并在initState中初始化这两个对象. vsync需要使用with TickerProviderStateMixin,这样才是正常的进行动画的操作. 在initState方法中,声明这个动画执行时间为2秒.给animation添加一个监听事件,在动画完成后,将移除这个简单,并将AnimationController还原为初始状态,在执行一次动画.

<code>AnimationController _controller;
  Animation _animation;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 2),
    ); 

    _animation = Tween(begin: -1.0, end: 0.0).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Curves.fastOutSlowIn,
      ),
    )..addStatusListener(_handler);
  }

  _handler(status) {
    if (status == AnimationStatus.completed) {
      _animation.removeStatusListener(_handler);
      _controller.reset();
      _animation = Tween(begin: 0.0, end: 1.0).animate(
        CurvedAnimation(parent: _controller, curve: Curves.fastOutSlowIn),
      )..addStatusListener(
          (status) {
            if (status == AnimationStatus.completed) {
              Navigator.pop(context);
            }
          },
        );
      _controller.forward();
    }
  }/<code>

总结

谢谢观看技术刚刚好的文章，技术刚刚好是个人维护，每天至少更新一篇Flutter技术文章，实时为大家播报Flutter最新消息。如果你刚好也在关注Flutter这门技术，那就跟我一起学习进步吧，你的赞，收藏，转发是对我个人最大的支持，维护不易，欢迎关注。

閱讀更多 技術剛剛好 的文章

關鍵字: Facebook Android 动画