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

持续创作,加速成长!这是我参与「日新计划 6 月更文挑战」的第 20 天,点击查看活动详情


前言

这是一套 张风捷特烈 出品的 Flutter&Flame 系列教程,发布于社区。如果你在其他平台看到本文,可以根据对于链接移步到中查看。因为文章可能会更新、修正,一切以文章版flutter有必要学吗本为准。本系列源码于 【toly_game】flutter框架 ,如果本系列对你有所帮助,希运动会加油稿望点赞支持,本系列文章一flutter翻译览:

  • 【Flutte源码编程器r&Flame 游戏 – 壹】开启新世界的大门
  • 【Flutter&Flame 游戏 – 贰】操纵杆与角色移动
  • 【Flutte动画片熊出没r&运动完多久可以洗澡Flame 游戏 – 叁】键盘事件与手势操作
  • 【Flutter&Flame动画大放映 游戏 – 肆】精灵图片加载方式
  • 【Flutter&Flame 游戏 – 伍】Canvas 参上 | 角色的血条
  • 【Flutter&Flame实例化servlet类异常 游戏 – 陆】暴击 Dash | 文字构件的使用
  • 【Flutter&Flame 游戏 – 柒】人随指动 | 动画点触与移动
  • 【Flutter&Flame 游戏 – 捌】装弹完毕 | 角色武器发射
  • 【Flutter&Flame 游戏 – 玖】探索构件 | Component 是什么
  • 【Flut运动会加油稿ter&Fflutter面试题lame 游戏 – 拾】探索构件 | Component 生命周期回调
  • 【Flutt实例化对象是什么意思er&Flame 游戏 – 拾壹】探索构件 | Component 使用细节
  • 【Flutter&amp实例化是什么意思;Flame 游戏 – 拾贰】探索构件 | 角色管理
  • 【Flutter&Flame 游戏 – 拾叁】碰撞检测 | CollisionCallbacks
  • 【Flutter&Flame 游戏 – 拾肆】碰撞检测 | 之前代码优化
  • 【Flutter&Flame 游戏 – 拾伍】粒子系实例化对象是什么意思统 | ParticleS实例化和初始化的区别ystemComponent
  • 【Flutter&Flame 游戏 – 拾陆】粒子系统 | 粒子的种类
  • 【Flutter&am动画片熊出没p;Flame 游戏 – 拾柒】构件特效 | 了解 Effect 体系
  • 【Flutter&Flameflutter开发的app有哪些 游戏 – 拾捌】构件特效 | Componen动画片汪汪队tEffect 一族
  • 【Flutter&Flame 游戏 – 拾玖】构件特效 | 了解 EffectController 体系
  • 【Flutter&Flame 游戏 – 贰拾】构件特效 | 其他 EffectContr源码交易平台ol源码网站er
  • 【Flutter&Flame 游戏 – 贰壹】视差组件 | Parall源码编辑器axComponen实例化t
  • 【Flutter&am运动健康p;Flame 游戏 – 贰贰】菜单、字体和浮层
  • 未完待续 ~

1. EffectController 及其衍生源码网站

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

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


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

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


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

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


E源码中的图片ffectController 衍生类目前有如下 14 个,主要分为两种:DurationEffectControll动画专业er 一族和直接继承自 Effect运动的好处Controller 的子类。这些控制器本质上和 Flutter 原生的 AnimationController 是类似的,都是对数值的进实例化一个对象可以使用什么命令行变换处理,从而让动画的变化效果。因为 Flame 在一个持续运转运动员Ticker 中,所以 EffectContr运动品牌oller 相比于原生而言是更加简单的,不需要考虑 Ticker 的创建、销毁等处理。

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

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


2、线性效果控制器: LinearEffectController

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

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

比如 LinearEffectController 中,每帧动画大放映pro动画片少儿小猪佩奇gress 属性是 运行时长 除以 动画时长 ,也就是动画专业说该进度值的变化是线性的。

【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);
}

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

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

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

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

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


4. 反向运动品牌控制器:ReverseLinearEffe动画电影ctController、ReverseCurvedE运动ffectController

这两个看着名字老长的,本质上就是进度值被 1 减下而已,也就是说,默认一开始是 100% ,然后逐渐变为 0 ,即反方动画。如下图所示,如动画电影果是 ReverseLinearEffectController ,动flutter是什么意思画开启运动时,角色将从 (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. 正弦曲线控制器运动会加油稿: Sin运动鞋eEffectCo运动世界校园ntroller

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

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

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

EffectController ctrl = SineEffectController(period: 2);

这有个不错的应用场flutter面试题景,可以结合 RepeatedEffectController 重复震动画片汪汪队荡,来达到抖动的效果,这在下一篇介绍 Repeat源码之家edEffectController 时再细说,效果如下所示:

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


6.噪音曲线控制器: No运动鞋iseEffectController

这里噪音曲线指的是在 0 附近随机震荡的的点,源码中通过 Si动画片汪汪队mplexNoise 对象进行转换动画片汪汪队。这个比较适合做一些随机震动的场景,flutter是什么意思比如抖动:

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

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

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

7.锯齿形曲线控制器:ZigzagEffectC运动鞋ontroller

这个flutter是什么意思控制器的变化是 0->1->0->-1->0,数值随时间的动画大放映变化呈 锯齿形 ,如下图所示:

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

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

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

EffectController ctrl = ZigzagEffectController(period: 2);

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

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


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

  • @张风捷特烈 2022.06.14 未允禁转
  • 我的 公众号: 编程之王
  • 我的 主页 : 张风捷特烈
  • 我的 B站主页 : 张风捷特烈
  • 我的 github 主页 : toly1994328

发表评论

提供最优质的资源集合

立即查看 了解详情