【Flutter】Animation 动画 ( Flutter 动画的核心类 | Animation | CurvedAnimation | AnimationController | Tween )（一）

文章目录

一、动画的核心类 Animation

二、动画的核心类 CurvedAnimation

三、动画的核心类 AnimationController

四、动画的核心类 Tween

五、相关资源

一、动画的核心类 Animation

Animation : Flutter 动画最核心的类 , 用于生成动画的中间过渡值 ;

组成 : Animation 动画由值和状态组成 ;

动画值 : 该值就是动画的执行过程中计算的值 , 该值可能会按照某种曲线变化 , 也可能单调变化 ;

动画状态 : 状态标记当前的动画的执行顺序 ( 从到到尾 / 从尾到头 ) ;

监听 : 动画的执行过程中可以添加监听器 , 监听动画的执行状态 ;

参考文档 : https://api.flutter.dev/flutter/animation/Animation-class.html

Animation 是抽象类 , 其 与 UI 组件没有产生直接联系 , 内部封装了当前值与状态 ;

Animation 动画中的 Animation 对象 与 UI 渲染没有任何关系 ;

Animation 可以在一个时间区间内 , 依次产生一个区间值 , 在时间为横轴 , 值为纵轴的坐标系中 , 时间-动画值的二维图像 可以是 线性直线 , 也可以是曲线 , 或其它映射 ;

Animation 控制方式 : 根据设置的动画的控制方式 , 动画可以正向运行 , 从初始值到结束值 , 也可以反向运行 , 从结束值到初始值 ;

Animation 生成值类型 : Animation 可以生成 Double 类型的值 ( Animation<double> ) , 也可以生成 Color ( Animation<Color> ) , Size ( Animation<Size> ) 等类型的值 ;

二、动画的核心类 CurvedAnimation

CurvedAnimation : 继承自 Animation , 可以将动画过程计算成一个非线性的过程 ;

主要作用 : 将曲线应用于另一个动画的动画 ;

参考文档 : https://api.flutter.dev/flutter/animation/CurvedAnimation-class.html

CurvedAnimation 将动画制作成非线性的曲线动画 , 即 时间-动画值 的二维图像是曲线 ;

下面的代码是将 AnimationController 创建的线性动画 转为非线性的曲线动画的过程 ; 这里的线性 , 非线性指的是 在时间为横轴 , 值为纵轴的坐标系中 , 时间-动画值 的二维图像是直线还是曲线 ;

final Animation<double> animation = CurvedAnimation(
  parent: controller,
  curve: Curves.ease,
);

动画执行有两个方向 , 正向执行 ( 从初始值到结束值 ) , 反向执行 ( 从结束值到初始值 ) , 这两个方向可以各自设置不同的曲线 ;

final Animation<double> animation = CurvedAnimation(
  parent: controller,
  curve: Curves.easeIn,
  reverseCurve: Curves.easeOut,
);

自定义曲线 : 根据正弦函数以及传入的参数值生成的曲线动画值 ;

class SinCurve extends Curve {
  @override
  double transform(double t) {
    return math.sin(t * math.PI * 2);
  }
}

三、动画的核心类 AnimationController

AnimationController : 继承自 Animation , 用于 管理 Animation ;

参考文档 : https://api.flutter.dev/flutter/animation/AnimationController-class.html

AnimationController 是动画控制器 ;

AnimationController 功能 :

播放动画 : 正向 ( 从初始值到结束值 ) 播放动画 , 逆向 ( 从结束值到初始值 ) 播放动画 , 停止动画 ;

设置动画值 : 给动画设置一个特定值 ;

定义动画区间 : 定义动画值的最大值与最小值 , 如旋转角度定义为 0 00 ~ 360 360360 ;

物理引擎 : 使用物理引擎创建一个投掷动画 ;

默认情况下 , AnimationController 在给定的动画时间内 , 生成 0.0 0.00.0 ~ 1.0 1.01.0 区间内的值 , 每当设备刷新新的画面帧时 , AnimationController 都会产生一个新值 , 一般情况下 FPS 值为 60 6060 , 也就是画面每秒刷新 60 6060 次 ;

AnimationController 构造函数 : 每个字段的作用都在下面的注释中 ;

AnimationController(
  {double? value, /// 动画的初始值
  Duration? duration, /// 动画正向播放持续时间
  Duration? reverseDuration, /// 动画逆序播放持续时间
  String? debugLabel, /// 调试期间标识动画的标志
  double lowerBound: 0.0, /// 动画最小值
  double upperBound: 1.0, /// 动画最大值 
  AnimationBehavior animationBehavior: AnimationBehavior.normal,
  /// 上下文的 TickerProvider , 用于防止屏幕外的动画消耗不必要的资源 , 
  /// 一般将 StatefulWidget 作为 vsync 值
  required TickerProvider vsync} 
)

AnimationController 常用方法 :

启动动画 : forward({double? from}) → TickerFuture

逆序播放 : reverse({double? from}) → TickerFuture

重置动画 : reset() → void

停止动画 : stop({bool canceled: true}) → void