美文网首页
Flutter动画

Flutter动画

作者: 最近不在 | 来源:发表于2018-08-07 16:35 被阅读136次

基本的动画概念和类

关键点

  • Animation是Flutter动画库中的核心类, 插入用于引导动画的值.
  • Animation知道当前动画的状态(比如, 是否开始, 暂停, 或继续或反转), 但是不关心屏幕显示的是什么.
  • AnimationController用于管理动画.
  • CurvedAnimation定义过程为非线性曲线.
  • Tween 定义了动画变化的区间. 比如从红色到蓝色, 或从0到255.
  • 使用Listeners和StatusListeners监听动画的状态改变.

Flutter中的动画系统基于Animation对象. 控件可以通过读取它们的当前值并监听它们的状态变化,直接将这些动画合并到它们的构建函数中,或者它们可以将动画作为更复杂的动画的基础,并将它们传递给其它控件。

Animation<double>

在Flutter中, 动画对象不关心屏幕显示的是什么. Animation是一个抽象类, 它知道当前的值和状态(完成或取消). 其中被广泛使用的动画类型是Animation<double>.

Animation在Flutter中是一个定义了在特定时间内2个值区间内变化的类. Animation的输出可能是线性, 也可能是曲线. 一个步骤函数, 或者任何其它你可以设计的映射. 根据动画对象的控制方式, 它可以反向运行,甚至可以在中间切换方向。

Animation也可以插入除double以外的类型, 比如Animation<Color>或Animation<Size>.

Animation拥有状态. 它当前的值可以通过成员.value获取.

Animation对象不关心 rendering或build()方法.

CurvedAnimation

CurvedAnimation定义过程为非线性曲线.

final CurvedAnimation curve =
    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<double>, 因此你可以把它们互相转换. CurvedAnimation包装了它正在修改的对象 - 你不需要子类化AnimationController来实现一条曲线.

AnimationController

AnimationController是一个特殊的动画对象, 每当硬件为一个新框架准备好时, 它就会产生一个新的值. 在默认情况下, 一个AnimationController在给定的时间内线性地产生0到1.0的数字。例如,这段代码创建一个动画对象, 但不启动它:

final AnimationController controller = AnimationController(
    duration: const Duration(milliseconds: 2000), vsync: this);

AnimationController继承自Animation<double>, 所以它可以在任何需要动画对象的地方使用。然而,AnimationController有额外的方法来控制动画. 例如,你可以使用.forward()方法启动一个动画. 数字的生成与屏幕刷新绑定在一起,所以通常每秒生成60个数字. 在生成每个数字之后, 每个动画对象都会调用附着的侦听器对象. 要为每个孩子创建一个自定义显示列表, 请参阅 RepaintBoundary.

在创建AnimationController时, 您可以传递一个vsync参数. vsync的存在阻止了屏幕动画使用不必要的资源. 您可以通过在类定义中加入单点的SingleTickerProviderStateMixin来使用有状态对象作为vsync. 你可以在GitHub上看到一个这样的例子animate1.

注意: 在某些情况下, 一个位置可能会超过AnimationController的0.0-1.0范围。例如, fling()函数允许您提供速度, 力和位置(通过Force对象). 这个位置可以是任何东西, 所以可以在0到1.0范围之外。
一个曲率动画也可以超过0到1.0的范围, 即使动画控制器没有. 根据所选择的曲线, 曲率动画的输出可以比输入的范围更广. 例如, 弹性曲线, 如曲线, 弹性值将明显超过或低于默认值.

Tween

默认情况下, AnimationController对象的范围从0到0. 如果您需要一个不同的范围或不同的数据类型, 您可以使用补间来配置一个动画,以便将其插入到不同的范围或数据类型中. 例如, 下面的补间从-200.0到0.0范围.

final Tween doubleTween = Tween<double>(begin: -200.0, end: 0.0);

Tween是一个无状态的对象, 它只接受开始和结束. Tween的唯一工作是定义一个从输入范围到输出范围的映射. 输入范围通常是0到1.0, 但这不是必需的.

Tween继承自Animatable<T>, 而不是Animation<T>. Animatable就像Animation,不是必须输出double. 例如, ColorTween指定了两种颜色之间的变化.

final Tween colorTween =
    ColorTween(begin: Colors.transparent, end: Colors.black54);

Tween是一个无状态的对象, 它只接受开始和结束. Tween的唯一工作是定义一个渐变对象不存储任何状态. 相反, 它提供了将映射函数应用到动画当前值的'evaluate(Animation<double> animation)'方法。动画对象的当前值可以在.value方法中找到. evaluate方法也做一些内部处理,例如确保在动画值分别为0.0和1.0时返回开始和结束。

Tween.animate
使用Tween对象, 必须调用'animate()', 并且传递controller对象. 比如, 下面的代码实现了数字在500ms内从0到255变化的过程.

final AnimationController controller = AnimationController(
    duration: const Duration(milliseconds: 500), vsync: this);
Animation<int> alpha = IntTween(begin: 0, end: 255).animate(controller);

注意'animate()'返回的是Animation对象而不是Animatable对象.

下面的代码演示了controller, curve, Tween:

final AnimationController controller = AnimationController(
    duration: const Duration(milliseconds: 500), vsync: this);
final Animation curve =
    CurvedAnimation(parent: controller, curve: Curves.easeOut);
Animation<int> alpha = IntTween(begin: 0, end: 255).animate(curve);

Animation notifications

一个Animation对象可以通过addListener()addStatusListner()拥有Listeners和 StatusListener回调. 当值有任何变化时, Listener都会被回调. 最常规的做法就是在回掉里调用setState()让UI重建. StatusListener会在动画开始, 结束, 前进, 或反转时被调用.

相关文章

  • Flutter 动画效果

    在动画方面 Flutter 提供了 Animation 类提供使用。 动画 Flutter 中创建动画,请创建名为...

  • Flutter动画animation

    参考 动画 flutter中动画抽象 划重点 Flutter 中的动画系统基于Animation对象,widget...

  • Flutter中的动画

    Flutter中的动画 Flutter中的动画 https://flutterchina.club/tutoria...

  • Flutter从入门到写出完整App Day12

    20.3.27 Flutter实现动画 Flutter有自己的渲染闭环 一. 动画API认识 1. Animati...

  • Flutter轮播图

    前端开发当中最有意思的就是实现动画特效,Flutter提供的各种动画组件可以方便实现各种动画效果。Flutter中...

  • 深入理解Flutter动画原理

    基于Flutter 1.5,从源码视角来深入剖析flutter动画原理,相关源码目录见文末附录 一、概述 动画效果...

  • Flutter动画: Animation动画基础(一)

    我的博客 要使用Flutter中动画, 首先要熟悉Flutter的动画基础概念和相关类。 Animation:Fl...

  • Flutter - 创建拍手动画

    在本文中,我们将从头开始探索Flutter动画。我们将通过在Flutter中创建拍手动画的模型来学习关于动画的一些...

  • Flutter开发之帧动画

    最近写了一些flutter的小动画,在这里也写几个篇章介绍下flutter的动画的实现,先实现个简单的帧动画,举例...

  • Flutter:一个简单的动画实现原理浅析

    Flutter 动画 本文主要介绍 Flutter 动画相关的内容,对相关的知识点进行了梳理,并从实际例子出发,进...

网友评论

      本文标题:Flutter动画

      本文链接:https://www.haomeiwen.com/subject/heeavftx.html