likes
comments
collection
share

【Flutter&Flame游戏 - 拾玖】构件特效 | 了解 EffectController 体系

作者站长头像
站长
· 阅读数 27

前言

第一季完结,谢谢支持 ~


1. EffectController 及其衍生类

Effect 类中,持有一个 EffectController 对象,并在构造方法中被初始化。也就是说,任何 Effect 在构造时,都必须指定 EffectController 对象。

【Flutter&Flame游戏 - 拾玖】构件特效 |  了解 EffectController 体系


如下是 EffectController 类的定义,首先它是一个抽象类,其中维护了一些动画相关的 get 属性,包括动画时长 duration 、进度 progress 、动画是否已开启 started 、 动画是否已结束 completed 等。以及四个应用控制动画的抽象方法:

【Flutter&Flame游戏 - 拾玖】构件特效 |  了解 EffectController 体系


它作为抽象类,是无法直接作为运行时对象被实例化的,必定有其实现类对功能进行具体实现。在 effects/controllers 包中,有着很多不同功能的 EffectController

【Flutter&Flame游戏 - 拾玖】构件特效 |  了解 EffectController 体系


EffectController 衍生类目前有如下 14 个,主要分为两种:DurationEffectController 一族和直接继承自 EffectController 的子类。这些控制器本质上和 Flutter 原生的 AnimationController 是类似的,都是对数值的进行变换处理,从而让动画的变化效果。因为 Flame 在一个持续运转的 Ticker 中,所以 EffectController 相比于原生而言是更加简单的,不需要考虑 Ticker 的创建、销毁等处理。

【Flutter&Flame游戏 - 拾玖】构件特效 |  了解 EffectController 体系

根据名称也基本上能猜个大概功能。比如 DelayedEffectController 可以让动画延时播放、InfiniteEffectController 可以让动画无限时长、RepeatedEffectController 可以让动画重复播放、CurvedEffectController 可以支持变化曲线等。


2、线性效果控制器: LinearEffectController

如果看过 《Flutter 动画探索 - 流光幻影》,那么你对动画控制器的插值一定不会陌生。我们都知道 Ticker 每次触发回调的时间间隔基本恒定,其中每次触发被称为 1 帧 。如果某个量的属性在每一帧中都增加固定的值,在连续变化的过程中,该属性就会呈现一个 线性的 变化效果:

【Flutter&Flame游戏 - 拾玖】构件特效 |  了解 EffectController 体系

比如 LinearEffectController 中,每帧的 progress 属性是 运行时长 除以 总时长 ,也就是说该进度值的变化是线性的。

【Flutter&Flame游戏 - 拾玖】构件特效 |  了解 EffectController 体系

如下,使用 LinearEffectController 让角色在 2s 内向上平移 100 ,可见运动的位移变化是均匀的。

【Flutter&Flame游戏 - 拾玖】构件特效 |  了解 EffectController 体系

void linearEffectController(){
  EffectController ctrl = LinearEffectController(2);
  Effect effect = MoveByEffect(
    Vector2(0, -100),
    ctrl,
  );
  player.add(effect);
}

3. 曲线效果控制器:CurvedEffectController

曲线指的是在每次更新时,对属性值的变化量附加的变换效果。比如下面是附件 Curves.ease 的曲线变换,如果把属性值对应到小球的高度只,就可以通过该曲线变换实现开始运动快,后面逐渐减慢的效果。

【Flutter&Flame游戏 - 拾玖】构件特效 |  了解 EffectController 体系

如下, CurvedEffectController 中可以指定一个 Curve 对象,用于转换。这样角色在进行位移动画时就可以有速度变换的效果:

【Flutter&Flame游戏 - 拾玖】构件特效 |  了解 EffectController 体系

void curvedEffectController(){
  EffectController ctrl = CurvedEffectController(2,Curves.ease);
  Effect effect = MoveByEffect(
    Vector2(0, -100),
    ctrl,
  );
  player.add(effect);
}

简单瞄一下源码,可以看出 CurvedEffectController 中做的事,就是通过 Curve 对象的 transform 方法,对进度进行变换而已:

【Flutter&Flame游戏 - 拾玖】构件特效 |  了解 EffectController 体系

