NGUI的图片轮播类似英雄联盟选皮肤的小DEMO

周末 无事 看了 一英雄联盟的那个选择皮肤的 轮播图片 觉得 原理很简单 就像实现下
1，在边角放几张层叠的图片，暂且叫图片堆吧，尽量让它有3d的层次感
2，点击最上面的一张，堆顶图片一边移动到中间，一边放大（同时将整个场景背景设置成这个图片，好看点就把透明度50%），
3，剩余的图片依次向堆顶移动一个图片位置，
4，再点击堆顶图是，当前图片一边缩小，位移到堆底部，
本来想放个效果的奈何用的美女素材太太，GIF出来超过2m,这里就贴下代码，后面资源下载吧

这里贴下布局

说明： 本来是我点击一张 有动画的效果 ，一张上来 一张下去的，这里GIf要保证在2m以内 只能这样了

Itempicture.cs 这个是逻辑上的图片 类 将一张图片的移动，动画，position等一些属性封装在里面，然后我只需要一个管理类 管理 我点击的那张图执行自己的行为就好了

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

namespace Tiem20170305
{
    //独立的皮肤  实现 初始化  动画 
    class ItemPicture
    {
        private GameObject m_selfGo;
        private Vector3 m_originPosition;

        public GameObject SelfGO { get { return this.m_selfGo; } }

        public ItemPicture()
        {
            m_selfGo = GameObject.Instantiate(Resources.Load<GameObject>("prefabs/item"));
            m_selfGo.transform.SetParent(GameObject.Find("Group").transform);
            m_selfGo.transform.localScale = Vector3.one;
            m_selfGo.transform.localPosition = Vector3.one;
        }

        public void SetDeepth(int i)
        {
            m_selfGo.transform.GetComponent<UISprite>().depth = i;
            m_selfGo.transform.GetChild(0).GetComponent<UITexture>().depth = i;
            Texture t = Resources.Load<Texture>("Texture/" + i);
            m_selfGo.transform.GetChild(0).GetComponent<UITexture>().mainTexture = t;
            m_selfGo.transform.localPosition = new Vector3(i*100,i*-100,0);
            m_originPosition = m_selfGo.transform.localPosition;
        }

        public void RetSetPosition(int i)
        {
            m_selfGo.transform.GetComponent<UISprite>().depth = i;
            m_selfGo.transform.GetChild(0).GetComponent<UITexture>().depth = i;
            m_selfGo.transform.localPosition = new Vector3(i * 100, i * -100, 0);
        }

        public void DoAnima()
        {
            AnimationScale(true);
            AnimationPositionMidle();
        }

        public void DoAnimaBack()
        {
            AnimationScale(false);
            AnimationPositionMidle(false);
        }

        private void AnimationScale(bool isScale)
        {
            m_selfGo.transform.localRotation = Quaternion.identity;
            TweenScale tS = m_selfGo.GetComponent<TweenScale>() == null
                ? m_selfGo.AddComponent<TweenScale>()
                : m_selfGo.GetComponent<TweenScale>();
            if (isScale)
            {
                tS.from = Vector3.one;
                tS.to = new Vector3(4f, 5f, 1);
                tS.duration = 1f;
            }
            else 
            {
                tS.to = Vector3.one;
                tS.from = new Vector3(4f, 5f, 1);
                tS.duration = 0.5f;
            }
            tS.PlayForward();
            tS.SetOnFinished(delegate() { GameObject.Destroy(m_selfGo.GetComponent<TweenScale>()); });
        }

        private void AnimationPositionMidle(bool isGO = true)
        {
            TweenPosition tS = m_selfGo.GetComponent<TweenPosition>() == null 
                ? m_selfGo.AddComponent<TweenPosition>() 
                : m_selfGo.GetComponent<TweenPosition>();
            tS.from = m_selfGo.transform.localPosition;
            if (isGO)
            {
                tS.from = m_selfGo.transform.localPosition;
                tS.to = new Vector3(5746, 79f, 1);
                tS.duration = 1f;
            }
            else
            {
                tS.from = new Vector3(5746, 79f, 1);
                tS.to = m_originPosition;
                tS.duration =0.5f;
            }
            tS.PlayForward();
            tS.SetOnFinished(delegate() { GameObject.Destroy(m_selfGo.GetComponent<TweenPosition>()); });
        }
    }
}

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

public class picturecontorl : MonoBehaviour {
    private GameObject m_currentSelectPicture;        //当前选择的GameObject  这个是为了响应鼠标选择了那个UI
    private ItemPicture m_lastItem = null;          //上个点击的图片
    private ItemPicture m_currentItem;              //当前点击的图片
    private List<ItemPicture> m_list = new List<ItemPicture>();   //图片集合
    public GameObject bg;                           //场景的背景
    // Use this for initialization
    void Start () {
        //初始化5张图
        for (int i = 0; i < 5; i++)
        {
            m_list.Add(new ItemPicture());
            m_list[i].SetDeepth(i+1);
        }
        //StartCoroutine("Anima");
    }

    // Update is called once per frame
    void Update () {
        //判断鼠标点击了那个Gameobject
       if(Input.GetMouseButtonDown(0))
       {
           if (FindInList(m_currentSelectPicture) != null)
           {
               m_currentItem = FindInList(m_currentSelectPicture);
               bg.GetComponent<UITexture>().mainTexture = m_currentItem.SelfGO.transform.GetChild(0).GetComponent<UITexture>().mainTexture;
               //下面的是 处理将堆顶 图片 放在list的最后面 ，这里 写的很low，要吃饭了所以懒得优化  我的致命
               m_list.Remove(m_currentItem);
               List<ItemPicture> newList = new List<ItemPicture>();
               newList.Add(m_currentItem);
               newList.AddRange(m_list);
               m_list.Clear();
               m_list = newList;
               for (int i = 0; i < m_list.Count; i++)
               {
                   //重新设置位置
                   m_list[i].RetSetPosition(i);
               }

               if (m_lastItem != null)
               {
                   m_lastItem.DoAnimaBack();
               }
               //执行张开动画
               m_currentItem.DoAnima();
               m_lastItem = m_currentItem;
               m_currentItem = null;
           }
       }
    }

    /// <summary>
    /// 根据GameObject找到逻辑上的图片
    /// </summary>
    /// <param name="go"></param>
    /// <returns></returns>
    private ItemPicture FindInList(GameObject go)
    {
        for (int i = 0; i < m_list.Count; i++)
        {
            if (go.Equals(m_list[i].SelfGO))
                return m_list[i];
        }
        return null;
    }


    IEnumerator Anima()
    {
        yield return new WaitForSeconds(3f);
        m_list[4].DoAnima();
    }
}