NGUI Clip Animation (UI动画)

本文介绍如何使用Unity结合NGUI和iTween实现MaskManager功能,通过控制不同的UIPanel展示图片的不同部分,支持平滑过渡效果,并可通过数字键切换不同的显示模式。



效果预览

视频:http://pan.baidu.com/s/1ntr3XSt

运行环境

Unity 4.5, NGUI3.5, iTween

场景搭建

创建一个UIPanel,UIPanel下再创建一个UISprite,UIPanel选择SoftClip,然后给Panel绑定上PanelController.cs,拷贝4份。结构如下图

  

MaskManager

给UIRoot绑定PanelController.cs,Targets绑定上面创建的四个Panel,点击Play ,按数字键 0,1,2,3,4 切换效果

image

MaskManager代码

using UnityEngine;
using System.Collections;
using System.Collections.Generic;

public class MaskManager : MonoBehaviour {
    public GameObject[] Targets;

    private List<PanelController> clipList;
    private float sw = 1024f;
    private float sh = 576f;

    // Use this for initialization
    void Start () {
        clipList = new List<PanelController>();
        foreach(var target in Targets) {
            clipList.Add(target.AddComponent<PanelController>());
        }

        Init();
    }
    
    // Update is called once per frame
    void Update () {
        if(Input.GetKeyDown(KeyCode.Alpha1)) {
            ShowFullImage(0);
        } else if(Input.GetKeyDown(KeyCode.Alpha2)) {
            ShowFullImage(1);
        } else if(Input.GetKeyDown(KeyCode.Alpha3)) {
            ShowFullImage(2);
        } else if(Input.GetKeyDown(KeyCode.Alpha4)) {
            ShowFullImage(3);
        } else if(Input.GetKeyDown(KeyCode.Alpha0)) {
            Init();
        }
    }

    void Init() {
        for(int i=0; i<clipList.Count; i++) {
            var size = new Vector2((sw / clipList.Count), sh);
            var offset = new Vector2(-sw * 0.5f + (i + 0.5f) * (sw / clipList.Count), 0f);
            clipList[i].UpdateOffset(offset);
            clipList[i].UpdateSize(size);
        }
    }

    void ShowFullImage(int id) {
        for(int i =0; i<clipList.Count; i++) {
            if(i != id) {
                clipList[i].SetDepth(i);
            } else {
                clipList[i].SetDepth(clipList.Count);
            }
        }
        clipList[id].UpdateOffset(new Vector2(0f, 0f));
        clipList[id].UpdateSize(new Vector2(sw, sh));
    }
}
using UnityEngine;
using System.Collections;

public class PanelController : MonoBehaviour {
    private UIPanel panel;
    static private float animTime = 0.6f;

    void Awake() {
        panel = GetComponent<UIPanel>();
    }

    // Use this for initialization
    void Start () {
    }

    // Update is called once per frame
    void Update () {
    
    }

    public void SetDepth(int depth) {
        panel.depth = depth;
    }

    public void UpdateSize(Vector2 size) {
        var current = new Vector2(panel.baseClipRegion.z, panel.baseClipRegion.w);
        iTween.ValueTo(gameObject, iTween.Hash("from", current, "to", size, "time", animTime, "onupdate", "OnUpdateSize"));
    }

    public void UpdateOffset(Vector2 offset) {
        iTween.ValueTo(gameObject, iTween.Hash("from", panel.clipOffset, "to", offset, "time", animTime, "onupdate", "OnUpdateOffset"));
    }
    
    private void OnUpdateSize(Vector2 size) {
        panel.baseClipRegion = new Vector4(0f, 0f, size.x, size.y);
    }

    private void OnUpdateOffset(Vector2 offset) {
        panel.clipOffset = offset;
    }
}

本文转自赵青青博客园博客,原文链接:http://www.cnblogs.com/zhaoqingqing/p/3878498.html,如需转载请自行联系原作者
### NGUI 中多个动画的控制与管理 在 NGUI 中实现多个动画的管理和控制可以通过多种方式完成,主要包括使用 `PlayTween` 组件以及脚本来协调不同动画之间的行为。以下是具体的方法: #### 1. 动画组件的基础配置 对于每一个需要播放的动画,在对象上添加 `UITweener` 或者 `Animation` 组件,并确保它们被正确初始化。如果使用的是精灵动画,则按照描述的方式创建并调整帧率和序列[^1]。 #### 2. 使用 PlayTween 控制单个动画 通过调用 `playForward()` 方法来启动指定的对象上的动画效果。为了保证每次都能从头开始播放,建议先调用 `resetToBeginning()` 来重置动画状态[^3]。 ```csharp // 示例代码:控制单一动画 public void StartSingleAnimation(GameObject targetObject, UITweener tweenComponent) { tweenComponent.ResetToBeginning(); // 将动画恢复到初始状态 tweenComponent.PlayForward(); // 开始正向播放动画 } ``` #### 3. 同步多个动画 当涉及到多组独立运行或者相互依赖关系紧密的动画时,可以借助事件监听机制或全局控制器统一调度这些动作的发生时间点及其参数变化情况。例如利用协程 (Coroutine),可以在一定延迟之后触发另一个关联的动作链路;又或者是基于特定条件判断动态改变当前正在展示的内容形式等等[^2]。 ```csharp // 示例代码:同步两个动画 IEnumerator SequentialAnimations(UITweener firstAnim, UITweener secondAnim) { firstAnim.ResetToBeginning(); firstAnim.PlayForward(); yield return new WaitForSeconds(firstAnim.duration); secondAnim.ResetToBeginning(); secondAnim.PlayForward(); } ``` #### 4. 高级技巧——组合复杂逻辑 更进一步地讲,还可以编写专门用于处理各种场景下所需的不同表现模式的功能模块类库文件夹结构设计思路如下图所示: - 定义接口定义公共方法签名; - 子类继承该基底类型从而扩展各自独有的特性功能集合体实例化过程中的传参列表项数量可变长度数组支持泛型约束限定范围内的任意数据类型的变量声明语句语法糖封装内部细节对外暴露简洁明了的操作入口函数原型说明文档撰写标准遵循团队编码规范要求定期审查维护版本迭代更新记录变更日志便于追踪溯源历史沿革脉络清晰可见一目了然易于理解学习成本低效率高产出成果质量稳定可靠值得信赖长期合作首选伙伴! ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值