效果图:
使用到的技术:
UGUI的ScrollView
DoTween
实现原理:
首先创建一个ScrollView组件用于放置节点
创建一个空的RectTransForm作为中心标识组件
原理
将每个展示滑块和中心标识做距离的绝对值进行判断,中心点最小为0,滑块最大
贴上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免费送
版权声明:本文为lq1340817945原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。