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)根据需求,调整下列几个属性即可 

 

  • 5
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值