unity3d 3D卡片滚动效果

本来上个月就改写的文章，但是因为这段时间受到国漫的影响，不停的刷《大圣归来》和《那年那兔那些事儿》两部动漫，以至于很长时间没有写什么新内容给各位看官啦，嘿嘿~~so，大家也应该晓得我是大圣哥哥的自来水啦！同时，我也是种花家一只热血沸腾的兔子！墙裂推荐《那兔》，这是一部很呆萌也很感人的动漫哦，让大家感受不一样的热血国漫！

好了，下面进入正文，今天为大家唠叨一下3D卡片滚动切换效果，首先按惯例，先上效果图：

设计思路：给每张图片设置编号，以编号为基础，根据一定的距离将所有图片分散到两边排开，每张图片的depth也根据此编号进行调整；每张卡片的移动效果都由NGUI自带的TweenPosition来实现；每次左右移动卡片都会重新设置卡片的编号，再根据新的编号移动到相应的位置，同时也要相对应的增减图片的depth。 

实施方案：

(1).    基本界面：两个左右移动的按钮，一个空物体RoleList，用于存放所有的卡片；单张卡片界面，背景图”Role”+被激活的高亮图”Active”+角色图片”Texture”，初始depth为0:1:2；添加文件夹 Resources/Pictures，将所有的角色图片放入此目录下；

(2).    单张卡片组件设置：为”Role”添加UIToggle组件，用于鼠标点击卡片时调用；创建并挂上脚本RoleItem，把变量Role、Active、Texture拖入相应位置，添加TweenPosition组件，Duration设置0.2，用于卡片移动效果，在OnFinished挂上RoleItem下的Finish()方法，当卡片移动完后更新移动的初始状态；设置完成后，将Role拖成预设至Resources文件夹下，

代码如下：

[code]csharpcode：

public class RoleItem : MonoBehaviour {    public UISprite bg;    public UISprite active;    public UITexture texture;    /// <summary>    /// tween完成后记录当前位置    /// </summary>    public void Finish()    {         TweenPosition tp = gameObject.GetComponent<TweenPosition>();        tp.from = gameObject.transform.localPosition;        tp.ResetToBeginning();    }}

(3).    编号排序：创建脚本SelectRole，将其拖入UIRoot下，然后开始码字吧。卡片的排列方式是以倒三角形的形式，最中间的卡片要显示在最前方，其他的卡片向其后两边散开，因此图片的深度要最大，排序的编号也就最大，排序方式按下图所示；

(4).    Depth调整：Sprite/Texture的Depth=卡片编号的绝对值*卡片组合数+初始Depth，例如编号为-4的Role的Depth为|-4|*3+0=12，Active的Depth为|-4|*3+1=13，Texture的Depth为|-4|*3+2=15；

(5).    位置排列：以编号为5的卡片为基础，编号为4的卡片x向右移动N*1个单位，编号为3的卡片x向右移动N*2个单位，然后依次类推，y、z坐标也是如此，代码如下：计算出移动后的坐标以后将新的坐标存入TweenPosition的To里边，然后再开启enable移动卡片；

[code]csharpcode：

/// <summary>    /// 设置深度及位置    /// </summary>    /// <param name="role"></param>    /// <param name="dir">方向：往左=1，往右=-1,初始化=0</param>    /// <param name="index">移动位置后新的编号</param>    private void SetDepthAndPosition(RoleItem role,int dir,int index)    {        int indexDepth = 0;        //非初始化状态，左右移动后，重新排序命名，        if (dir != 0)        {            //最中间位置的编号变化,右移：原-4变5；左移：原5变-4            if (index*dir > _half )                indexDepth = -dir * (_half - 1);            //左移或右移后超出位置的最后一张卡片的编号为原来的相反数            else                indexDepth = index > -1 && index < 1 ? dir : index;            role.name = indexDepth.ToString();          }                else        {            indexDepth = int.Parse(role.name);//初始化状态        }        //设置移动位置        TweenPosition tp = role.GetComponent<TweenPosition>();        int x = indexDepth < 0 ? -(_half + indexDepth) * _movX : (_half - indexDepth) * _movX;        indexDepth = System.Math.Abs(indexDepth);        tp.to = new Vector3(x, (_half - indexDepth) * _movY, (_half - indexDepth) * _movZ);        //设置图片层级        role.bg.depth = count * indexDepth;        role.active.depth = 1 + count * indexDepth;        role.texture.depth = 2 + count * indexDepth;                role.GetComponent<UIToggle>().value = indexDepth == _half ? true:false;        tp.PlayForward();    }

(6).    左右移动按钮：向左移动，所有编号+1，向右移动，所有编号-1，重新排序，代码如下：

[code]csharpcode：

/// <summary>    /// 左边    /// </summary>    public void LeftClick()    {        //重新排列顺序        foreach (RoleItem role in _roleList)        {            int index = int.Parse(role.name);             SetDepthAndPosition(role,1,++index);        }     }    /// <summary>    /// 右边    /// </summary>    public void RightClick()    {        //重新排列顺序        foreach (RoleItem role in _roleList)        {            int index = int.Parse(role.name);            SetDepthAndPosition(role,-1,--index);        }    }

(7).    卡片点击移动：其实就是调用N次左右移动的方法啦，代码如下：

[code]csharpcode：

/// <summary>    /// 鼠标选中某个角色    /// </summary>    public void RoleToggleChange()    {         if(UIToggle.current.value)        {            int index = int.Parse(UIToggle.current.name);            int moveCount = _half - System.Math.Abs(index);//移动个数            for (int i = 0; i < moveCount;i++ )            {                if (index > 0)                    LeftClick();                else                    RightClick();            }                   }    }

最后附上作品及源码地址：

http://pan.baidu.com/s/1i3gu4q5