第4章　可视化编程工具Bolt-4.5 操作实例2：技能冷却UI动画制作

第4章可视化编程工具Bolt

4.5操作实例2：技能冷却UI动画制作

.目录.1UI构建解析.2使用Bolt实现冷却动画

技能冷却UI动画是游戏中常见的一种效果，如图所示，当某种条件达成后，就以一定的速度在UI图标上展现一个顺时针或者逆时针的图片阴影旋转消失动画。本节通过实现该功能来演示Bolt关于UI的操作方法。（1）

UI的具体功能决定了它的层次结构。本例中技能冷却UI的表现形式是：鼠标指针划入图标时，图标四周出现一个提示框；鼠标指针划出图标时，提示框消失；鼠标单击图标，出现技能冷却UI动画。技能冷却图标的各种状态，如图所示。1.

UI构建解析

鼠标指针划出状态

鼠标指针划入状态

技能冷却状态（2）因为有这样的状态变化，所以这个UI需要3张图，一张是正常的图标，一张是边框图，还有一张是覆盖在图标上的黑色图。其中边框图和黑色图都是具有Alpha通道的带透明度的图片。技能冷却图标的层级结构如图所示。在默认的正常状态下，将“BorderImage”和“BufferImage”2张图片都先隐藏起来。1.

UI构建解析

（1）在正常状态的物体上，也就是在上页图中的“IconImage”物体上，添加FlowMachine组件，单击“New”按钮，新建一个Macro。单击“EditGraph”按钮打开FlowMachine的编辑窗口。2.

使用Bolt实现冷却动画（2）添加Events类里的OnPointerEnter和OnPointerExit功能模块，以获取鼠标指针划入事件和鼠标指针划出事件。与它们对接的都是SetActive模块，利用“Value”属性的不同赋值，实现对“BorderImage”物体，也就是边框图片的隐藏或显示。提示框的功能实现如图所示。2.

使用Bolt实现冷却动画（3）要实现UI图片阴影旋转消失的技能冷却效果，需要先修改UI的Image组件属性。单击层级结构中的“BufferImage”物体，按图所示，对Image组件进行修改。其中，“ImageType”属性改为“Filled”，“FillMethod”属性选择“Radial360”，这样图片就是以图片中心为原点，采用360°旋转的形式进行填充。配合设置“FillAmount”属性的数值，就能决定填充的范围。1代表360°，全部填充；0代表0°，全部无填充。下面主要介绍通过Bolt来修改“FillAmount”属性。2.

使用Bolt实现冷却动画（4）根据前面说明的操作过程，先总结出技能冷却操作的流程。实现技能冷却效果的流程图如图所示。2.

使用Bolt实现冷却动画（5）仔细观察上页的流程图，会发现鼠标单击事件的发生是瞬间的，而图片填充属性“FillAmount”的减少是一个会持续一段时间的过程，每一帧都将“FillAmount”减去上一帧的时间间隔“Time.DeltaTime”，而一帧的时间间隔是一个很小的数字。2.

使用Bolt实现冷却动画（6）在逻辑上，一个瞬间发生的事件只能触发一个过程的开始，但不能维持一个过程的持续。要维持一个持续过程，需要另外定义一个布尔类型的变量来作为中间沟通的桥梁。假设这个变量名称为“isStart”，则修改后的流程变为两个部分，修改后的实现技能冷却效果的流程图，如下页图所示。鼠标单击事件只影响布尔类型变量isStart的值，而isStart变量决定了图片填充属性“FillAmount”是否开始变化，并维持变化的过程，直到“FillAmount”属性小于等于0，这个过程才结束。2.

使用Bolt实现冷却动画2.

使用Bolt实现冷却动画（7）依照修改后的流程图，首先需要添加一个自定义变量isStart，如图所示，“Value”复选框没有勾选，说明其初始值设定为False。这个变量可以是全局的，也可以是局部的。本例将其放在层级结构中的“IconImage”物体上，作为局部变量使用。2.

使用Bolt实现冷却动画（8）鼠标单击改变isStart变量，并将“BufferImage”物体显示出，鼠标单击事件驱动改变变量和物体显示状态如图所示。OnPointerDown模块获取鼠标单击事件，调用SetVariable模块将isStart变量赋值为由Boolean模块提供的True值，并将isStart赋值给SetActive模块的“Value”属性，从而将“BufferImage”物体设置为显示状态。2.

使用Bolt实现冷却动画（9）最后实现“BufferImage”的冷却动画。为了方便处理且减少逻辑模块的使用，这一步骤中不使用前面创建的FlowGraph，而是在“BufferImage”物体上新建一个FlowGraph。完成后的冷却动画逻辑结构如下页图所示。1号框里采用Update和GetVariable模块，每一帧都判断isStart变量是否为True，如果为True，就执行3号框里的SetFillAmount模块来设定“BufferImage”的“FillAmount”属性，设定的值由2号框里的GetFillA