ScrollRect滑动优化(四)_Unity—Item图片轮播效果

Unity图片轮播图功能实现 阅读详情

 直接看效果好了,我只弄了两张图片。支持左右滑动。

如果有更好实现的方式,麻烦请告知,网上看无限滑动的例子很多都是动态增减item,我这个是改变每个item的位置来实现无限滑动。

此为Lua代码


local ImageCarousel = class("ImageCarousel")

function ImageCarousel:ctor()

end

function ImageCarousel:Awake()

    self.contents = self.transform:Find("Viewport/Contents")
    self.Btn_Live = self.contents.transform:Find("Btn_ads_Live");
    self.Btn_lottery = self.contents.transform:Find("Btn_ads_lottery");

    self.isLeft = true
    self.isAuto = true
    self.isCheck = false
end

function ImageCarousel:Start(eventData)

    local callback = Delegete:New(typeof(CS.UnityEngine.GameObject), Handler(self, self.BtnClick))
    self.gameObject:SetBtnOnClickListener(callback)

    self.ScrRect = self.gameObject:GetComponent(typeof(CS.UnityEngine.UI.ScrollRect))

    self.Posy = self.Btn_Live.transform.localPosition.y
    self.Posz = self.Btn_Live.transform.localPosition.z

    --添加图形块,图块偏移依据于此
    self.objList = { } 
    self.objList[#self.objList + 1] = self.Btn_Live
    self.objList[#self.objList + 1] = self.Btn_lottery

    self.imageWidth = self.Btn_lottery.transform.localPosition.x - self.Btn_Live.transform.localPosition.x
    self.LeftTargePos = 0
    self.RightTargePos = self.imageWidth

    self.ScrContent = self.ScrRect.content
    self.LeftScrContTargePosX = 0
    self.RightScrContTargePosX = - self.imageWidth
end

function ImageCarousel:OnDisable()

end

function ImageCarousel:OnDestroy()
    
end

function ImageCarousel:Update()
    self:StartExecute()
end

function ImageCarousel:BtnClick(btn)

    if (btn.name == "Btn_test1") then
        Log.info("test1")
    elseif (btn.name == "Btn_test2") then
        Log.info("test2")
    end
end

function ImageCarousel:OnBeginDrag(eventData)
    TimerManager.CancleInvoke("OnPauseMove")
    self.MovePos = CS.UnityEngine.Input.mousePosition.x
    self.isAuto = false

end

function ImageCarousel:OnEndDrag(eventData)

    self.isAuto = true
end

function ImageCarousel:OnDrag(eventData)

    if self.MovePos ~= CS.UnityEngine.Input.mousePosition.x then

        local value = self.MovePos - CS.UnityEngine.Input.mousePosition.x
        --Log.Info("move: " .. self.MovePos .. ", mouse: " .. CS.UnityEngine.Input.mousePosition.x .. ", value" .. value)
        if value >= 0 then
            self.isLeft = true
        else
            self.isLeft = false
        end

        self.MovePos = CS.UnityEngine.Input.mousePosition.x
    end
end

function ImageCarousel:OnPointerDown(eventData)

end

function ImageCarousel:OnPointerUp(eventData)

end

function ImageCarousel:OnPointerClick(eventData)
    
end

function ImageCarousel:CheckSlipper(gob, isLeft)

    self.isCheck = true
    if isLeft then
        --图块跳转
        gob.transform.localPosition =  Vector3(self.LeftTargePos + #self.objList * self.imageWidth, self.Posy, self.Posz) 

        --偏移计算
        self.LeftTargePos = self.LeftTargePos + self.imageWidth
        self.LeftScrContTargePosX = self.LeftScrContTargePosX - self.imageWidth

        --偏移计算
        self.RightTargePos = self.RightTargePos + self.imageWidth
        self.RightScrContTargePosX = self.RightScrContTargePosX - self.imageWidth

        --位置校准
        self.ScrContent.transform.localPosition = Vector3(self.LeftScrContTargePosX, self.Posy, self.Posz)
    else
        
        gob.transform.localPosition =  Vector3(self.RightTargePos - #self.objList * self.imageWidth, self.Posy, self.Posz)

        self.RightTargePos = self.RightTargePos - self.imageWidth
        self.RightScrContTargePosX = self.RightScrContTargePosX + self.imageWidth

        self.LeftTargePos = self.LeftTargePos - self.imageWidth
        self.LeftScrContTargePosX = self.LeftScrContTargePosX + self.imageWidth

        self.ScrContent.transform.localPosition = Vector3(self.RightScrContTargePosX, self.Posy, self.Posz)
    end

    if self.isAuto then
        self.isAuto = false
        --计时器,等待5s后运行
        TimerManager.Invoke("OnPauseMove", 5,function()
            self.isAuto = true
        end )
    end
    self.isCheck = false
end

function ImageCarousel:StartExecute()

    if self.isCheck then
        return
    end
    for i = 1, #self.objList do
        if self.isLeft then
            if self.isAuto then
                self.ScrContent.transform.localPosition = Vector3(self.ScrContent.transform.localPosition.x - 10, self.Posy, self.Posz)
            end

--            Log.Info(self.ScrContent.transform.localPosition.x,"X")
--            Log.Info(self.LeftScrContTargePosX - self.imageWidth,"left")

--            Log.Info(self.LeftTargePos,"TargetPos")
            if self.ScrContent.transform.localPosition.x <= self.LeftScrContTargePosX - self.imageWidth and self.objList[i].transform.localPosition.x == self.LeftTargePos then   
                self:CheckSlipper(self.objList[i], self.isLeft)
                break
            end
        else
            if self.isAuto then
                self.ScrContent.transform.localPosition = Vector3(self.ScrContent.transform.localPosition.x + 10, self.Posy, self.Posz)
            end

--            Log.Info(self.ScrContent.transform.localPosition.x,"X")
--            Log.Info(self.RightScrContTargePosX + self.imageWidth,"Right")

--            Log.Info(self.RightTargePos,"TargetPos")
            if self.ScrContent.transform.localPosition.x >= self.RightScrContTargePosX + self.imageWidth and self.objList[i].transform.localPosition.x == self.RightTargePos then
                self:CheckSlipper(self.objList[i], self.isLeft)
                break
            end
        end
    end

end

return ImageCarousel

在结尾附上Demo的链接: https://download.youkuaiyun.com/download/le_sam/10887047

Unity UGUI图片轮播组件:从原理到实现的免费开源方案 图片轮播(Carousel)作为UI交互的基石,广泛应用于移动应用、网页和游戏界面,其核心原理是通过控制视图容器内元素的顺序切换,实现信息的动态展示。在Unity引擎中,UGUI(Unity GUI)是构建游戏内用户界面的主流技术方案,它基于GameObject和组件系统,提供了强大的可视化编辑能力和稳定的渲染管线。通过结合协程(Coroutine)进行异步时序控制,开发者可以实现流畅的自动轮播与动画过渡;利用Scroll Rect组件的事件系统(如OnBeginDrag、OnEndDrag)则能高效处理用 阅读详情

相关推荐

Unity UGUI循环轮播图实现:告别卡顿,打造丝滑无限滚动体验

在UI开发中,轮播图(Carousel)是一种常见的交互组件,用于高效展示多个内容项。其核心原理是通过有限的视觉元素模拟无限循环的滚动效果,这通常涉及对滚动容器(如ScrollRect)的精准控制和数据索引的循环映射。从技术价值看,一个优秀的循环轮播方案能显著提升用户体验与应用性能,避免因边界处理不当导致的卡顿或逻辑中断。在Unity UGUI框架下,实现这一效果的关键在于结合锚点布局与虚拟列表思想,通过动态重置内容位置与更新数据绑定,创造出无缝的视觉循环。这种技术广泛应用于游戏活动界面、应用商城展示等需要

weixin_33725239的博客 304

Unity的图片轮播

unity的UI图片轮播,实现按顺序图片外部导入,获取图片名称,点击按钮滑动图片和鼠标滑动图片

shijinlinaaa的博客 9144

Unity简易ScrollRect实现:从原理到实战,掌握UI滚动核心机制

在UI开发中,滚动视图是展示大量内容的基础交互组件,其核心原理涉及视口裁剪、坐标转换与运动物理模拟。通过理解视口(Viewport)、内容容器(Content)与锚点定位的协同机制,开发者可以构建高性能、可定制的滚动解决方案,尤其适用于移动端优化与非标准动画需求。本文基于Unity引擎,深入剖析了拖拽输入处理、弹性边界与惯性滑动的实现细节,通过一个轻量级自定义ScrollRect组件,演示了如何从事件监听、位置计算到性能优化的完整开发流程,帮助开发者掌握UI滚动的底层逻辑与工程实践。

weixin_30731305的博客 373

Unity自动从本地加载图片实现图片轮播(图片数量可任意删减)

使用DOtween插件实现图片轮播,用文件字节流的方式实现图片加载(图片数量可任意删减)。

weixin_56166431的博客 1677

Unity ScrollView深度解析:从原理到性能优化的UI滚动视图实战指南

在Unity UI开发中,滚动视图是处理超出可视范围内容的核心交互组件,其本质是一个由Scroll Rect、Mask、Content和Scrollbar等多个组件协同工作的复合系统。理解其工作原理,关键在于掌握内容布局与滚动方向的匹配、滚动边界的动态计算以及事件处理机制。这一技术对于实现流畅的列表展示、动态加载和复杂交互至关重要,广泛应用于游戏背包、社交信息流、商品列表等场景。本文聚焦于ScrollView的深度配置与性能优化,通过对象池技术管理动态内容,并利用Canvas.ForceUpdateCanv

442

Unity UGUI无限滑动组件底层原理与性能优化

无限滑动是移动端UI中高频出现的基础交互模式,其本质并非视觉动效,而是基于坐标映射、状态管理与资源复用的系统工程。核心原理在于构建独立于ScrollRect的虚拟位置系统,通过逻辑索引与物理坐标的双向映射实现循环语义;关键技术价值体现在内存可控(常驻3~5个Item)、滑动响应精准(支持拖拽加速度与惯性衰减)、以及跨设备稳定性(规避normalizedPosition浮点误差与Canvas重建风暴)。典型应用于Banner轮播、角色图鉴、新闻卡片流等左右无限翻页场景。本文深入UGUI底层机制,聚焦虚拟位置映

weixin_33835461的博客 519

Unity UGUI高性能图片滑动插件开发:动态加载、对象池与Dotween动画集成

在Unity UGUI开发中,实现高性能的图片滑动功能是移动端应用和UI密集型项目的常见需求。其核心原理在于通过数据与视图分离的模式,结合动态加载和对象池技术,仅实例化视口范围内的UI元素,从而大幅降低内存开销和渲染压力。这项技术的工程价值在于能够流畅处理大量图片数据的展示,避免卡顿,提升用户体验。典型的应用场景包括相册浏览、商品轮播图、动态照片墙等需要频繁滑动交互的界面。本文深入探讨了如何基于UGUI构建一个支持惯性滚动、弹性边界和分页吸附的滑动插件,并重点介绍了如何集成Dotween实现丝滑的动画效果,

weixin_27960253的博客 237

Unity UGUI轮播图实现:基于ScrollRect的核心原理与工程实践

在Unity UGUI开发中,滚动视图是构建动态内容展示界面的基础组件。其核心原理是通过视口遮罩与内容区域的相对位移,实现有限区域内的内容浏览。这一技术为列表、画廊等交互场景提供了高效的解决方案,尤其在移动端应用和游戏UI中广泛应用。ScrollRect作为Unity内置的滚动视图组件,集成了触摸拖拽、惯性滚动和边界处理等原生功能,大幅降低了开发复杂度。通过合理配置其参数并编写控制逻辑,开发者可以快速实现轮播图这一常见UI模式。本文聚焦于利用ScrollRect实现轮播图的核心技术,涵盖循环滚动、自动播放等

weixin_29009881的博客 275

Unity高性能列表视图SuperScrollView:原理、实战与性能优化

在Unity UI开发中,高效渲染海量数据列表是常见的性能挑战。其核心原理在于对象池与按需渲染技术,通过复用有限的UI元素来展示大量数据项,从而大幅降低内存开销与渲染压力。这项技术的核心价值在于保障复杂UI表现力的同时,实现丝滑的滚动体验,尤其适用于聊天窗口、排行榜、背包系统等高交互性场景。本文以SuperScrollView为例,深入解析其数据驱动架构与动态高度计算机制,并针对单元格复用、异步加载等热词场景,提供从基础实现到高级调优的完整工程实践方案,帮助开发者应对移动端性能瓶颈。

weixin_34034261的博客 381

Unity图片自动轮播带滑动切换

unity实现一个简单的RawImage图片自动轮播功能,用来做待机界面的。UGUI+DOTween,具有滑动切换效果,外部加载图片,带完整场景。

使用Unity3d实现一个简单的桌面图片轮播工具

使用Unity3d实现一个简单的桌面图片轮播工具

深入探讨并实现Unity图像轮播

深入探讨并实现Unity图像轮播 最近接了一个展厅的小项目,需求中有一个图像轮播的小功能,本来以为这是一碟小菜,心想瞬间有了N中解决方案,然而,现实是pia pia打脸,幸好最终完美实现了效果,才保住了作为公司其他人心目中“大神”的老脸。 ...

Hello,World! 1万+

Unity Carousel轮播图像插件

触控拖动转轮;支持循环轮播;支持两端透明掩码;支持两端大小缩放;效果图及原理图请参见: https://blog.youkuaiyun.com/sdhexu/article/details/123247910

Unity3d C#实现基于UGUI ScrollRect的轮播图效果功能(含源码)

轮播功能是一种常见的页面组件,用于在页面中显示多张图片/素材并自动或手动进行切换,以提高页面的美观度和用户体验。主要的功能是:自动/手动切换;平滑的切换效果;导航指示器等。可惜Unity的UGUI系统里没有现成的实现该功能,所以这里直接基于ScrollRect来实现该组件功能。在上述功能上新增了无限轮播、鼠标悬停暂停轮播、鼠标拖拽轮播、竖向轮播等功能。在上述功能上新增了无限轮播、鼠标悬停暂停轮播、鼠标拖拽轮播、竖向轮播等功能。实现的思路是基于UGUI的ScrollRect组件用于滑动效果

qq_33789001的博客 9080

Unity3d C#实现UGUI ScrollRect的轮播图效果

建议先看说明:https://blog.youkuaiyun.com/qq_33789001/article/details/140130682 轮播功能是一种常见的页面组件,用于在页面中显示多张图片/素材并自动或手动进行切换,以提高页面的美观度和用户体验。主要的功能是:自动/手动切换;平滑的切换效果;导航指示器等。可惜Unity的UGUI系统里没有现成的实现该功能,所以这里直接基于ScrollRect来实现该组件功能。在上述功能上新增了无限轮播、鼠标悬停暂停轮播、鼠标拖拽轮播、竖向轮播等功能。实现的思路是基于UGUI的ScrollRect组件用于滑动效果,而其中的HorizontalLayoutGroup或者VerticalLayoutGroup对Content的内容进行排序,平滑的切换效果是使用移动的动画效果(插件DOTweenPro),其余的核心就是轮播的时候对Content的位置进行计算和移动。以下是部分实现的过程。工程基于Unity3d 2020.3.28f1c1版本实现。这里鼠标滑动的操作依托于ScrollRect组件,而鼠标进入取消轮播,鼠标移出恢复轮播。。

Unity实现图片轮播组件

主要为大家详细介绍了Unity实现图片轮播组件的相关方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

Unity——滑动轮播图(2种)

在做Unity项目中轮播图是比较常见的,我们在网上也能找到不少资源,但是呢,很多时候你找到的资源并不能满足你项目的需求,这个时候就需要自己写或者找别人帮忙写,我的能力不是很强就花钱找的别人写的。下面是第二种,这个是可以随手指滑动而左右切换,我之前想通过修改上面的来达到下面的效果,但是呢效果很难看而且逻辑上很容易出现问题,在网上看了不少,有一个插件。下面是效果图,一开始的是只有3张图展示,这个是之后我自己改的,这个里面倒是有些功能适合,但是我太菜了改不动,只能找人。他这个每个位置都是可以调的。

m0_65949136的博客 897

VSLAM框架对比

格VSLAM特点介绍: (一)ORB-SLAM2 (二)ORB-SLAM3 (三)LSD-SLAM (四)

ljtx200888的博客 2294
上一篇: Lua__读取指定路径下的.Lua文件
下一篇: Lua___面向对象的使用案例(XLua)
Le_Sam
博客等级 码龄11年 342粉丝 53原创
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值