1 效果展示

可以按左右按钮进行图片翻页，也可以鼠标滑动进行图片翻页，下方的文字是图片的名称

2 Unity的界面

注意在左边和右边的按钮上，添加两个监听，左边按钮是ClickLeft(),右边是ClickRight().也可以在代码中添加监听（这里没写）

option设置

3核心代码

注释比较详细，应该能看懂吧

using System;
using System.Collections;
using System.Collections.Generic;
using System.IO;
using System.Text;
using UnityEngine;
using UnityEngine.UI;
public class Rolling : MonoBehaviour
{List<Sprite> imageList = new List<Sprite>();   //加载的图片的列表[Header("UI相关")]Text[] level;                              //关卡文本Image[] border;                            //选项边框[ColorUsage(true, false)]public Color originColor;                   //初始边框颜色[ColorUsage(true, false)]public Color firstColor;                    //最前项边框颜色[Header("关卡选项")][SerializeField] GameObject optionPrefab;  //选择预制体Transform optionChild;                      //预制体的第一个子物体[SerializeField] Transform OPtionGroup;    //选择组父对象Transform[] options;                       //每个选项CanvasGroup[] cg;                          //选项组父对象[Range(0, 20)][SerializeField] int optionNum;            //选项总数float halfNum;//Key 选项  value：选择位置Dictionary<Transform, Vector3> optionPos = new Dictionary<Transform, Vector3>();//key：选项  value：选项的SiblingIndexDictionary<Transform, int> optionSib = new Dictionary<Transform, int>();#region 旋转[Header("旋转缩放")]Vector3 center = Vector3.zero;  //旋转中心float R = 500f;                 //旋转半径[Header("旋转速度")][Range(1f, 10f)][SerializeField] float speed = 5;   //旋转速度[Range(0, 100)][SerializeField] float yOffest; //y轴偏移量#endregion[Range(0, 1)][SerializeField] float minAlpha;   //最小的透明度#region 缩放[Header("缩放")][Range(1, 5)][SerializeField] float firstS;   //选中项的缩放度[Range(0, 1)][SerializeField] float minS;     //最小项的缩放度[Range(0, 1)][SerializeField] float tempS;    //旋转过程中的缩放度[Range(0, 0.5f)][SerializeField] float smothSTime;      //缩放平滑时间#endregion Coroutine currentPIE;            //当前移动协程Coroutine[] SIE2;                //所有缩放的协程int first;                  //最前项序号[Header("鼠标相关")]Vector2 lastPos;//鼠标上次位置Vector2 currPos;//鼠标当前位置Vector2 offset;//两次位置的偏移值#region 初始化private void Awake(){//从StreamingAssets中加载图片string imgtype = "*.BMP|*.JPG|*.GIF|*.PNG";string[] ImageType = imgtype.Split('|');for (int k = 0; k < ImageType.Length; k++){//获取Application.dataPath文件夹下所有的图片路径  string[] dirs = Directory.GetFiles(Application.streamingAssetsPath, ImageType[k]);for (int j = 0; j < dirs.Length; j++){Texture2D tx = new Texture2D(100, 100);tx.LoadImage(getImageByte(dirs[j]));Sprite sprite = Sprite.Create(tx, new Rect(0, 0, tx.width, tx.height), new Vector2(-500, -500));sprite.name= Path.GetFileNameWithoutExtension(dirs[j]);//将获取的图片加到图片列表中imageList.Add(sprite);}}//生成预制体for (int i = 0; i < optionNum; i++){GameObject go = Instantiate(optionPrefab, Vector3.zero, Quaternion.identity, OPtionGroup);go.name = i.ToString();int index = i;//当图片的数量小于生成的预制体的数量，让预制体的图片变成第一个if (index > imageList.Count - 1){index = 0;}//将图片赋值到预制体上go.transform.Find("mask").GetComponent<Image>().sprite = imageList[index];}//数量得一半，对称处理用halfNum = optionNum / 2;//设置每一个元素位置options = new Transform[optionNum];cg = new CanvasGroup[optionNum];border = new Image[optionNum];SIE2 = new Coroutine[optionNum];level = OPtionGroup.GetComponentsInChildren<Text>();//设置每个元素的位置for (int i = 0; i < optionNum; i++){options[i] = OPtionGroup.GetChild(i);cg[i] = options[i].GetComponent<CanvasGroup>();//设置关卡序号//将图片名称改为图片的名字level[i].text = imageList[i].name;//获取边框并设置颜色border[i] = options[i].GetChild(1).GetComponent<Image>();SetBorderColor(i, originColor);}//初始化位置InitPos();//设置层级InitSibling();//设置透明度SetAlpha();SetScale();//整体居中//StartCoroutine(AlignCenter());//对最前项进行特殊设置first = 0;SetFirst();}#endregionvoid Update(){//鼠标的位置的记录if (Input.GetMouseButtonDown(0)){lastPos = Input.mousePosition;}if (Input.GetMouseButtonUp(0)){currPos = Input.mousePosition;offset = currPos - lastPos;DoMatch(offset);}}#region 鼠标移动控制图片的左右切换//鼠标移动void DoMatch(Vector2 _offset){//水平移动if (Mathf.Abs(offset.x) > Mathf.Abs(offset.y)){if (offset.x > 0){Debug.Log("左");//执行图片左移StartCoroutine(MoveLeft());}else{Debug.Log("右");//执行图片右移StartCoroutine(MoveRight());}}else//垂直移动{if (offset.y > 0){Debug.Log("上");}else{Debug.Log("下");}}}#endregion//设置整体居中的协程IEnumerator AlignCenter(){//确保缩放完成for (int i = 0; i < optionNum; i++){if (SIE2[i] != null){yield return SIE2[i];}}float a = options[0].GetComponent<RectTransform>().rect.height * options[0].localScale.x / 2f;//偶数if (optionNum % 2 == 0){float b = options[(int)halfNum].GetComponent<RectTransform>().rect.height * options[(int)halfNum].localScale.x / 2f;OPtionGroup.localPosition = new Vector3(0, (-halfNum * yOffest + a - b) / 2f, 0);}//奇数else{int temp = (optionNum - 1) / 2;float b = options[temp].GetComponent<RectTransform>().rect.height * options[temp].localScale.x / 2f;OPtionGroup.localPosition = new Vector3(0, (-temp * yOffest + a - b) / 2f, 0);}}//设置边框颜色void SetBorderColor(int  i, Color c){border[i].color = c;}//对当前选项做特殊处理void SetFirst(){//设置边框颜色SetBorderColor(first, firstColor);//启用互动cg[first].blocksRaycasts = true;}//按下按钮后先重置void Re(){//旋转过程中禁用互动cg[first].blocksRaycasts = false;//重置缩放ResetScale();//重置边框颜色SetBorderColor(first, firstColor);}//初始化位置void InitPos(){for (int i = 0; i < optionNum; i++){float angle = (360f / (float)optionNum) * i * Mathf.Deg2Rad;float x = Mathf.Sin(angle) * R;float z = -Mathf.Cos(angle) * R;float y = 0;if (i != 0){if (i > halfNum){//将大于中间数的元素的y值与其对称的那个元素一样y = (optionNum - i) * yOffest;}else{y = i * yOffest;}}//初始化位置和字典Vector3 temp = options[i].localPosition = new Vector3(x, y, z);optionPos.Add(options[i], temp);}}//设置元素的层级关系void InitSibling(){//设置顺序for (int i = 0; i < optionNum; i++){//未过半if (i <= halfNum){//偶数if (optionNum % 2 == 0){options[i].SetSiblingIndex((int)halfNum - i);}//奇数else{options[i].SetSiblingIndex((int)((optionNum - 1 / 2)) - i);}}//过半else{options[i].SetSiblingIndex(options[optionNum - i].GetSiblingIndex());}}//添加到字典for (int i = 0; i < optionNum; i++){optionSib.Add(options[i], options[i].GetSiblingIndex());}}//根据深度（z）设置透明度void SetAlpha(){//计算z值起点，即当前选项，透明度最大float startZ = center.z - R;for (int i = 0; i < optionNum; i++){cg[i].alpha = 1 - Mathf.Abs(options[i].localPosition.z - startZ) / (2 * R) * (1 - minAlpha);}}#region 设置大小//获取当前的indexpublic int GetFirst(){for (int i = 0; i < optionNum; i++){if (options[i].GetSiblingIndex() == optionNum - 1){return i;}}//未找到标识return 233;}//重置缩放度void ResetScale(){foreach (Transform tf in options){tf.localScale = Vector3.one * tempS;}}//设置大小void SetScale(){//  int first = GetFirst();float startZ = center.z - R;for (int i = 0; i < optionNum; i++){//当前选项的放大率另行设置if (i == first){SIE2[i] = StartCoroutine(SmoothScale(options[i], firstS));}else{float val = 1 - Mathf.Abs(options[i].localPosition.z - startZ) / (2 * R) * (1 - minS);// options[i].localScale = Vector3.one * val;SIE2[i] = StartCoroutine(SmoothScale(options[i], val));}}}//改变大小的协程IEnumerator SmoothScale(Transform tf, float targetS){float temp = 0;while (Mathf.Abs(tf.localScale.x - targetS) > 0.001){float s = Mathf.SmoothDamp(tf.localScale.x, targetS, ref temp, smothSTime);tf.localScale = Vector3.one * s;yield return null;}}#endregion#region 按住按钮左右移动//向左移动public void ClickLeft(){StartCoroutine(MoveLeft());}//向右移动public void ClickRight(){StartCoroutine(MoveRight());}//向左移动的协程IEnumerator MoveLeft(){if (currentPIE != null){yield return currentPIE;}for (int i = 0; i < optionNum; i++){if (SIE2[i] != null){yield return SIE2[i];}}Re();//获取第零项的信息Vector3 p = optionPos[options[0]];int s = optionSib[options[0]];Vector3 targetP;for (int i = 0; i < optionNum; i++){//当是最后一个元素的时候if (i == optionNum - 1){targetP = p;optionSib[options[i]] = s;}else{targetP = options[(i + 1) % optionNum].localPosition;optionSib[options[i]] = optionSib[options[(i + 1) % optionNum]];}options[i].SetSiblingIndex(optionSib[options[i]]);currentPIE = StartCoroutine(MoveToTarget(options[i], targetP));}//设置最前项if (first==0){first = optionNum - 1;}else{first--;}SetFirst();//确保移动完成，设置缩放和透明度if (currentPIE != null){yield return currentPIE;}SetAlpha();SetScale();}//向右移动的协程IEnumerator MoveRight(){if (currentPIE != null){yield return currentPIE;}for (int i = 0; i < optionNum; i++){if (SIE2[i] != null){yield return SIE2[i];}}Re();//获取最后一项的信息Vector3 p = optionPos[options[optionNum - 1]];int s = optionSib[options[optionNum - 1]];Vector3 targetP;//从最后一个开始循环for (int i = optionNum - 1; i >= 0; i--){//0->nif (i == 0){//确定移动过目标的位置targetP = p;//更新SiblingIndexoptionSib[options[i]] = s;}else{targetP = options[(i - 1) % optionNum].localPosition;optionSib[options[i]] = optionSib[options[(i - 1) % optionNum]];}options[i].SetSiblingIndex(optionSib[options[i]]);currentPIE = StartCoroutine(MoveToTarget(options[i], targetP));}//设置最前端if (first==optionNum-1){first = 0;}else{first++;}SetFirst();if (currentPIE != null){yield return currentPIE;}SetAlpha();SetScale();}//穿入物体往目标位置移动的方法IEnumerator MoveToTarget(Transform tf, Vector3 target){//物体离目标位置越远，移动的越快float tempSpeed = (tf.localPosition - target).magnitude * speed;//当物体与目标物体位置不同时开始移动while (tf.localPosition != target){tf.localPosition = Vector3.MoveTowards(tf.localPosition, target, tempSpeed * Time.deltaTime);yield return null;}//更新字典里的位置ValueoptionPos[tf] = target;}#endregionpublic GameObject Background;#region 根据图片路径返回图片的字节流byte[]  private static byte[] getImageByte(string imagePath){FileStream files = new FileStream(imagePath, FileMode.Open);byte[] imgByte = new byte[files.Length];files.Read(imgByte, 0, imgByte.Length);files.Close();return imgByte;}#endregion}

这个也是我在b站比着教程做的，大家还有不懂的话，可以去看一下这个小姐姐的视频。

https://www.bilibili.com/video/BV1La411v7T2?spm_id_from=333.337.search-card.all.clickh

Unity的图片轮播相关推荐

unity实现图片轮播效果_Unity实现图片轮播组件
游戏中有时候会见到图片轮播的效果,那么这里就自己封装了一个,包括自动轮播.切页按钮控制.页码下标更新.滑动轮播.切页后的回调等等 . 下面,先上一个简陋的gif动态效果图从图中可以看出,该示例包括了 ...
unity实现图片轮播效果_unity 背景无限循环滚动效果
背景无限循环滚动效果如下示: 步骤如下: 导入背景图片后,设置图片的格式,如下图: 2.图片格式也可以设置是Texture格式,但是Wrap Mode 一定要是Repeat[重复发生]:然后记得App ...
Unity之图片轮播组件实现
博客迁移个人博客站点,欢迎访问,www.jiingfengji.tech 正文游戏中有时候会见到图片轮播的效果,那么这里就自己封装了一个,包括自动轮播.切页按钮控制.页码下标更新.滑动轮播.切页后 ...
Unity实现图片轮播功能
Unity实现图片无限循环轮播(横and竖) 先来看看效果横实现介绍:只可以左右按键控制图片的切换,可无限扩展图片数量思路:首尾相连.尾图片与首图片互换位置以及动画效果主要代码: RectT ...
unity实现图片轮播效果_Unity 制作图片轮播功能
功能:自动播放移动首尾相接鼠标移到图片上时移动停止并该图片变大鼠标离开图片恢复原形轮播效果继续效果如下界面布局大体是这个样子 scrollView就是一个底板带Image组件 ...
Unity 制作图片轮播功能
功能:自动播放移动首尾相接鼠标移到图片上时移动停止并该图片变大鼠标离开图片恢复原形轮播效果继续效果如下界面布局大体是这个样子 scrollView就是一个底板带Image组件 ...
unity实现图片轮播效果_Unity3D实现列表拖拽轮播分页滚动功能
在使用UGUI的ScrollRect做列表滚动时,会有分页滚动的需求,基于ScrollRect写了一个,只需要一个ScrollRect组件即可效果截图: Threshold为滚动阈值,当翻页的长度达 ...
Unity之使用贝塞尔曲线制作图片轮播
一.效果图 1.效果1 2.效果2 二.贝塞尔曲线关于贝塞尔曲线的学习大家可以看这个文章进行学习https://blog.csdn.net/qq_39162826/article/details/1 ...
Unity图片轮播图功能实现
通过Unity+CurvedUI实现轮播效果,思路是将几张UI图按照较准确的位置放在空物体(作为父物体)下方,通过旋转父物体实现图片的旋转. 一.UI构建简单构建UI结构,注意使用一个空物体作为几张 ...

Unity的图片轮播

1 效果展示

2 Unity的界面

3核心代码

Unity的图片轮播相关推荐

最新文章

热门文章