一、效果图

二、效果制作

我们在unity中用一个点作为父物体，在父物体下创建几张图片，我们旋转父物体的Z轴，就会发现子物体会围绕父物体旋转，通过这个特性，有了一个思路，创建一个围绕一个点的图片圆环，然后通过旋转父物体z轴就可以实现这个效果。好的我们先按照这个思路创建一个图片圆环

using System.Collections;
using System.Collections.Generic;
using System.IO;
using UnityEngine;/// <summary>
/// 创建圆环
/// </summary>
public class CreateCircle : MonoBehaviour
{[Header("设置生成的数量")][SerializeField] int iconCount = 30;[Header("需要生成的预设")][SerializeField] GameObject prefab;[Header("设置中心点,同样也是父物体 ")][SerializeField] Transform originObj;[Header("设置圆半径物体")][SerializeField] Transform radiusObj;//圆半径 float fRadius = 500;void Start(){//计算圆半径fRadius = Vector3.Distance(originObj.position, radiusObj.position);CreatCircle(); //创建圆环}#region 围绕一个点生成圆int childCount;    //孩子数量public void CreatCircle(){childCount = originObj.childCount;float angle = 360f / iconCount; //计算每个物体的角度for (int i = 0; i < iconCount; i++){GameObject go = GetPrefab(i);//sin cos求x,y值float x = fRadius * Mathf.Sin((angle * i) * (Mathf.PI / 180f));float y = fRadius * Mathf.Cos((angle * i) * (Mathf.PI / 180f));go.transform.localPosition = new Vector3(x, y, 0);go.transform.localEulerAngles = new Vector3(0, 0, Mathf.Abs(angle * i - 360));go.name = i.ToString();}}//获取预设GameObject GetPrefab(int index){GameObject obj = null;if (index < childCount)obj = originObj.GetChild(index).gameObject;elseobj = Instantiate(prefab, originObj);obj.SetActive(true);return obj;}#endregion}

界面布局：

好的下面让我们来看看效果：

但是我们的圆只需要展示部分图片，所以我们需要把多余的图片删除并将这个圆环拖拽成预设。留着备用，但是问题来了，如果我们一开始盲猜圆的大小、图片的数量来创建圆环往往是不精确，这样的话做出来的圆并不是我们想要的，所以要制作一个我们想要的圆环，我这里优化了一下，代码中有解释，这里就不多说了。

using System.Collections;
using System.Collections.Generic;
using System.IO;
using UnityEngine;#if UNITY_EDITOR
using UnityEditor;
#endif#if UNITY_EDITOR
//窗口编辑脚本,用于创建属性面板的创建、保存预设按钮
[CustomEditor(typeof(CreateCircle))]
public class CreateCircleEditor : Editor
{public override void OnInspectorGUI(){DrawDefaultInspector();CreateCircle myScript = (CreateCircle)target;//创建按钮if (GUILayout.Button("Create")){myScript.CreatCircle();}//保存预设按钮if (GUILayout.Button("Save")){myScript.SavePrefab();}}
}
#endif/// <summary>
/// 创建圆环
/// </summary>
public class CreateCircle : MonoBehaviour
{[Header("生成的数量")][SerializeField] int iconCount = 30;[Header("需要生成的预设")][SerializeField] GameObject prefab;[Header("设置中心点,同样也是父物体 ")][SerializeField] Transform originObj;[Header("设置圆半径物体")][SerializeField] Transform radiusObj;[Header("设置保存预设路径")][SerializeField] string savePath = "Assets/06_Prefabs";//圆半径 float fRadius;void Start(){}#region 围绕一个点生成圆bool isSuccessful; //是否成功int childCount;    //孩子数量public void CreatCircle(){fRadius = Vector3.Distance(originObj.position, radiusObj.position); //计算圆半径DestroyPrefab(); //销毁多余预设childCount = originObj.childCount;float angle = 360f / iconCount; //计算每个物体的角度for (int i = 0; i < iconCount; i++){GameObject go = GetPrefab(i);//sin cos求x,y值float x = fRadius * Mathf.Sin((angle * i) * (Mathf.PI / 180f));float y = fRadius * Mathf.Cos((angle * i) * (Mathf.PI / 180f));go.transform.localPosition = new Vector3(x, y, 0);go.transform.localEulerAngles = new Vector3(0, 0, Mathf.Abs(angle * i - 360));go.name = i.ToString();}}//销毁多余预设void DestroyPrefab(){int count = originObj.childCount - iconCount;for (int i = 0; i < count; i++) {Debug.Log(count); DestroyImmediate(originObj.GetChild(i).gameObject); //使用立即销毁方法,如果使用Destroy会有延迟导致创建不成功}}//获取预设GameObject GetPrefab(int index){GameObject obj = null;if (index < childCount)obj = originObj.GetChild(index).gameObject;elseobj = Instantiate(prefab, originObj);obj.SetActive(true);return obj;}#endregion#region 保存预设public void SavePrefab(){//判断路径是否存在if (!File.Exists(savePath))Directory.CreateDirectory(savePath);#if UNITY_EDITORPrefabUtility.SaveAsPrefabAsset(originObj.gameObject, savePath + "/Circle.prefab", out isSuccessful);
#endifDebug.Log("是否成功" + isSuccessful);}#endregion}

修改后的效果：

现在我们可以灵活的创建圆环了，我们圆环能看到的其实只有一部分，另一部分的圆环看不到就可以删除了，删除后我们给圆环从左到右排列一下，因为生成的圆是以终点为中心，往左右创建的对称半圆，所以根据如下操作可以快速排列：

做完这些后按下save保存按钮就可以自动创建这个半圆预设了。

好的我们的半圆预设创建完成，那么接下来就该实现图片的轮播效果了，我们的轮播效果是当半圆最左边（或最右边）的图片，超出了我们的视野范围内后，就修改位置和旋转到最右边（或最左边，也就是半环的屁股后面），同时判断图片精灵列表中的图片是否都显示过，如果没有就修改图片精灵，这样形成一个循环的过程。

做这个最难点就是如果判断圆环超出了我们的视野范围呢？，其实我们在创建圆环的时候就知道了圆环每旋转多少度就生成一张图片，我上面创建了一个55张图片的圆环，所以圆环每移动6.545度（360度/55张图片约等于6.545度）就代表移动到了下一张图片的位置，这时候根据圆环是向左（或向右）转来修改第一张图片还是最后一张图片的位置。就可以了。这么说有点抽象，我们下面开始做。

1.首先记录一下左右两张图片的位置，这两张图片直接从圆环中复制出一个就可以了，布局如下

2.脚本

using System.Collections;
using System.Collections.Generic;
using UnityEngine.UI;
using UnityEngine;/// <summary>
/// 圆环轮播
/// </summary>
public class RoundRobin : MonoBehaviour
{//计算方式:360°/图片数量float angle;[SerializeField] float speed = 10f;[SerializeField] Transform start;[SerializeField] Transform end;[SerializeField] List<Sprite> spriteList; //存放的图片精灵void Start(){angle = 360f / 55f;//初始化已有的图片for (int i = 0; i < transform.childCount; i++)SetImgSprite(1, transform.GetChild(i).GetComponent<Image>());}float oldRotX;void Update(){float h = Input.GetAxis("Horizontal");if (h != 0){float rotX = -(h * speed * Time.deltaTime);transform.rotation *= Quaternion.Euler(transform.rotation.x, transform.rotation.y, rotX);//物体 位置 旋转 孩子下标Transform obj;Vector3 pos;Vector3 rot;int childIndex;int spriteIndex; //精灵下标 -1或1//超出或等于角度if (Mathf.Abs(oldRotX - transform.eulerAngles.z) >= angle){if (rotX > 0){spriteIndex = 1;//获取物体 位置 旋转 要修改的下标obj = transform.GetChild(0);pos = transform.InverseTransformPoint(end.position);rot = end.eulerAngles - transform.eulerAngles;childIndex = transform.childCount - 1;}else{spriteIndex = -1;//获取物体 位置 旋转 要修改的下标obj = transform.GetChild(transform.childCount - 1);pos = transform.InverseTransformPoint(start.position);rot = start.eulerAngles - transform.eulerAngles;childIndex = 0;}//设置位置 旋转 子物体在父物体的排列位置obj.localPosition = pos;obj.localEulerAngles = rot;obj.SetSiblingIndex(childIndex);SetImgSprite(spriteIndex, obj.GetComponent<Image>()); //图片修改oldRotX = transform.eulerAngles.z;}}}#region 修改图片精灵int spritIndex = 0;//图片精灵void SetImgSprite(int index, Image img){spritIndex += index;//超出精灵列表最大值等于第一个if (spritIndex > spriteList.Count - 1)spritIndex = 0;//小于精灵列表最小值等于最后一个spriteif (spritIndex < 0)spritIndex = spriteList.Count - 1;img.sprite = spriteList[spritIndex];}#endregion
}

然后运行就可以了。

三、工程下载

https://pan.baidu.com/s/1EdLVK-ZHgRI5RBX9JCqI6Q

提取码：syq1

unity之环状图片轮播相关推荐

Unity之使用贝塞尔曲线制作图片轮播
一.效果图 1.效果1 2.效果2 二.贝塞尔曲线关于贝塞尔曲线的学习大家可以看这个文章进行学习https://blog.csdn.net/qq_39162826/article/details/1 ...
unity实现图片轮播效果_Unity实现图片轮播组件
游戏中有时候会见到图片轮播的效果,那么这里就自己封装了一个,包括自动轮播.切页按钮控制.页码下标更新.滑动轮播.切页后的回调等等 . 下面,先上一个简陋的gif动态效果图从图中可以看出,该示例包括了 ...
unity实现图片轮播效果_unity 背景无限循环滚动效果
背景无限循环滚动效果如下示: 步骤如下: 导入背景图片后,设置图片的格式,如下图: 2.图片格式也可以设置是Texture格式,但是Wrap Mode 一定要是Repeat[重复发生]:然后记得App ...
Unity之图片轮播组件实现
博客迁移个人博客站点,欢迎访问,www.jiingfengji.tech 正文游戏中有时候会见到图片轮播的效果,那么这里就自己封装了一个,包括自动轮播.切页按钮控制.页码下标更新.滑动轮播.切页后 ...
网站项目必备——12款白富美型 jQuery 图片轮播插件
转自:http://www.cnblogs.com/lhb25/archive/2013/01/06/jquery-image-carousel-effect.html 图片轮播是网站中的常用功能,用 ...
DEDECMS后台上传banner图控制图片轮播
将图片轮播做到后台控制,无论是dedecms还是其他的程序都是一样的重要,方便客户自己调试,不然动不动就拿FTP开刷,一个是操作不方便,增加了使用上的难度,另外也有一定的风险,很可能由于操作生疏,误操 ...
android首页图片轮播效果,Android_Android自动播放Banner图片轮播效果，先看一下效果图支持本地图 - phpStudy...
Android自动播放Banner图片轮播效果先看一下效果图支持本地图片以及网络图片or本地网络混合. 使用方式: android:id="@+id/banner" andro ...
淘宝装修：第一日 —— 图片轮播
先添加一个自定义内容区,进入源码编辑,如下图所示: 添加源码如下: <TABLE border=0 cellSpacing=0 cellPadding=0 width=773 height=22 ...
电子商店——图片轮播
电子商店的图片轮播功能,有以下特点 1. 高性能 2. 美观大方 3. 兼容IE 6.IE 8+和Firefox 3+等浏览器 4. 总体积要小(除图片外)3k 5. js简单易懂(40行) 首先让我 ...

unity之环状图片轮播

一、效果图

二、效果制作

三、工程下载

unity之环状图片轮播相关推荐

最新文章

热门文章