当前位置: 首页 > news >正文

unity UGUI无限循环滚动居中

最近在做一个ui循环滚动的功能,网上找了半天脚本感觉都和我实际需求不太符合,自己花费一些时间完成了这个功能记录一下。下面开始正题
,我是采用unity自带组件Scroll View来完成,首先设置Scroll View如下图
我是横屏你可以根据情况选择你的
面板层级结构如下
层级面板结构
然后创建一个预制体,预制体需要锚点到左侧中心点,设置为起始点,设置完成后把这个图片随便放个层级不要在本层级,不要影响后面生成。
红色就是UI
然后开始编写代码,我就直接贴了,不懂可以看一下注释,因为我是水平所以判断用的都是x轴,如果你是垂直你改成y稍微修改一下代码就可以了,差别应该不大。

using DG.Tweening;
using System.Collections;
using System.Collections.Generic;using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;public class LoopScroll : MonoBehaviour,IBeginDragHandler  
{public List<Sprite> photographList;[Header("中心点")]public Transform Centre;private Vector3 startPos, endPos;[Header("预制体")]public GameObject item;[Header("预制体父级")]public Transform Content;[HideInInspector]public List<Transform> itemList;bool isDrag = false, isAdsorption;float MaxDis, MinDis;[Header("间隔距离")]public float SpacingDistance = 100;[Header("缩放倍数")]public float Scale =1;Transform tempCentre;   public Text tempCentreName;private void Awake(){instantiationItem();}void Start(){            isDrag = true;//设置第一个坐标与最后一个坐标位置startPos = itemList[0].position;endPos = itemList[itemList.Count - 1].position;startPos.x -= itemList[0].GetComponent<RectTransform>().rect.width /2;endPos.x += itemList[0].GetComponent<RectTransform>().rect.width / 2;//求出最远距离for (int i = 0; i < itemList.Count; i++){var dis = Vector3.Distance(itemList[i].position, Centre.position);if (dis > MaxDis){MaxDis = dis;MinDis = dis;}}}void instantiationItem()//生成预制体设置初始坐标{for (int i = 0; i < photographList.Count; i++){var t = Instantiate(item, Content);t.GetComponent<Image>().sprite = photographList[i];t.name = photographList[i].name;var pos = new Vector3((t.GetComponent<RectTransform>().rect.width + SpacingDistance) * (i), 0, 0);pos.x += t.GetComponent<RectTransform>().rect.width;t.GetComponent<RectTransform>().anchoredPosition = pos;itemList.Add(t.transform);}}void Islimit() //设置坐标切换与列表内元素与面板层级切换 保证层级与列表内数据同步{if (isDrag){for (int i = 0; i < itemList.Count; i++){if (itemList[i].position.x < startPos.x){itemList[i].position = itemList[itemList.Count - 1].position + new Vector3(SpacingDistance + itemList[0].GetComponent<RectTransform>().rect.width, 0, 0);var temp = itemList[i];itemList.Remove(itemList[i]);itemList.Add(temp);temp.SetSiblingIndex(itemList.Count - 1);}if (itemList[i].position.x > endPos.x){itemList[i].position = itemList[0].position - new Vector3(SpacingDistance + itemList[0].GetComponent<RectTransform>().rect.width, 0, 0);var temp = itemList[i];itemList.Remove(itemList[i]);itemList.Insert(0, temp);temp.SetSiblingIndex(0);}}}}void ScaleDistance()//根据百分比设置缩放动画{for (int i = 0; i < itemList.Count; i++){double dis = Vector3.Distance(itemList[i].position, Centre.position) / MaxDis;if (!double.IsInfinity(dis)){if (dis > 0){if (dis<0.05f){itemList[i].localScale = Vector3.one * ((1f - (float)dis) * Scale) ;}else{itemList[i].localScale = Vector3.one * ((1f - (float)dis) * Scale) * 0.8f;}}}} }Tween tw;void Adsorption() //停止滑动进行吸附{for (int i = 0; i < itemList.Count; i++)//找出距离中心点最近的{float dis = Vector3.Distance(itemList[i].position, Centre.position);if (dis < MinDis){tempCentre = itemList[i];tempCentreName.text = itemList[i].name;}MinDis = dis;}if (GetComponent<ScrollRect>().velocity.x==0 && isAdsorption == false)//判断当前滑动结束{//计算当前距离中心差多远后 进行吸附if (tempCentre){var dis = Centre.position - tempCentre.position;tw = Content.DOMoveX(Content.position.x + dis.x, 0.5f);tempCentre = null;isAdsorption = true;}else{isAdsorption = false;}}else if (GetComponent<ScrollRect>().velocity.x!=0)//如果在吸附过程中点击拖拽强制结束吸附动画{isAdsorption = false;tw.Kill();}}// Update is called once per frame  void Update(){Islimit();ScaleDistance();Adsorption();}public void OnBeginDrag(PointerEventData eventData){tw.Kill();}
}

下面这个是脚本设置,主要关注的就是公开的变量我都有注释,结合上面的面板图很轻易就能看出来,第一个就是循环图片,间隔距离是两个图片之间的距离,缩放倍数是中间最大是多少倍,根据你工程设置,默认设置1就可以了,最后面的text是显示居中ui的名字,名字的设置是根据图片名称来的。
在这里插入图片描述
运行后这三个内容层级都会同步,可以进行一些你想要的操作
在这里插入图片描述

最后说下使用了Dotween插件,吸附居中功能我是感觉有点延迟,但是还没找到更好的方法,如果大家有更好的方法欢迎大佬留言,完成上面的设置就可以畅快玩耍了~~

相关文章:

unity UGUI无限循环滚动居中

最近在做一个ui循环滚动的功能&#xff0c;网上找了半天脚本感觉都和我实际需求不太符合&#xff0c;自己花费一些时间完成了这个功能记录一下。下面开始正题 &#xff0c;我是采用unity自带组件Scroll View来完成&#xff0c;首先设置Scroll View如下图 面板层级结构如下 然…...

人工智能与新能源电动车的融合——技术创新引领未来交通革命

人工智能与新能源电动车的融合——技术创新引领未来交通革命 摘要&#xff1a;本文探讨了人工智能与新能源电动车领域的技术融合&#xff0c;分析了其在智能驾驶、电池技术、充电设施等方面的应用与创新。文章指出&#xff0c;这两大技术的结合将重塑交通产业&#xff0c;为我…...

交换机堆叠 配置(H3C)堆叠中一台故障如何替换

交换机堆叠 配置&#xff08;H3C&#xff09;堆叠中一台故障如何替换 堆叠用来干什么&#xff1f;配置两台成员设备的 IRF&#xff08;堆叠&#xff09;Switch01配置Switch02配置 如何替换堆叠中坏掉的一台交换机 堆叠用来干什么&#xff1f; 一台交换机网口有限&#xff0c;无…...

2024年软考有哪些考试科目?具体考什么内容?

软考分为三个考试层次&#xff0c;软考初级、中级和高级&#xff0c;每个层次的考试科目&#xff0c;其考试内容都是不一样的。报考时先选层次&#xff0c;再选科目。选好科目后&#xff0c;再看自己需要学习哪些内容。 一、软考初级科目 1.程序员&#xff1a; 考核内容&…...

2023.11.12 hive中分区表,分桶表与区别概念

1.分区表 分区表的本质就是在分目录 当Hive表对应的数据量大、文件多时&#xff0c;为了避免查询时全表扫描数据。比如把一整年的数据根据月份划分12个月&#xff08;12个分区&#xff09;&#xff0c;后续就可以查询指定月份分区的数据&#xff0c;尽可能避免了全表扫描查询。…...

Pass-中间件管理

中间件管理是指对应用软件和操作系统之间的软件层进行管理和调度的过程&#xff0c;以优化应用性能和提高系统可靠性。 中间件管理是什么&#xff1f; 中间件管理是软件开发过程中不可或缺的一部分&#xff0c;它主要负责管理应用程序与操作系统之间的交互。中间件&#xff0…...

什么是GIL锁,有什么作用?python的垃圾回收机制是什么样的?解释为什么计算密集型用多进程,io密集型用多线程。

1 什么是gil锁&#xff0c;有什么作用&#xff1f; 2 python的垃圾回收机制是什么样的&#xff1f; 3 解释为什么计算密集型用多进程&#xff0c;io密集型用多线程。 1 什么是gil锁&#xff0c;有什么作用&#xff1f; 1 GIL&#xff1a;Global Interpreter Lock又称全局解释器…...

Postman如何发送Https请求

Postman如果想要发送Https请求&#xff0c;需要从设置中将SSL安全认证禁用...

Redis集群启动

配置项 # 允许Redis监听所有网络接口的IP地址,即0.0.0.0。这意味着Redis可以接受来自任何网络接口的连接。 bind 0.0.0.0 # 关闭保护模式。在保护模式下,Redis只接受来自本机的连接。关闭保护模式后,Redis可以接受来自任何网络接口的连接。 protected-mode no # 在后…...

使用proxy把后端返回的图片域名替换成目标域名

proxy 对象用于创建一个对象的代理&#xff0c;是在目标对象之前架设一个拦截&#xff0c;外界对该对象的访问&#xff0c;都必须先通过这个拦截。通过这种机制&#xff0c;就可以对外界的访问进行过滤和改写。 ES6 原生提供 Proxy 构造函数&#xff0c;用来生成 Proxy 实例。…...

css实现div倾斜效果

效果如下&#xff1a; <!DOCTYPE html> <html><head><meta charset"UTF-8"><title></title></head> <style> *{margin:0;padding: 0;} .box1{margin:30px 100px;width:100px;height:200px;background:blueviolet;} …...

算法学习打卡day45|动态规划:股票问题总结

Leetcode股票问题总结篇 动态规划的股票问题一共六道题&#xff0c;买卖股票最佳时机和买卖股票手续费都是一个类型的问题&#xff0c;维护好买入和卖出两个状态即可&#xff0c;方法一摸一样。而冷冻期也差不多就是状态多了点&#xff0c;买入、保持卖出、当日卖出、以及冷冻期…...

内网环境下让容器上网,并制作一个httpd容器

1.下载基础镜像 上一次&#xff0c;我们通过正向互联网代理在内网环境中&#xff0c;搭建了一个docker环境&#xff0c;具体环境如下&#xff1a; 1) 内网docker服务器&#xff1a;192.168.123.1&#xff0c;操作系统为&#xff1a;redhat 7.9 2) 代理服务器(可通外网)&#…...

多个Obj模型合并

MergeObj&#xff08;合并Obj模型&#xff09; 1 概述 由于项目原因&#xff0c;需要下载谷歌地图上的模型&#xff0c;关于谷歌模型下载的&#xff0c;见我的CSDN博客. 由于下载谷歌地图上的数据&#xff0c;会分多个模块下载。下载完成后&#xff0c;怎么合并&#xff0c;在…...

Qt调用python写好的函数,利用Python丰富的图像处理库来完成各种任务

一、前言 近年来,Python已经成为一种广泛应用于科学计算、数据分析和机器学习等领域的强大编程语言。其丰富的生态系统和大量的开源库使得Python成为处理图像、音频、视频和其他多媒体数据的理想选择。在图像处理领域,Python提供了许多方便的函数和库,如OpenCV、PIL(Pytho…...

第六章:接口

系列文章目录 文章目录 系列文章目录前言一、接口二、实现接口与继承类三、接口的多态特性总结 前言 接口是更加抽象的类。 一、接口 usb插槽就是现实中的接口&#xff0c;厂家都遵守了统一的规定包括尺寸&#xff0c;排线等。这样的设计在java编程中也是大量存在的。 packa…...

【Java 进阶篇】JQuery DOM操作:CRUD操作的前端魔法

在前端开发的舞台上&#xff0c;CRUD&#xff08;Create, Read, Update, Delete&#xff09;操作是一种极为重要的技能&#xff0c;它涉及对页面元素的增删改查。而JQuery&#xff0c;这位前端开发的魔法师&#xff0c;为我们提供了便捷而强大的方法&#xff0c;使得CRUD操作变…...

如何实现Redisson分布式锁

首先&#xff0c;不要将分布式锁想的太复杂&#xff0c;如果我们只是平时业务中去使用&#xff0c;其实不算难&#xff0c;但是很多人写的文章不能让人快速上手&#xff0c;接下来&#xff0c;一起看下Redisson分布式锁的快速实现 Redisson 是一个在 Redis 的基础上实现的 Java…...

Kafka(三)生产者发送消息

文章目录 生产者发送思路自定义序列化类配置生产者参数提升吞吐量 发送消息关闭生产者结语示例源码仓库 生产者发送思路 如何确保消息格式正确的前提下最终一定能发送到Kafka? 这里的实现思路是 ack使用默认的all开启重试在一定时间内重试不成功&#xff0c;则入库&#xff…...

2020年五一杯数学建模C题饲料混合加工问题解题全过程文档及程序

2020年五一杯数学建模 C题 饲料混合加工问题 原题再现 饲料加工厂需要加工一批动物能量饲料。饲料加工需要原料&#xff0c;如加工猪饲料需要玉米、荞麦、稻谷等。加工厂从不同的产区收购了原料&#xff0c;原料在收购的过程中由于运输、保鲜以及产品本身属性等原因&#xff…...

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

VTK如何让部分单位不可见

最近遇到一个需求&#xff0c;需要让一个vtkDataSet中的部分单元不可见&#xff0c;查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行&#xff0c;是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示&#xff0c;主要是最后一个参数&#xff0c;透明度…...

css的定位(position)详解:相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

安卓基础(aar)

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

【VLNs篇】07:NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

Kafka入门-生产者

生产者 生产者发送流程&#xff1a; 延迟时间为0ms时&#xff0c;也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于&#xff1a;异步发送不需要等待结果&#xff0c;同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...