unity | 动画模块之循环滚动选项框

目录

一、作者的话

二、效果动画

三、制作思路

五、所有物体总览

四、小方块(有数字的部分)制作思路

四、大方块(父物体)制作思路


一、作者的话

评论区有人问,有没有竖排循环轮播选项框,我就写了一个

二、效果动画

如果不是你们想要的,就省的你们继续往下看了

三、制作思路

把移动分成里面的方块,还有背景(父物体),方块自己移动,背景(父物体)控制方块在触碰到边界的时候移动位置,保证循环。

五、所有物体总览

脚本说明:

图片循环轮播物体上,挂有ControlMoveItem脚本

其他0-7物体上,均挂有MoveItem脚本

四、小方块(有数字的部分)制作思路

当点击到小方块时,所有小方块根据鼠标拖动的距离进行移动。

1.在小方块上加入EventSystems,用来识别小方块是否被按到。

在这里告诉父物体是否有人被按下,是为了方便其他小方块知道,是不是有物体被按下了

public class MoveItem : MonoBehaviour,IPointerDownHandler,IPointerUpHandler
{
    //声明父物体身上的脚本
    ControlMoveItem controlMoveItem;

    void Start()
    {
        //获取到父物体的身上的脚本
        controlMoveItem = transform.parent.GetComponent<ControlMoveItem>();
        
    }
    
    //当自己被按下时,告诉父物体,自己被按下了
    public void OnPointerDown(PointerEventData eventData)
    {
        controlMoveItem.isButtonDown = true;
    }
    
    //当鼠标抬起时,告诉父物体,没有被按了
    public void OnPointerUp(PointerEventData eventData)
    {
        controlMoveItem.isButtonDown = false;
    }
}


2.当物体被按下时,每个小方块,都挪动和鼠标相同的位置

 void Update()
    {
        bool isButtonDown = controlMoveItem.isButtonDown;
        if (isButtonDown == true)
        {
            if (mouthPosition == Vector3.zero)
            {
                mouthPosition = Input.mousePosition;
            }
            else
            {
                Vector3 del = Input.mousePosition - mouthPosition;
                transform.position += new Vector3(0, del.y, 0);
                mouthPosition = Input.mousePosition;
            }
        }
        else {
            mouthPosition = Vector3.zero;
        }
    }

3.总代码

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

public class MoveItem : MonoBehaviour,IPointerDownHandler,IPointerUpHandler
{
    ControlMoveItem controlMoveItem;
    Vector3 mouthPosition = new Vector3();

    public void OnPointerDown(PointerEventData eventData)
    {
        controlMoveItem.isButtonDown = true;
    }

    public void OnPointerUp(PointerEventData eventData)
    {
        controlMoveItem.isButtonDown = false;
    }

    void Start()
    {
        controlMoveItem = transform.parent.GetComponent<ControlMoveItem>();
    }

    void Update()
    {
        bool isButtonDown = controlMoveItem.isButtonDown;
        if (isButtonDown == true)
        {
            if (mouthPosition == Vector3.zero)
            {
                mouthPosition = Input.mousePosition;
            }
            else
            {
                Vector3 del = Input.mousePosition - mouthPosition;
                if (controlMoveItem.dir == Dir.Vertical)
                {
                    transform.position += new Vector3(0, del.y, 0);
                }
                mouthPosition = Input.mousePosition;
            }
        }
        else {
            mouthPosition = Vector3.zero;
        }
    }
}
四、大方块(父物体)制作思路

1.读取显示的第一个物体和最后一个物体的位置

这样当超过这个位置的时候,我就知道,要移动别的方块了

    public bool isButtonDown = false;
    public int lastIndex = 5;

    Vector3 firstPosition;
    Vector3 lastPosition;

    void Start()
    {
        firstPosition = transform.GetChild(0).GetComponent<RectTransform>().anchoredPosition;
        lastPosition = transform.GetChild(lastIndex).GetComponent<RectTransform>().anchoredPosition;
    }

2.读取第一个小方块和第二个小方块之间的距离

这样当设置新移动过来的位置的时候,我知道把方块放到哪里

    public bool isButtonDown = false;
    public int lastIndex = 5;

    float d;
    Vector3 firstPosition;
    Vector3 lastPosition;

    void Start()
    {
            d = Mathf.Abs(transform.GetChild(0).localPosition.y - transform.GetChild(1).localPosition.y);

        firstPosition = transform.GetChild(0).GetComponent<RectTransform>().anchoredPosition;
        lastPosition = transform.GetChild(lastIndex).GetComponent<RectTransform>().anchoredPosition;
    }

