UGUI案例篇第(三)节：UGUI实现3D轮转图效果

(一)  3D轮转图效果展示

   在我们制作一些场景选关或者是做一些选择类似的UI时，我们会觉得想制作一种3D效果的选择方式，3D轮转图往往就是最恰当的一种,下面我将会介绍3D轮转图的具体原理及实现：

---

(二)  3D轮转图实现

实现原理

    利用父物体生成子物体选项，子物体利用x轴上的间距和 最中心靠前的物体最大显示(缩放最大)，两侧物体逐渐变小(缩放逐渐变小)的原理制造视觉差，从而形成3D效果，之后利用DragHandler事件制作拖动旋转即可，

原理1. 关于3D轮转图的Item的Position讲解（图片放大后观看）：

3D图讲解

排好Position的2D图显示

原理2： 关于3D轮转图的Item的Scale讲解（图片放大后进行观看）：
3D图讲解

排好scale和position的2D图显示：

实现步骤

  这里只讲一些原理步骤，代码都在github上，自行下载学习观看！！！

（1）创造子Item物体：创建你需要的选择item物体们，直接在父物体下写这个2D模拟3D轮转图的脚本即可，可以选择公开子物体属性，例如：item间距，缩放最大最小值，数量，对应的sprite，size。

（2） Item坐标缩放分配：原理在上面已经讲过，按照上面的缩放，坐标分配原理，对item的anchorPosition，localscale进行赋值，之和就能得到不能拖动的轮转图基本样子。

        /// <summary>
        /// 得到x轴坐标
        /// </summary>
        /// <param name="radio">周长占比系数</param>
        /// <param name="length">周长</param>
        /// <returns></returns>
        private float GetX(float radio,float length)
        {
            if(radio>1||radio<0)
            {
                Debug.LogError("当前比例必须是0-1的值");
                return 0;
            }

            if(radio>=0&&radio<=0.25f)
            {
                return radio * length;
            }
            else if(radio>0.25f&&radio<0.75f)
            {
                return (0.5f - radio) * length;
            }
            else
            {
                return (radio-1) * length;
            }
        }
        /// <summary>
        /// 得到缩放系数
        /// </summary>
        /// <param name="radio">周长占比系数</param>
        /// <param name="max">缩放最大值</param>
        /// <param name="min">缩放最小值</param>
        /// <returns></returns>
        private float GetScaleTimes(float radio,float max,float min)
        {
            if (radio > 1 || radio < 0)
            {
                Debug.LogError("当前比例必须是0-1的值");
                return 0;
            }
            float scalePercent = (max - min) / 0.5f;
            if(radio==0||radio==1)
            {
                return 1;
            }
            else if(radio>0&&radio<=0.5f)
            {
                return (1-radio) * scalePercent;
            }
            else
            {
                return radio * scalePercent;
            }

        }

    }

（3） 层级分配：我们发现后面的图片会进行遮挡第一张图片的显示，这是因为image的层级问题，我们采用的为自然层级解决这个问题，利用transform.SetSiblingIndex(order) 设置子物体在父物体下的角标，角标越大越后渲染，显示在最前方。

自然层级：即生成在父物体下的子物体排在前面的先渲染，后面的后渲染，后渲染的会进行遮挡先渲染的image，因此我们就是改变子物体在父物体下的先后排序问题。




（4） 拖动Item实现：子物体实现IDragHandler与IDragEndHandler，之和利用累加的 offsetX += eventData.delta.x
判断拖动结束后offsetX的正负，正即向右拖动，之后将全部item的信息全部替换为相邻右边的image的信息，在改变缩放和position可以选用dotween进行完成，比较适合ui动画。

（5） 完成效果展示：

---

(三) 项目工程链接地址(GitHub)

求github小星星哈，谢谢啦?
3DRotationDiagram项目工程链接(https://github.com/HanxianshengGame/3DRotationDiagram)

参考 scene Example 3与Script Example3 进行学习：

--------------------------------------------------------我是有底线的-------------------------------------------------------------

    感谢能够观看博客的各位Unity开发爱好者们，有问题发表评论呐，★,°:.☆(￣▽￣)/$:.°★ 。