14-flutter Animation 动画

动画

一 Animation

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

Flutter中的Animation对象是一个在一段时间内依次生成一个区间之间值的类。Animation对象的输出可以是线性的、曲线的、一个步进函数或者任何其他可以设计的映射。 根据Animation对象的控制方式，动画可以反向运行，甚至可以在中间切换方向。

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

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

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

二 CurvedAnimation

是Animation的一个子类，将过程抽象为一个非线性的曲线

三 AnimationController

AnimationController 是Animation的一个子类，用来管理Animation

AnimationController是一个特殊的Animation对象，在屏幕刷新的每一帧，就会生成一个新的值。默认情况下，AnimationController在给定的时间段内会线性的生成从0.0到1.0的数字。

四 Tween

在正在执行的动画的对象所使用的数据范围生成值。Tween是一个无状态(stateless)对象，需要begin和end值。Tween的唯一职责就是定义从输入范围到输出范围的映射。输入范围通常为0.0到1.0，但这不是必须的。

import 'dart:io';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter/animation.dart';
import 'dart:convert';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: Text("Hello OK"),),
        body: MyForm(),
      ),
      );
  }
}

class MyForm extends StatefulWidget{
    MyForm({Key key}) : super(key:key);
    @override
    _MyFormState createState() =>  _MyFormState();        
}
// with是dart的关键字，意思是混入的意思，就是说可以将一个或者多个类的功能添加到自己的类无需继承这些类，避免多重继承导致的问题
class _MyFormState extends State<MyForm> with SingleTickerProviderStateMixin {

    //该对象管理着animation对象
    AnimationController animationController;
    // 该对象是当前动画的状态，例如动画是否开始，停止，前进，后退。但是绘制再屏幕上的内容不知道
    Animation<double> animation;

    @override
    void initState() {
      super.initState();
      animationController = new AnimationController(duration: const Duration(seconds: 2),vsync: this);
      //  curve 曲线是定义动画的动作,也就说动画是非线性运动
      animation = new CurvedAnimation(parent: animationController,curve: Curves.fastLinearToSlowEaseIn);
      // 添加监听器
      animation.addListener((){
          // 当动画之变化的时候调用这个方法
          this.setState((){
              print("changed");
          });
      });

      // 只显示动画一次
      // animationController.forward();
      // 重复不断的效果 
      animationController.repeat();
    }

    // 销毁操作
    @override
    void dispose(){
      super.dispose();
      animationController.dispose();
    }

    @override
    Widget build(BuildContext context) {
      return Container(
          child: new Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new Container(                  
                  color: Colors.red,
                  height: 50.0,
                  width: 100,// animation.value的值是0到1，*100是具体的大小
                  
                )
              ],
          ),          
      );
         
        
 

    }

}