Unity实现UI图片面板滚动播放效果第二弹

效果:

场景结构:

特殊物体:panel下面用排列组件horizent layout group放置多个需要显示的面板,用mask遮罩好。

主要思路:

这次是要在最后一个toggle的地方,依然向左滚动回1,这是难点。因此实际上在4后面,还增加了一个1面板的副本,等滑动到4后面的1后,直接重设整个panel的recttransform,狸猫换太子,视觉欺骗。

代码:

cs 复制代码
using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using DG.Tweening;
using UnityEngine;
using UnityEngine.UI;

public class RollControlPanel : MonoBehaviour
{
    private RectTransform rollPanel;
    private Vector2 startPos;

    private ToggleGroup toggleGroup;

    private Toggle[] toggles;

    private int preToggleIndex = 0;
    private int curToggleIndex = 0;

    private int toggleCount;

    public float moveValue = 756;
    private Tween slideTween;
    private List<Vector2> panelPos = new List<Vector2>();
    
    // Start is called before the first frame update
    void Start()
    {
        rollPanel = transform.Find("Mask/RollPanel").GetComponent<RectTransform>();
        toggleGroup = transform.Find("TogglePanel/ToggleGroup").GetComponent<ToggleGroup>();
        toggles = transform.GetComponentsInChildren<Toggle>();

        startPos = rollPanel.anchoredPosition;
        panelPos.Add(startPos);

        int panelCount = rollPanel.childCount;
        for (int i = 1; i < panelCount; i++)
        {
            Vector2 tmp = new Vector2(startPos.x - i * moveValue, startPos.y);
            panelPos.Add(tmp);
        }
        
        toggleCount = toggles.Length;
        for (int i = 0; i < toggleCount; i++)
        {
            Toggle toggle = toggles[i];
            toggles[i].onValueChanged.AddListener((arg0 =>
            {
                OnToggleOpen(toggle);
            }));
        }

        IEnumerator enumerator = MovePanel();
        Coroutine setTogglesetToggle= StartCoroutine(enumerator);
    }
    
    /// <summary>
    /// 只关注循环播放
    /// </summary>
    /// <returns></returns>
    IEnumerator MovePanel()
    {
        while (true)
        {
            yield return new WaitForSeconds(2f);
            if (curToggleIndex==toggleCount-1)
            {
                //挪到最后一个(也就是第一个的副本),偷偷重置位置
                slideTween = rollPanel.DOAnchorPosX(panelPos[panelPos.Count - 1].x, 0.5f).OnComplete((() =>
                {
                    rollPanel.anchoredPosition = startPos;
                }));
                
                for (int i = 0; i < toggleCount; i++)
                {
                    toggles[i].onValueChanged.RemoveAllListeners();
                }
                toggles[0].isOn = true;
                for (int i = 0; i < toggleCount; i++)
                {
                    Toggle toggle = toggles[i];
                    toggles[i].onValueChanged.AddListener((arg0 =>
                    {
                        OnToggleOpen(toggle);
                    }));
                }

                preToggleIndex = curToggleIndex;
                curToggleIndex = 0;
                
            }
            else
            {
                //正常相对于当前位置移动
                curToggleIndex++;
                slideTween = rollPanel.DOAnchorPosX(panelPos[curToggleIndex].x, 0.5f);
                
                for (int i = 0; i < toggleCount; i++)
                {
                    toggles[i].onValueChanged.RemoveAllListeners();
                }
                toggles[curToggleIndex].isOn = true;
                for (int i = 0; i < toggleCount; i++)
                {
                    Toggle toggle = toggles[i];
                    toggles[i].onValueChanged.AddListener((arg0 =>
                    {
                        OnToggleOpen(toggle);
                    }));
                }
                
                preToggleIndex = curToggleIndex;
            }
        }
    }

    // private void Update()
    // {
    //     if (Input.GetKeyDown(KeyCode.K))
    //     {
    //         StopAllCoroutines();
    //         slideTween.Kill();
    //         rollPanel.anchoredPosition = startPos;
    //     }
    // }

    void OnToggleOpen(Toggle toggle)
    {
        StopAllCoroutines();
        slideTween.Kill();

        if (toggle.isOn)
        {
            for (int i = 0; i < toggleCount; i++)
            {
                if (toggle == toggles[i])
                {
                    curToggleIndex = i;
                    break;
                }
            }
            
            //直接切换rect位置
            rollPanel.anchoredPosition = panelPos[curToggleIndex];
            
            IEnumerator enumerator = MovePanel();
            Coroutine setTogglesetToggle= StartCoroutine(enumerator);


        }
    }
}
相关推荐
玖玥拾13 小时前
Unity 3D 笔记(十四)Unity/C# Socket 网络笔记3
服务器·网络·unity·c#
Kim.Li15 小时前
格式塔设计原则全解析:12项核心原则在 UI/UX 中的实战应用指南
ui·产品经理·ux·视觉设计·交互设计
Python私教15 小时前
Godot图片怎么导入?PNG、压缩、Mipmap与Reimport一次讲清
游戏引擎·godot
玖玥拾16 小时前
Unity 3D 笔记(十七)Unity/C# Socket 网络笔记6
服务器·网络·unity·c#
寒水馨17 小时前
Linux下载、安装godot-4.7.1-stable(附安装包Godot_v4.7.1-stable_linux.x86_64.zip)
linux·游戏引擎·godot·游戏开发·2d游戏·3d游戏·godot engine
jin12332218 小时前
HarmonyOS ArkTS API 24实现声明式 UI 框架与 @Builder 组件复用模式构建三标签页智能账单应用
ui·华为·harmonyos
寒水馨20 小时前
macOS下载、安装godot-4.7.1-stable(附安装包Godot_v4.7.1-stable_macos.universal.zip)
macos·3d·游戏引擎·godot·跨平台·游戏开发·2d
Getflare1 天前
前端 + UI 设计 + AI:这不是三个工种,是一个新三角能力模型(附自检清单)
前端·人工智能·ui
达子6661 天前
第9章_HarmonyOs图解 用Java开发UI
java·ui·harmonyos
<小智>2 天前
鸿蒙多功能工具箱开发实战(二十四)-单元测试与自动化测试
ui·华为·harmonyos