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

2023-03-29 09:05:56 浏览数 (1)

0文章目录

  • 一、动画的核心类 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 创建的线性动画 转为非线性的曲线动画的过程 ; 这里的线性 , 非线性指的是 在时间为横轴 , 值为纵轴的坐标系中 , 时间-动画值 的二维图像是直线还是曲线 ;

代码语言：javascript复制
final Animation<double> animation = CurvedAnimation(
  parent: controller,
  curve: Curves.ease,
);

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

代码语言：javascript复制
final Animation<double> animation = CurvedAnimation(
  parent: controller,
  curve: Curves.easeIn,
  reverseCurve: Curves.easeOut,
);

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

代码语言：javascript复制
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 ~ 360 ;
  • 物理引擎 : 使用物理引擎创建一个投掷动画 ;

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

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

代码语言：javascript复制
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

四、动画的核心类 Tween

Tween : 动画执行过程中计算出来的过渡值 ; 如旋转动画 , 计算出来的角度值是 0 ~ 360 ;

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

Tween 标识动画值的 开始值 和 结束值 之间的线性插值 ;

如果需要在指定的范围内差值 , 就必须使用 Tween ;

在动画中使用 Tween 对象 , 调用 Tween 对象的 animate 方法 , 将要修改的 Animation 动画传给该方法 ;

多个 Tween 对象链接 : 可以使用 chain 方法将多个 Tween 对象链接在一次 , 这样一个动画对象可以配置多个 Tween 对象 ; 这与调用 Tween 对象的 animate 方法多次效果是不同的 ;

创建一个由 AnimationController _controller 控制的动画 Animation<Offset> , 有两种方式 :

方式一 :

代码语言：javascript复制
_animation = _controller.drive(
  Tween<Offset>(
    begin: const Offset(100.0, 50.0),
    end: const Offset(200.0, 300.0),
  ),
);

方式二 :

代码语言：javascript复制
_animation = Tween<Offset>(
  begin: const Offset(100.0, 50.0),
  end: const Offset(200.0, 300.0),
).animate(_controller);

五、相关资源

参考资料 :

  • Flutter 官网 : https://flutter.dev/
  • Flutter 插件下载地址 : https://pub.dev/packages
  • Flutter 开发文档 : https://flutter.cn/docs ( 强烈推荐 )
  • 官方 GitHub 地址 : https://github.com/flutter
  • Flutter 中文社区 : https://flutter.cn/
  • Flutter 实用教程 : https://flutter.cn/docs/cookbook
  • Flutter CodeLab : https://codelabs.flutter-io.cn/
  • Dart 中文文档 : https://dart.cn/
  • Dart 开发者官网 : https://api.dart.dev/
  • Flutter 中文网 : https://flutterchina.club/ , http://flutter.axuer.com/docs/
  • Flutter 相关问题 : https://flutterchina.club/faq/ ( 入门阶段推荐看一遍 )
  • GitHub 上的 Flutter 开源示例 : https://download.csdn.net/download/han1202012/15989510
  • Flutter 实战电子书 : https://book.flutterchina.club/chapter1/

重要的专题 :

  • Flutter 动画参考文档 : https://flutterchina.club/animations/

博客源码下载 :

  • GitHub 地址 : https://github.com/han1202012/flutter_image_widget ( 随博客进度一直更新 , 有可能没有本博客的源码 )
  • 博客源码快照 : https://download.csdn.net/download/han1202012/16083326 ( 本篇博客的源码快照 , 可以找到本博客的源码 )
flutter animation 博客 动画 对象

0 人点赞