UnityUGUI实现ScrollView 滑动居中的放大、其他的缩小,简单实现方法

效果图:
使用到的技术:
UGUI的ScrollView
DoTween

实现原理:
首先创建一个ScrollView组件用于放置节点
UnityUGUI实现ScrollView 滑动居中的放大、其他的缩小,简单实现方法_第1张图片

创建一个空的RectTransForm作为中心标识组件
UnityUGUI实现ScrollView 滑动居中的放大、其他的缩小,简单实现方法_第2张图片
原理
将每个展示滑块和中心标识做距离的绝对值进行判断,中心点最小为0,滑块最大
UnityUGUI实现ScrollView 滑动居中的放大、其他的缩小,简单实现方法_第3张图片

贴上Lua伪代码

首先将生成在ScrollView的所有展示滑块保存到self.itemList
然后每次刷新的时候遍历所有子物体(展示滑块)
function HolidayItemCtrl:FreshItem(  )
    local centerPosX = self.view.UI.RectTransform_center.transform.position.x
    for _, _ctrl in pairs(self.itemList) do
        --1.拿到每个展示滑块的位置
        local pos = _ctrl.uiInfo.uiGameObject.transform.position
        --2.获得和中心标识组件的距离
        local dis = math.abs(pos.x - centerPosX)
        --3.判断item与中心标识的距离够不够
        if dis < 250 then
            --4.在距离之内的,距离越近缩放越大
            local dl = (1 - dis/250) * 0.3 + 1
            _ctrl.uiInfo.uiGameObject.transform.localScale = CS_V3(dl, dl + 0.1, dl)
        else
        	--5.距离之外则最小的原值
            _ctrl.uiInfo.uiGameObject.transform.localScale = CS_V3.one
        end
    end
end

监听ScrolView 的滑动事件

function HolidayItemCtrl:AddScrollViewListener(dragCb, target)
	self.UI.ScrollView_showItem_model:GetComponent(typeof(ScrollRect)).onValueChanged:AddListener(function()
		if dragCb then
			dragCb(target)
		end
	end)
end

--将刷新事件注册到滑动事件进行监听
self:AddScrollViewListener(self.FreshItem, self)

左右按钮移动可以使用DoTween,每次移动的时候调用FreshItem函数

项目demo路径:https://download.csdn.net/download/lq1340817945/77132519
学生也可加我QQ免费送

你可能感兴趣的:(Unity客户端开发技术栈,unity,lua,ugui)