ngui tween 物品飞出特效
在本篇教程中,我将为大家详细介绍如何实现 NGUI Tween 物品飞出特效,希望对大家有所帮助。
步骤 1:添加基础 UI 元素
首先,我们需要添加 UI Root 到场景中,这是 NGUI 界面系统的基础。接着,为场景添加两个 Button,分别命名为 moveBack 和 moveFor(命名可以根据个人喜好),同时添加一个 Sprite。为 Sprite 指定 Atlas,这是因为后续的 UiDragsize 会用到其中的图片。添加完成后的场景布局大致如下:
步骤 2:为 Sprite 添加 Tween Position 组件
接下来,我们要为 Sprite 添加 Tween Position 组件,有两种添加方法:
- 方法一:具体操作方式如图所示(请根据实际情况添加相关操作的图片链接)。
- 方法二:右击 Sprite,选择
Tween->Tween Position。
添加完成后,我们来详细了解一下 Tween Position 脚本中的各个参数:
form:表示动画开始的坐标。to:表示动画结束的终点坐标。play style:有三种模式。once:动画只播放一次。loop:动画循环播放。ping pong:同样是循环播放,但它的播放方式类似于乒乓球运动,即来回播放。这种模式与loop的区别可能不太容易用文字描述清楚,建议大家亲自尝试一下这三种模式,以便更好地理解。curve:表示播放动画的曲线,通过设置不同的曲线可以使动画的运动效果更加丰富。duration:表示动画持续的时间,单位为秒。Tween Group:我在实际项目中没有使用过这个参数,暂时不太清楚它的具体用途。ignore TimeScale:该参数的作用是忽略TimeScale的影响,即无论TimeScale的值如何设置,动画都会按照正常的速度播放。
在初始阶段,我们先将这个脚本的勾选取消,这样动画就不会立即执行。从图中可以看到,我没有让代码马上执行。(请根据实际情况添加相关图片链接)
步骤 3:为 moveFor 按钮添加 onClick 事件
现在,我们要为 moveFor 按钮添加 onClick 发送事件,并为其添加 PlayForward 方法。添加方式如图所示(请根据实际情况添加相关操作的图片链接)。
需要注意的是,在以前的版本中,播放 Tween 动画使用的是 Play 方法。我目前做项目使用的是 3.5.5 版本(本教程使用的是 3.6.5 版本),之前也一直使用 Play 方法。但不知道从哪个版本开始,Play 方法被淘汰了,改为使用 PlayForward 方法。所以使用旧版本的开发者需要注意这一点。由于 NGUI 更新较快,我也不清楚具体是从哪个版本开始进行了这样的改动。
步骤 4:运行游戏查看效果
完成上述操作后,运行游戏,你就可以看到 Sprite 开始移动了。对于 Reverse 方法,它的作用是让动画反向播放。
再次运行游戏,当你点击 moveFor 按钮时,Sprite 会向你指定的 To 方向移动;当点击 moveBack 按钮时,Sprite 会返回原来的位置。
步骤 5:为 Sprite 添加缩放效果
下面,我们要为 Sprite 实现放大缩小的效果,也就是 resize。具体步骤如下:
- 在 Sprite 下添加一个小的 Sprite,并调整其位置,调整后的效果如图所示(请根据实际情况添加相关图片链接)。
- 为小 Sprite 添加一个脚本和
box Collider,box Collider的作用是检测鼠标是否点击了 Sprite。添加完成后,可以看到有个UIDrag组件。(请根据实际情况添加相关图片链接) - 将大的 Sprite 赋予给
Target,并选择pivot为BottomRight。运行游戏后,按住右下方小的 Sprite 并拖动,就可以看到大的 Sprite 实现放大缩小的效果了。
以上就是本次 NGUI Tween 物品飞出特效的全部教程内容,希望大家通过这个教程能够掌握相关的实现方法。今天的教程就到这里。