NGUI第五课--添加Tween效果，UIDragSize用法

1. 场景基础设置

首先，我们需要在场景中添加 UI Root，接着为场景添加两个 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：同样是循环播放，但它的播放方式类似于打乒乓球，即往返播放。由于这种模式较难用文字准确描述，建议大家逐个尝试以获得更清晰的理解。
• curve：表示播放动画的曲线，可用于控制动画的速度变化。
• duration：表示动画持续的时间。
• Tween Group：目前我尚未使用过该参数，暂不清楚其具体用途。
• ignore 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 实现 resize 效果

下面我们要为 Sprite 实现放大缩小的效果。具体步骤如下：

• 首先，在 Sprite 下添加一个小的 Sprite，并调整其位置。
• 然后，为小 Sprite 添加一个脚本和 box Collider，用于检测鼠标是否点击 Sprite。
• 可以看到有一个 UIDrag 组件。将大的 Sprite 赋予给 Target，并选择 pivot 为 BottomRight。运行游戏后，按住右下方小的 Sprite 并拖动，就可以看到大的 Sprite 实现放大缩小的效果了。