Curves.ease 是一个静态的 Cubic 对象,它的 transform 方法,就是按照三次贝塞尔曲线方程,对入参进行变换。也就是说,你可以通过 Cubic 对象,自定义任何的三次贝塞尔曲线,让速度按照该曲线进行。其中四个入参分别代表三次贝塞尔曲线的两个控制点坐标,另外起始坐标为 (0,0) ,终止坐标为 (1,1)

static const Cubic ease = Cubic(0.25, 0.1, 0.25, 1.0);

【Flutter&Flame游戏 - 拾玖】构件特效 |  了解 EffectController 体系


4. 反向控制器:ReverseLinearEffectController、ReverseCurvedEffectController

这两个看着名字老长的,本质上就是进度值被 1 减下而已,也就是说,默认一开始是 100% ,然后逐渐变为 0 ,即反方动画。如下图所示,如果是 ReverseLinearEffectController ,动画开启时,角色将从 (0,-100) 点向下匀速运动:

【Flutter&Flame游戏 - 拾玖】构件特效 |  了解 EffectController 体系

【Flutter&Flame游戏 - 拾玖】构件特效 |  了解 EffectController 体系

EffectController ctrl = ReverseLinearEffectController(2);

对于 ReverseCurvedEffectController 来说也一样, Curve 对象的 transform 方法转换的对象,也是被 1 减的进度。对应于图像来上,相当于反走曲线,所以对于 Curves.ease 来说,会产生先慢后快的效果。

【Flutter&Flame游戏 - 拾玖】构件特效 |  了解 EffectController 体系

【Flutter&Flame游戏 - 拾玖】构件特效 |  了解 EffectController 体系

EffectController ctrl = ReverseCurvedEffectController(2,Curves.ease);

5. 正弦曲线控制器: SineEffectController

这个也非常好理解, Cubic 是通过三次贝塞尔曲线,对数值进行变换;那这里就是通过正弦函数对数值进行变换。这点在源码中很容易被证实,可以看出在 period 时长下,属性值会完成 0~2pi 的正弦函数变换,效果如下图:

【Flutter&Flame游戏 - 拾玖】构件特效 |  了解 EffectController 体系

【Flutter&Flame游戏 - 拾玖】构件特效 |  了解 EffectController 体系

EffectController ctrl = SineEffectController(period: 2);

这有个不错的应用场景,可以结合 RepeatedEffectController 重复震荡,来达到抖动的效果,这在下一篇介绍 RepeatedEffectController 时再细说,效果如下所示:

【Flutter&Flame游戏 - 拾玖】构件特效 |  了解 EffectController 体系


6.噪音曲线控制器: NoiseEffectController

这里噪音曲线指的是在 0 附近随机震荡的的点,源码中通过 SimplexNoise 对象进行转换。这个比较适合做一些随机震动的场景,比如抖动:

【Flutter&Flame游戏 - 拾玖】构件特效 |  了解 EffectController 体系

【Flutter&Flame游戏 - 拾玖】构件特效 |  了解 EffectController 体系

EffectController ctrl = NoiseEffectController(frequency: 30,duration: 1);

7.锯齿形曲线控制器:ZigzagEffectController

这个控制器的变化是 0->1->0->-1->0,数值随时间的变化呈 锯齿形 ,如下图所示:

【Flutter&Flame游戏 - 拾玖】构件特效 |  了解 EffectController 体系

对应到角色的位移上,就是均匀的震荡,如下图所示:

【Flutter&Flame游戏 - 拾玖】构件特效 |  了解 EffectController 体系

EffectController ctrl = ZigzagEffectController(period: 2);

最后 PauseEffectController 的进度数值不会随时间进行任何变换,也就是说这个动画效果是不会动的效果。感觉使用场景非常优先,本身也非常简单,了解一下即可:

【Flutter&Flame游戏 - 拾玖】构件特效 |  了解 EffectController 体系


通过本文,我们认识了 8DurationEffectController 一族的效果控制器。总的来看,这一族非常简单,就是利用不同的函数对进度数值进行转换而已,本身没有什么难点。通过这些控制器,就可以让动画不那么 “死板” ,可以让运动的速度产生变化,以及进行周期性的震荡。下一篇将继续通过小案例介绍其他的控制器,那本文就到这里,明天见 ~

\

转载自:https://juejin.cn/post/7108927950044528670
评论
请登录