ngui tween 物品飞出特效

2015年02月02日 13:31 0 点赞 0 评论 更新于 2025-11-21 15:58

在本篇教程中,我将为大家详细介绍如何实现 NGUI Tween 物品飞出特效,希望对大家有所帮助。

步骤 1:添加基础 UI 元素

首先,我们需要添加 UI Root 到场景中,这是 NGUI 界面系统的基础。接着,为场景添加两个 Button,分别命名为 moveBackmoveFor(命名可以根据个人喜好),同时添加一个 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。具体步骤如下:

  1. 在 Sprite 下添加一个小的 Sprite,并调整其位置,调整后的效果如图所示(请根据实际情况添加相关图片链接)。
  2. 为小 Sprite 添加一个脚本和 box Colliderbox Collider 的作用是检测鼠标是否点击了 Sprite。添加完成后,可以看到有个 UIDrag 组件。(请根据实际情况添加相关图片链接)
  3. 将大的 Sprite 赋予给 Target,并选择 pivotBottomRight。运行游戏后,按住右下方小的 Sprite 并拖动,就可以看到大的 Sprite 实现放大缩小的效果了。

以上就是本次 NGUI Tween 物品飞出特效的全部教程内容,希望大家通过这个教程能够掌握相关的实现方法。今天的教程就到这里。

作者信息

feifeila

feifeila

共发布了 3994 篇文章