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文件夹下，







代码如下：

csharpcode：

[code]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移动卡片；

csharpcode：

[code]/// <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，重新排序，代码如下：

csharpcode：

[code]/// <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次左右移动的方法啦，代码如下：

csharpcode：

[code]/// <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