3.如果向上滑动,第一个物体已经超过上方的线了,就要在队尾补物体了,

反之,如果向下滑动,最后一个物体如果已经超过最下方的线了,就要在上方补物体了

补的物体就是现在队头(或队尾)的现在的位置,加上(或减去)两个小方块的距离

    void Update()
    {
            if (transform.GetChild(0).GetComponent<RectTransform>().anchoredPosition.y < firstPosition.y)
            {
                Transform changeT = transform.GetChild(transform.childCount - 1);
                changeT.localPosition = transform.GetChild(0).localPosition + new Vector3(0, d, 0);
                changeT.SetSiblingIndex(0);
            }
            else if (transform.GetChild(transform.childCount - 1).GetComponent<RectTransform>().anchoredPosition.y > lastPosition.y)
            {
                Transform changeT = transform.GetChild(0);
                changeT.localPosition = transform.GetChild(transform.childCount - 1).localPosition - new Vector3(0, d, 0);
                changeT.SetSiblingIndex(transform.childCount - 1);
            }
    }

4.全部代码

public enum Dir
{
    Horizontal,
    Vertical,
}

public class ControlMoveItem : MonoBehaviour
{
    public Dir dir = Dir.Vertical;

    public bool isButtonDown = false;
    public int lastIndex = 5;

    float d;
    Vector3 firstPosition;
    Vector3 lastPosition;


    void Start()
    {
        if (dir == Dir.Vertical)
        {
            d = Mathf.Abs(transform.GetChild(0).localPosition.y - transform.GetChild(1).localPosition.y);
        }

        firstPosition = transform.GetChild(0).GetComponent<RectTransform>().anchoredPosition;
        lastPosition = transform.GetChild(lastIndex).GetComponent<RectTransform>().anchoredPosition;
    }

    void Update()
    {
        if (dir == Dir.Vertical)
        {
            if (transform.GetChild(0).GetComponent<RectTransform>().anchoredPosition.y < firstPosition.y)
            {
                Transform changeT = transform.GetChild(transform.childCount - 1);
                changeT.localPosition = transform.GetChild(0).localPosition + new Vector3(0, d, 0);
                changeT.SetSiblingIndex(0);
            }
            else if (transform.GetChild(transform.childCount - 1).GetComponent<RectTransform>().anchoredPosition.y > lastPosition.y)
            {
                Transform changeT = transform.GetChild(0);
                changeT.localPosition = transform.GetChild(transform.childCount - 1).localPosition - new Vector3(0, d, 0);
                changeT.SetSiblingIndex(transform.childCount - 1);
            }
        }
    }

}

  • 6
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
您好!感谢您的提问。 要实现图片列表的自动循环滚动,可以按照以下步骤进行操作: 1. 创建一个空物体,并将其命名为“ImageList”。 2. 在“ImageList”上添加“RectTransform”组件,并将其设置为水平布局。 3. 在“ImageList”下创建多个子物体,并为每个子物体添加“Image”组件。将子物体按照顺序排列,以形成一个图片列表。 4. 创建一个脚本,并将其挂载到“ImageList”上。在脚本中添加一个公共变量“scrollSpeed”,用于控制滚动速度。 5. 在脚本中添加“Update()”函数,并在其中实现滚动功能。可以通过修改“RectTransform”的“anchoredPosition”属性来实现滚动。 以下是示例代码: ```csharp using UnityEngine; public class ImageListController : MonoBehaviour { public float scrollSpeed = 50f; private RectTransform rectTransform; void Start() { rectTransform = GetComponent<RectTransform>(); } void Update() { rectTransform.anchoredPosition += Vector2.left * scrollSpeed * Time.deltaTime; if (rectTransform.anchoredPosition.x < -rectTransform.rect.width) { rectTransform.anchoredPosition += Vector2.right * rectTransform.rect.width; } } } ``` 在这个示例代码中,我们使用“Vector2.left”向左移动“RectTransform”,并根据“scrollSpeed”控制移动速度。当“RectTransform”的左边界超出了屏幕的左边界时,我们将其移到右边,从而实现了循环滚动的效果。 希望这个回答能够帮到您!
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

菌菌巧乐兹

希望能给大家写更多有用的文章~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值