flutter 动画展开菜单_教程：Flutter中的动画

最新推荐文章于 2024-08-13 08:40:19 发布

MICDEL

最新推荐文章于 2024-08-13 08:40:19 发布

阅读量645

点赞数

文章标签： flutter 动画展开菜单

本文链接：https://blog.csdn.net/weixin_26763955/article/details/113030758

版权

本文详细介绍了Flutter中动画的使用，包括Animation对象、AnimationController、CurvedAnimation、Tween等核心概念，以及如何通过监听器和状态监听来控制动画。通过5个逐步进阶的动画示例，展示了如何创建、管理和实现各种动画效果，如大小变化、透明度动画。同时，文中还提到了AnimatedWidget和AnimatedBuilder如何简化动画的实现。

摘要由CSDN通过智能技术生成

教程：Flutter中的动画

你会学到什么：

如何使用动画库中的基础类将动画添加到widget

何时使用AnimatedWidget与AnimatedBuilder.

本教程向您展示如何在Flutter中构建动画。在介绍动画库中的一些基本概念、类和方法之后，它会引导您完成5个动画示例，向您介绍动画库的不同内容。

基本的动画概念和类

重点是什么？

Animation对象是Flutter动画库中的一个核心类，它生成指导动画的值。

Animation对象知道动画的当前状态(例如，它是开始、停止还是向前或向后移动)，但它不知道屏幕上显示的内容。

AnimationController管理Animation。

CurvedAnimation 将过程抽象为一个非线性曲线.

Tween在正在执行动画的对象所使用的数据范围之间生成值。例如，Tween可能会生成从红到蓝之间的色值，或者从0到255。

使用Listeners和StatusListeners监听动画状态改变。

Flutter中的动画系统基于Animation对象的，widget可以在build函数中读取Animation对象的当前值，

并且可以监听动画的状态改变。

Animation

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

Flutter中的Animation对象是一个在一段时间内依次生成一个区间之间值的类。Animation对象的输出可以是线性的、曲线的、一个步进函数或者任何其他可以设计的映射。

根据Animation对象的控制方式，动画可以反向运行，甚至可以在中间切换方向。

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

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

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

CurvedAnimation

CurvedAnimation 将动画过程定义为一个非线性曲线.

final CurvedAnimation curve =

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

注:

Curves

类类定义了许多常用的曲线，也可以创建自己的，例如：

class ShakeCurve extends Curve {

@override

double transform(double t) {

return math.sin(t * math.PI * 2);

}

CurvedAnimation和AnimationController(在下一节中介绍)都是Animation类型。CurvedAnimation包装它正在修改的对象 - 您不需要子类AnimationController来实现曲线

AnimationController

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

例如，下面代码创建一个Animation对象，但不会启动它运行：

final AnimationController controller = new AnimationController(

duration: const Duration(milliseconds: 2000), vsync: this);

AnimationController派生自Animation，因此可以在需要Animation对象的任何地方使用。

但是，AnimationController具有控制动画的其他方法。例如，.forward()方法可以启动动画。数字的产生与屏幕刷新有关，因此每秒钟通常会产生60个数字，在生成每个数字后，每个Animation对象调用添加的Listener对象。

当创建一个AnimationController时，需要传递一个vsync参数，存在vsync时会防止屏幕外动画(译者语：动画的UI不在当前屏幕时)消耗不必要的资源。

通过将SingleTickerProviderStateMixin添加到类定义中，可以将stateful对象作为vsync的值。你可以在GitHub的animate1中看到这个例子。

译者语：vsync对象会绑定动画的定时器到一个可视的widget，所以当widget不显示时，动画定时器将会暂停，当widget再次显示时，动画定时器重新恢复执行，这样就可以避免动画相关UI不在当前屏幕时消耗资源。

如果要使用自定义的State对象作为vsync时，请包含TickerProviderStateMixin。

注意：

在某些情况下，值(position，值动画的当前值)可能会超出AnimationController的0.0-1.0的范围。例如，fling()函数允许您提供速度(velocity)、力量(force)、position(通过Force对象)。位置(position)可以是任何东西，因此可以在0.0到1.0范围之外。

CurvedAnimation生成的值也可以超出0.0到1.0的范围。根据选择的曲线，CurvedAnimation的输出可以具有比输入更大的范围。例如，Curves.elasticIn等弹性曲线会生成大于或小于默认范围的值。

Tween

默认情况下，AnimationController对象的范围从0.0到1.0。如果您需要不同的范围或不同的数据类型，则可以使用Tween来配置动画以生成不同的范围或数据类型的值。例如，以下示例，Tween生成从-200.0到0.0的值：

final Tween doubleTween = new Tween(begin: -200.0, end: 0.0);

Tween是一个无状态(stateless)对象，需要begin和end值。Tween的唯一职责就是定义从输入范围到输出范围的映射。输入范围通常为0.0到1.0，但这不是必须的。

Tween继承自Animatable，而不是继承自Animation。Animatable与Animation相似，不是必须输出double值。例如，ColorTween指定两种颜色之间的过渡。

final Tween colorTween =

new ColorTween(begin: Colors.transparent, end: Colors.black54);

Tween对象不存储任何状态。相反，它提供了evaluate(Animation animation)方法将映射函数应用于动画当前值。

Animation对象的当前值可以通过value()方法取到。evaluate函数还执行一些其它处理，例如分别确保在动画值为0.0和1.0时返回开始和结束状态。

Tween.animate