【Flutter】Animation 动画 ( Flutter 动画的核心类 |
您所在的位置：网站首页 › animate渐变怎么调整方向 › 【Flutter】Animation 动画 ( Flutter 动画的核心类 |
|
0文章目录一、动画的核心类 Animation二、动画的核心类 CurvedAnimation三、动画的核心类 AnimationController四、动画的核心类 Tween五、相关资源一、动画的核心类 Animation Animation : Flutter 动画最核心的类 , 用于生成动画的中间过渡值 ; 组成 : Animation 动画由值和状态组成 ;动画值 : 该值就是动画的执行过程中计算的值 , 该值可能会按照某种曲线变化 , 也可能单调变化 ;动画状态 : 状态标记当前的动画的执行顺序 ( 从到到尾 / 从尾到头 ) ;监听 : 动画的执行过程中可以添加监听器 , 监听动画的执行状态 ;参考文档 : https://api.flutter.dev/flutter/animation/Animation-class.htmlAnimation 是抽象类 , 其 与 UI 组件没有产生直接联系 , 内部封装了当前值与状态 ; Animation 动画中的 Animation 对象 与 UI 渲染没有任何关系 ; Animation 可以在一个时间区间内 , 依次产生一个区间值 , 在时间为横轴 , 值为纵轴的坐标系中 , 时间-动画值的二维图像 可以是 线性直线 , 也可以是曲线 , 或其它映射 ; Animation 控制方式 : 根据设置的动画的控制方式 , 动画可以正向运行 , 从初始值到结束值 , 也可以反向运行 , 从结束值到初始值 ; Animation 生成值类型 : Animation 可以生成 Double 类型的值 ( Animation ) , 也可以生成 Color ( Animation ) , Size ( Animation ) 等类型的值 ; 二、动画的核心类 CurvedAnimationCurvedAnimation : 继承自 Animation , 可以将动画过程计算成一个非线性的过程 ; 主要作用 : 将曲线应用于另一个动画的动画 ; 参考文档 : https://api.flutter.dev/flutter/animation/CurvedAnimation-class.htmlCurvedAnimation 将动画制作成非线性的曲线动画 , 即 时间-动画值 的二维图像是曲线 ; 下面的代码是将 AnimationController 创建的线性动画 转为非线性的曲线动画的过程 ; 这里的线性 , 非线性指的是 在时间为横轴 , 值为纵轴的坐标系中 , 时间-动画值 的二维图像是直线还是曲线 ; final Animation animation = CurvedAnimation( parent: controller, curve: Curves.ease, );动画执行有两个方向 , 正向执行 ( 从初始值到结束值 ) , 反向执行 ( 从结束值到初始值 ) , 这两个方向可以各自设置不同的曲线 ; final Animation 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); } }三、动画的核心类 AnimationControllerAnimationController : 继承自 Animation , 用于 管理 Animation ; 参考文档 : https://api.flutter.dev/flutter/animation/AnimationController-class.htmlAnimationController 是动画控制器 ; AnimationController 功能 : 播放动画 : 正向 ( 从初始值到结束值 ) 播放动画 , 逆向 ( 从结束值到初始值 ) 播放动画 , 停止动画 ;设置动画值 : 给动画设置一个特定值 ;定义动画区间 : 定义动画值的最大值与最小值 , 如旋转角度定义为 0 ~ 360 ;物理引擎 : 使用物理引擎创建一个投掷动画 ;默认情况下 , AnimationController 在给定的动画时间内 , 生成 0.0 ~ 1.0 区间内的值 , 每当设备刷新新的画面帧时 , AnimationController 都会产生一个新值 , 一般情况下 FPS 值为 60 , 也就是画面每秒刷新 60 次 ; 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四、动画的核心类 TweenTween : 动画执行过程中计算出来的过渡值 ; 如旋转动画 , 计算出来的角度值是 0 ~ 360 ; 参考文档 : https://api.flutter.dev/flutter/animation/Tween-class.htmlTween 标识动画值的 开始值 和 结束值 之间的线性插值 ; 如果需要在指定的范围内差值 , 就必须使用 Tween ; 在动画中使用 Tween 对象 , 调用 Tween 对象的 animate 方法 , 将要修改的 Animation 动画传给该方法 ; 多个 Tween 对象链接 : 可以使用 chain 方法将多个 Tween 对象链接在一次 , 这样一个动画对象可以配置多个 Tween 对象 ; 这与调用 Tween 对象的 animate 方法多次效果是不同的 ; 创建一个由 AnimationController _controller 控制的动画 Animation , 有两种方式 : 方式一 : _animation = _controller.drive( Tween( begin: const Offset(100.0, 50.0), end: const Offset(200.0, 300.0), ), );方式二 : _animation = Tween( begin: const Offset(100.0, 50.0), end: const Offset(200.0, 300.0), ).animate(_controller);五、相关资源参考资料 : Flutter 官网 : https://flutter.dev/Flutter 插件下载地址 : https://pub.dev/packagesFlutter 开发文档 : https://flutter.cn/docs ( 强烈推荐 )官方 GitHub 地址 : https://github.com/flutterFlutter 中文社区 : https://flutter.cn/Flutter 实用教程 : https://flutter.cn/docs/cookbookFlutter 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/15989510Flutter 实战电子书 : 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 ( 本篇博客的源码快照 , 可以找到本博客的源码 ) |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |