Flutter动画: Animation动画基础(一)

我的博客

要使用Flutter中动画, 首先要熟悉Flutter的动画基础概念和相关类。

• Animation：Flutter中动画的核心类。
• AnimationController：动画管理类。
• Tween：补间对象，用于计算动画使用的数据范围之间的插值。
• Listeners和StatusListeners：用于监听动画状态改变。
• CurvedAnimation：用于定义非线性曲线动画 。

简单点说, 熟悉了上面几个术语和用法, 就基本入门了Flutter的动画基础. 但是没有一定使用经验, 上面的术语其实很抽象. Flutter的官方文档其实讲解的非常详细, 具体参见: [Flutter中的动画]

先做个例子

我们还是做一个例子来说明其简单用法.

import 'package:flutter/material.dart';

class NormalAnimationDemo extends StatefulWidget {
  @override
  _NormalAnimationDemoState createState() => _NormalAnimationDemoState();
}

class _NormalAnimationDemoState extends State<NormalAnimationDemo>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;
  Duration _duration = Duration(milliseconds: 1000);

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: _duration)
      ..addListener(() {
        // 用于实时更新_animation.value
        setState(() {});
      })
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          // 监听动画完成的状态 The animation is stopped at the end
          _controller.reverse();
        }
        if (status == AnimationStatus.dismissed) {
          // 监听动画结束的状态 The animation is stopped at the beginning
          _controller.forward();
        }
      });
    _animation = CurvedAnimation(parent: _controller, curve: Curves.fastOutSlowIn);
    _animation = Tween<double>(begin: 0.0, end: 1.0).animate(_animation);
    _controller.forward();
  }

  @override
  void dispose() {
    _controller?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('动画Demo')),
      body: Center(
        child: Container(
          width: 100 * (1 + _animation.value),
          height: 100 * (1 + _animation.value),
          child: Image.asset('assets/images/head.jpg'),
        ),
      ),
    );
  }
}

动画效果如下:

normal_animation

总结一下:

这个简单的例子用到了Animation, AnimationController,CurvedAnimation和Tween的概念, 还对动画的过程进行了监控.

Animation

在Flutter中，Animation对象本身和UI渲染没有任何关系。Animation是一个抽象类，它拥有其当前值和状态（完成或停止）。其中一个比较常用的Animation类是Animation<double>。

Flutter中的Animation对象是一个在一段时间内依次生成一个区间之间值的类。Animation对象的输出可以是线性的、曲线的、一个步进函数或者任何其他可以设计的映射。

根据Animation对象的控制方式，动画可以反向运行，甚至可以在中间切换方向。

Animation还可以生成除double之外的其他类型值，如：Animation<Color> 或 Animation<Size>。

Animation对象有状态。可以通过访问其value属性获取动画的当前值。

Animation对象本身和UI渲染没有任何关系。

AnimationController

AnimationController派生自Animation<double>，因此可以在需要Animation对象的任何地方使用。 但是，AnimationController具有控制动画的其他方法。例如，.forward()方法可以启动动画。

数字的产生与屏幕刷新有关，因此每秒钟通常会产生60个数字，在生成每个数字后，每个Animation对象调用添加的Listener对象。

当创建一个AnimationController时，需要传递一个vsync参数，存在vsync时会防止屏幕外动画（译者语：动画的UI不在当前屏幕时）消耗不必要的资源。 通过将SingleTickerProviderStateMixin添加到类定义中，可以将stateful对象作为vsync的值。

CurvedAnimation

CurvedAnimation 将动画过程定义为一个非线性曲线. 有许多种系统预制的曲线, 可以通过Curves.获取。一般来说, 默认的都是线性(Curves.linear)。

Tween

默认情况下，AnimationController对象的范围从0.0到1.0。如果您需要不同的范围或不同的数据类型，则可以使用Tween来配置动画以生成不同的范围或数据类型的值。

例如，以下示例，Tween生成从-200.0到0.0的值：

final Tween doubleTween = Tween(begin: -200.0, end: 0.0);

Tween是一个无状态(stateless)对象，需要begin和end值。Tween的唯一职责就是定义从输入范围到输出范围的映射。输入范围通常为0.0到1.0，但这不是必须的。

Tween继承自Animatable<T>，而不是继承自Animation<T>。

Animatable与Animation相似，不是必须输出double值。例如，ColorTween指定两种颜色之间的过渡。

final Tween colorTween = ColorTween(begin: Colors.transparent, end: Colors.black54);

Tween对象不存储任何状态。相反，它提供了evaluate(Animation animation)方法将映射函数应用于动画当前值。 Animation对象的当前值可以通过value()方法取到。evaluate函数还执行一些其它处理，例如分别确保在动画值为0.0和1.0时返回开始和结束状态。

Tween.animate 要使用Tween对象，请调用其animate()方法，传入一个控制器对象。

例如，以下代码在500毫秒内生成从0到255的整数值。

final AnimationController controller = AnimationController( duration: const Duration(milliseconds: 500), vsync: this);
Animation alpha = IntTween(begin: 0, end: 255).animate(controller);

注意animate()返回的是一个Animation，而不是一个Animatable。

监听

一个Animation对象可以拥有Listeners和StatusListeners监听器，可以用addListener()和addStatusListener()来添加。 只要动画的值发生变化，就会调用监听器。

一个Listener最常见的行为是调用setState()来触发UI重建。 上面的例子就用于实时更新animation.value的值。

..addListener(() {
        // 用于实时更新_animation.value
        setState(() {});
      })

动画完成、结束、向前移动或向后移动（如AnimationStatus所定义）时会调用StatusListener。上面的例子就监听了动画完成(AnimationStatus.completed)和结束(AnimationStatus.dismissed)的状态, 同时根据其状态发出了Reverse和Forward命令。

..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          // 监听动画完成的状态 The animation is stopped at the end
          _controller.reverse();
        }
        if (status == AnimationStatus.dismissed) {
          // 监听动画结束的状态 The animation is stopped at the beginning
          _controller.forward();
        }
      })

至此, 一个简单的动画过程就完成了。