Unity 制作图片轮播功能

功能：自动播放移动首尾相接鼠标移到图片上时移动停止并该图片变大鼠标离开图片恢复原形轮播效果继续

效果如下

界面布局大体是这个样子

scrollView就是一个底板带Image组件

Viewport负责遮罩带Mask组件

然后content前期布局使用了Group组件不过项目需求图片尺寸要变化所以之后关闭

子类Image是一张张图片

初版轮播上代码

using UnityEngine;
using System.Collections;
using UnityEngine.EventSystems;
using UnityEngine.Events;
using System.Collections.Generic;

/**
 *两个背景图片平移 
 */
public class BackgroundController : MonoBehaviour
{
    public GameObject back1;
    public GameObject back2;
    public int speed = 1;                       //背景平移的速度
    public Transform endPosition;       //到达该位置,把背景移动到开始位置
    public Transform startPosition;      //背景从开始位置移动到结束位置

   
    //是否移动
    private bool isMove = true;
    void Update()
    {
        if (isMove == true)
        {
            //两个图片的平移
            back1.transform.position = new Vector3(back1.transform.position.x - speed * Time.deltaTime, back1.transform.position.y, back1.transform.position.z);
            back2.transform.position = new Vector3(back2.transform.position.x - speed * Time.deltaTime, back2.transform.position.y, back2.transform.position.z);
            //到达结束位置,回到开始位置,切换图片
            if (back1.transform.position.x <= endPosition.transform.position.x)
            {
                back1.transform.position = startPosition.transform.position;
            }
            if (back2.transform.position.x <= endPosition.transform.position.x)
            {
                back2.transform.position = startPosition.transform.position;
            }
        }
    }
}

这一步是两个底板首尾相连 update里一起运动检测到达目标点更换到尾部位置初步轮播效果实现

下一步上代码（完整版）

using UnityEngine;
using System.Collections;
using UnityEngine.EventSystems;
using UnityEngine.Events;
using System.Collections.Generic;

/**
 *两个背景图片平移 
 */
public class BackgroundController : MonoBehaviour
{
    public GameObject back1;
    public GameObject back2;
    public int speed = 1;                       //背景平移的速度
    public Transform endPosition;       //到达该位置,把背景移动到开始位置
    public Transform startPosition;      //背景从开始位置移动到结束位置

    private GameObject[] ContentChilders = new GameObject[14];
    void Start()
    {
        //进入检测添加
        UnityAction<BaseEventData> click = new UnityAction<BaseEventData>(OnPointerEnter);
        EventTrigger.Entry myclick = new EventTrigger.Entry();
        myclick.eventID = EventTriggerType.PointerEnter;
        myclick.callback.AddListener(click);
        //移出检测添加
        UnityAction<BaseEventData> click1 = new UnityAction<BaseEventData>(OnPointerExit);
        EventTrigger.Entry myclick1 = new EventTrigger.Entry();
        myclick1.eventID = EventTriggerType.PointerExit;
        myclick1.callback.AddListener(click1);
        int i = 0;
        foreach (Transform childer in back1.transform)
        {
            ContentChilders[i] = childer.gameObject;
            EventTrigger trigger = ContentChilders[i].AddComponent<EventTrigger>();
            trigger.triggers.Add(myclick);
            trigger.triggers.Add(myclick1);
            i++;
        }
        foreach (Transform childer in back2.transform)
        {
            ContentChilders[i] = childer.gameObject;
            EventTrigger trigger = ContentChilders[i].AddComponent<EventTrigger>();
            trigger.triggers.Add(myclick);
            trigger.triggers.Add(myclick1);
            i++;
        }
    }
    private RectTransform selObject;
    private void OnPointerEnter(BaseEventData arg0)
    {
        isMove = false;
        PointerEventData P_EveDat = arg0 as PointerEventData;
        selObject = P_EveDat.pointerCurrentRaycast.gameObject.transform as RectTransform;
        selObject.sizeDelta = new Vector2(200, 200);
    }

    private void OnPointerExit(BaseEventData arg0)
    {
        isMove = true;
        selObject.sizeDelta = new Vector2(160, 160);
    }

    //是否移动
    private bool isMove = true;
    void Update()
    {
        if (isMove == true)
        {
            //两个图片的平移
            back1.transform.position = new Vector3(back1.transform.position.x - speed * Time.deltaTime, back1.transform.position.y, back1.transform.position.z);
            back2.transform.position = new Vector3(back2.transform.position.x - speed * Time.deltaTime, back2.transform.position.y, back2.transform.position.z);
            //到达结束位置,回到开始位置,切换图片
            if (back1.transform.position.x <= endPosition.transform.position.x)
            {
                back1.transform.position = startPosition.transform.position;
            }
            if (back2.transform.position.x <= endPosition.transform.position.x)
            {
                back2.transform.position = startPosition.transform.position;
            }
        }
    }
}

首先 foreach 获取两个组里的所有图片子类然后给图片子类添加事件监听

EventTriggerType.PointerExit;鼠标移出的监听对应 OnPointerEnter当鼠标进入图片的相应事件

EventTriggerType.PointerEnter 鼠标进入图片的监听

当鼠标进入图片进行处理停止轮播效果-->获取当前图片的尺寸-->进行尺寸放大

isMove = false;//停止轮播效果
PointerEventData P_EveDat = arg0 as PointerEventData;
selObject = P_EveDat.pointerCurrentRaycast.gameObject.transform as RectTransform;
selObject.sizeDelta = new Vector2(200, 200);

同理鼠标移出图片进行处理开始轮播效果-->获取当前图片的尺寸-->进行尺寸还原

//demo地址

链接：https://pan.baidu.com/s/1hD_FcARkoetWMFq-Cqrqsg 密码：9a2m

Unity 制作图片轮播功能

猜你喜欢