Flutter学习之旅（四）Flutter动画（1）动画基础介绍

前言

本篇将介绍Flutter中动画。首先来看下Flutter的动画基础概念和相关类

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

1. Animation介绍

Flutter中的动画核心类，我们可以理解为Animation是Flutter中动画的基类。它是个抽象类（abstract），所以不能够直接创建其对象来使用动画。Animation对象可以在设定的动画执行时间内生成在两个值之间生成插值数。Animation对象的输出可以是线性，非线性。

一种常用的动画类型是Animation，当然还有可能是double之外的其数据类型，例如Animation 或Animation 。

2. CurvedAnimation非线性动画

CurvedAnimation继承Animation，构建其对象的方式是：

CurvedAnimation curve = CurvedAnimation(parent: controller, curve: Curves.easeIn);

构造函数中传入控制器和要执行的曲线方式。这里不做过多的介绍。

3. AnimationController动画管理类

AnimationController是一个特殊的Animation对象。其继承自Animation ，因此可以在需要Animation对象的任何地方使用它。默认情况下，AnimationController在给定的持续时间内线性生成从0.0到1.0的值。

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

上述是AnimationController 对象的创建方式，构造函数第一个参数是动画执行的时间，第二个vsync传入是防止动画离屏之后继续消耗资源。AnimationController 提供了几个常用的方法。

<!--开始动画，从开始值向结束值-->
TickerFuture forward({ double from }) {}

<!--开始反向运行此动画-->
TickerFuture reverse({ double from }) {}

<!--开始执行动画，结束后重新启动-->
TickerFuture repeat({ double min, double max, Duration period }) {}

<!--使用阻尼效果驱动动画-->
TickerFuture fling({ double velocity: 1.0 }) {}

<!--停止动画-->
void stop({ bool canceled: true }) {}

<!--释放此对象使用的资源,此方法调用后不再控制器对象不再可用-->
void dispose() {}

4. Tween补间值生成类

AnimationController对象的范围为0.0到1.0。如果需要不同的范围或不同的数据类型，可以使用Tween将动画配置为插入到不同的范围或数据类型。例如，以下Tween从0.0变为500.0：

Tween doubleTween = Tween<double>(begin: 0.0, end: 500.0);

构造函数传入只需要传入begin和end两个值，当然这里不一定只是double值。

5. Listeners和StatusListeners动画监听

Animation对象可以有Listeners和StatusListeners，用addListener()和addStatusListener()。只要动画的值发生变化，就会调用监听器。我们通常可用调用setState() 以将动画重置状态。动画开始，结束，前进或后退时调用StatusListener，下列是Flutter提供动画的监听方法。


<!--动画添加监听-->
void addListener(VoidCallback listener);

<!--动画移除监听-->
void removeListener(VoidCallback listener);

<!--动画状态添加监听-->
void addStatusListener(AnimationStatusListener listener);

<!--动画状态移除监听-->  
void removeStatusListener(AnimationStatusListener listener);

动画状态如下：


<!--动画状态-->
enum AnimationStatus {

  <!--动画在开始时停止-->   
  dismissed,

  <!--动画从开始状态执行到结束状态-->
  forward,

 <!--动画反向执行，从结束状态执行到开始状态-->
  reverse,

 <!--动画执行完成-->
  completed,

}

OK，下面来看个简单的Flutter动画Demo。

import 'package:flutter/animation.dart';
import 'package:flutter/material.dart';

class MyApp extends StatefulWidget {
  _AnimationApp createState() => new _AnimationApp();
}

class _AnimationApp extends State<MyApp> with SingleTickerProviderStateMixin {

  Animation<double> tween;
  AnimationController controller;

  /*初始化状态*/
  initState() {
    super.initState();

    /*创建动画控制类对象*/
    controller = new AnimationController(
        duration: const Duration(milliseconds: 2000),
        vsync: this);

    /*创建补间对象*/
    tween = new Tween(begin: 0.0, end: 1.0)
        .animate(controller)    //返回Animation对象
      ..addListener(() {        //添加监听
        setState(() {
          print(tween.value);   //打印补间插值
        });
      });
    controller.forward();       //执行动画
  }


  Widget build(BuildContext context) {
    return new GestureDetector(
        onTap: () {
          startAnimtaion();         //点击文本 重新执行动画
        },

        child: new Center(
            child: new Text(
              "Flutter Animation(一)",
              style: TextStyle(fontSize: 20 * controller.value),   //更改文本字体大小
            )
        ));
  }

  startAnimtaion() {
    setState(() {
      controller.forward(from: 0.0);
    });
  }

  dispose() {

    //销毁控制器对象
    controller.dispose();
    super.dispose();
  }
}

void main() {
  runApp(new MaterialApp(
    home: new MyApp(),
  ));
}

这里写图片描述

打印出的部分补间插值如上图所示，系统自动计算0.0-1.0之间在2s内的线性插值。

动画效果图（制作软件太low）：

这里写图片描述

Flutter学习之旅（四）Flutter动画（1）动画基础介绍

猜你喜欢