学习开发就是通过很多例子、不停的去用很多方法来实现，大家想一下是不是这个道理？你做Web开发也好，做后端开发也好，都逃不掉需求，需求来自于哪里？来自于世界当中的人们，只有不断的提供需求，实现需求社会才不断的进步。所以学习一门语言最好的办法就是天天的写代码，别直接看什么文档API，直接实现需求，不会了就去查资料，这样的你进步才快，学习起来才有动力。

本头条核心宗旨

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

技术刚刚好经历

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

本文核心要点

本文会讲解到如何使用动画库中的基础类将动画添加到widget，何时使用AnimatedWidget与AnimatedBuilder来创建动画。Animation对象是Flutter动画库中的一个核心类，它生成指导动画的值。Animation对象知道动画的当前状态(例如，它是开始、停止还是向前或向后移动)，但它不知道屏幕上显示的内容。AnimationController管理Animation。CurvedAnimation 将过程抽象为一个非线性曲线.Tween在正在执行动画的对象所使用的数据范围之间生成值。例如，Tween可能会生成从红到蓝之间的色值，或者从0到255。使用Listeners和StatusListeners监听动画状态改变。Flutter中的动画系统基于Animation对象的，widget可以在build函数中读取Animation对象的当前值， 并且可以监听动画的状态改变。所以Animation是我们学习Flutter动画重中之重。

Animation介绍

在Flutter中，Animation对象本身和UI渲染没有任何关系。Animation是一个抽象类，它拥有其当前值和状态(完成或停止)。其中一个比较常用的Animation类是Animation。Flutter中的Animation对象是一个在一段时间内依次生成一个区间之间值的类。Animation对象的输出可以是线性的、曲线的、一个步进函数或者任何其他可以设计的映射。 根据Animation对象的控制方式，动画可以反向运行，甚至可以在中间切换方向。Animation还可以生成除double之外的其他类型值，如：Animation 或 Animation。Animation对象有状态。可以通过访问其value属性获取动画的当前值。Animation对象本身和UI渲染没有任何关系。

创建一个Animation对象

AnimationController是一个特殊的Animation对象，在屏幕刷新的每一帧，就会生成一个新的值。默认情况下，AnimationController在给定的时间段内会线性的生成从0.0到1.0的数字。 例如，下面代码创建一个Animation对象，但不会启动它运行：

final AnimationController controller = new AnimationController(    duration: const Duration(milliseconds: 2000), vsync: this);

AnimationController派生自Animation，因此可以在需要Animation对象的任何地方使用。 但是，AnimationController具有控制动画的其他方法。例如，.forward()方法可以启动动画。数字的产生与屏幕刷新有关，因此每秒钟通常会产生60个数字，在生成每个数字后，每个Animation对象调用添加的Listener对象。当创建一个AnimationController时，需要传递一个vsync参数，存在vsync时会防止屏幕外动画(译者语：动画的UI不在当前屏幕时)消耗不必要的资源。 通过将SingleTickerProviderStateMixin添加到类定义中，可以将stateful对象作为vsync的值。你可以在GitHub的animate1中看到这个例子 。

Flutter logo添加动画例子

import 'package:flutter/material.dart';class LogoApp extends StatefulWidget {  _LogoAppState createState() => new _LogoAppState();}class _LogoAppState extends State with SingleTickerProviderStateMixin {  Animation animation;  AnimationController controller;  initState() {    super.initState();    controller = new AnimationController(        duration: const Duration(milliseconds: 2000), vsync: this);    animation = new Tween(begin: 0.0, end: 300.0).animate(controller)      ..addListener(() {        setState(() {          // the state that has changed here is the animation object’s value        });      });    controller.forward();  }  Widget build(BuildContext context) {    return new Center(      child: new Container(        margin: new EdgeInsets.symmetric(vertical: 10.0),        height: animation.value,        width: animation.value,        child: new FlutterLogo(),      ),    );  }  dispose() {    controller.dispose();    super.dispose();  }}void main() {  runApp(new LogoApp());}

该addListener()函数调用了setState()，所以每次动画生成一个新的数字时，当前帧被标记为脏(dirty)，这会导致widget的build()方法再次被调用。 在build()中，改变container大小，因为它的高度和宽度现在使用的是animation.value。动画完成时释放控制器(调用dispose()方法)以防止内存泄漏。

总结

今天简单的介绍了Flutter当中动画，怎么创建动画，然后绘制了一个logo，然后给logo添加了动画。

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