Unity图片轮播图功能实现

通过Unity+CurvedUI实现轮播效果,思路是将几张UI图按照较准确的位置放在空物体(作为父物体)下方,通过旋转父物体实现图片的旋转。

一、UI构建

简单构建UI结构,注意使用一个空物体作为几张轮播图的父级(记得Reset),大体结构如下:

二、CurvedUI实现UI的弯曲 

1)导入CurvedUI(收费的插件,就不提供,使用其他弯曲UI的插件都可以),添加下面的组件并根据需求调整Angle。

2)在父物体中添加下列代码,如下图:

using UnityEngine.UI;

public class uiCon1 : MonoBehaviour
{
    public bool DevLeft = true;
    public float multiply = 20f;
    public bool isRestriction = true;
    public float boundary = 5f;
    private float dis = 0f;
    private float curPos;
    private float lastPos;
    private bool isMove;
    private float defTime = 0f;
    public float minDis = 5f;
    private Vector3 oriPos;
    // Start is called before the first frame update
    void Start()
    {
        dis = 0f;
        defTime = 0f;
        isMove = false;
        DevLeft = true;
        oriPos = this.GetComponent<Transform>().position;
    }

    // Update is called once per frame
    void Update()
    {
        if (Input.GetMouseButtonDown(0))
        {
            curPos = Input.mousePosition.x;
            isMove = true;
        }
        if (Input.GetMouseButtonUp(0))
        {
            isMove = false;
        }
        if (isMove)
        {
            if (Time.time - defTime >= 0.1f)
            {
                defTime = Time.time;
                if (Mathf.Abs(Input.mousePosition.x - curPos)>= minDis)
                {
                    lastPos = Input.mousePosition.x;
                    dis = (lastPos - curPos) / Mathf.Abs(lastPos - curPos);
                    this.transform.eulerAngles += new Vector3(0, ((DevLeft)?(-1f):1f)*multiply*dis, 0);
                    curPos = lastPos;
                }
            }

        }
        if (isRestriction)
        {
            RectTransform[] movePos = this.transform.GetComponentsInChildren<RectTransform>(true);
            foreach (var item in movePos)
            {
                if (item.position.z > (oriPos.z + boundary)) item.gameObject.SetActive(false);
                else item.gameObject.SetActive(true);
            }
        }
    }
}

3)根据需求,调整下列几个属性即可 

猜你喜欢

转载自blog.csdn.net/qq_38602613/article/details/127497850
今日推荐