NGUI Clip Animation (UI动画)

简介:



效果预览

视频: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,如需转载请自行联系原作者
相关文章
|
XML JSON 缓存
让UI忙碌的安卓Lottie动画渲染库(二)
上节我们讲述了Lottie开源库如何导入Android Studio但是,开源库是不断迭代的,所以我们也要及时更新
473 0
|
6月前
|
JavaScript
Vue框架Element UI教程-出现和隐藏动画(三)
Vue框架Element UI教程-出现和隐藏动画(三)
53 0
|
9月前
|
XML Java 数据格式
HarmonyOS学习路之开发篇—Java UI框架(动画开发)
动画开发 动画是组件的基础特性之一,精心设计的动画使UI变化更直观,有助于改进应用程序的外观并改善用户体验。Java UI框架提供了帧动画、数值动画和属性动画,并提供了将多个动画同时操作的动画集合。
|
11月前
|
定位技术 API 图形学
unity-2D游戏官方案例--带视频案例(1)(层级渲染,物理碰撞,粒子动画,UI等多位基础一体化)
unity-2D游戏官方案例--带视频案例(1)(层级渲染,物理碰撞,粒子动画,UI等多位基础一体化)
136 1
|
XML Java API
高级UI系列(三): 自定义UI动画篇
高级UI系列(三): 自定义UI动画篇
99 0
高级UI系列(三): 自定义UI动画篇
|
XML JSON 前端开发
让UI忙碌的安卓Lottie动画渲染库(一)
今天工作时突然在项目xml布局看到了一个完全不认识的控件,一开始以为是自定义View之类的:
273 0
|
图形学
Unity 编辑器开发实战【Custom Editor】- 为UI视图制作动画编辑器
Unity 编辑器开发实战【Custom Editor】- 为UI视图制作动画编辑器
201 1
Unity 编辑器开发实战【Custom Editor】- 为UI视图制作动画编辑器
|
Web App开发 存储 前端开发
SAP UI的加载动画效果和幽灵设计(Ghost Design)
这是Jerry 2021年的第 14 篇文章,也是汪子熙公众号总共第 285 篇原创文章。 在本篇文章之前,Jerry 印象最深的幽灵,应该要算《星际争霸I》里人族能够隐形的空中单位 Wraith( 幽灵战机 ),以及能施放核弹的 Ghost( 幽灵特工).
114 0
SAP UI的加载动画效果和幽灵设计(Ghost Design)
|
JavaScript
SAP UI5页面动画效果的实现,实际借用了jQuery的库文件
Created by Wang, Jerry, last modified on Nov 02, 2015
87 0
SAP UI5页面动画效果的实现,实际借用了jQuery的库文件

热门文章

最新文章