Unity UGUI 效果 之 ScrollView 轻松实现滚动(内容多少大小可以动态自动调整)预览效果

47 篇文章 17 订阅
13 篇文章 7 订阅

 

 

Unity UGUI 效果 之 ScrollView 轻松实现滚动(内容多少大小可以动态自动调整)预览效果

 

目录

Unity UGUI 效果 之 ScrollView 轻松实现滚动(内容多少大小可以动态自动调整)预览效果

一、简单介绍

二、实现原理

三、注意实现

四、效果预览

五、实现步骤


 

一、简单介绍

UGUI,是Unity自带的 GUI 系统,有别于 NGUI;使用 UGUI 也能制作出比较酷炫的效果 。

本节介绍,使用 UGUI 自带的 ScrollView 和 ContentSizeFitter 组件,轻松实现鼠标拖动滚动预览的效果,方法不唯一,欢迎指正。

 

二、实现原理

1、Scroll View,实现可鼠标滑动滚动功能

2、Content Size Fitter 动态随内容大小调整大小

3、XXLayoutGroup 方便排布内容

 

三、注意实现

1、Content Size Fitter 调整你那个方向可以根据需设置为 Preferred Size

 

 

四、效果预览

 

五、实现步骤

1、打开Unity,新建空工程

 

2、在场景中添加 ScrollView 组件

 

3、在content 上添加 XX Layout Group 组件(根据自己需要滚动预览方向选择)

 

4、添加预览内容

 

5、运行场景,即可滚动预览内容了

 

6、内容,代码中添加的话,可以使用 Content Size Fitter ,根据需要的方向,设置 Preferred Size自动调整 Content 的大小,实现动态调整预览的效果

 

7、运行场景,效果如上

 

  • 8
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
实现Unity UGUI中的ScrollView滑动居中放大,其他的缩小,可以按照以下步骤进行操作: 1. 创建一个ScrollView,用于显示内容,并设置合适的大小和位置。 2. 在ScrollView中创建一个Content对象,用于放置所有需要显示的子对象,并设置Layout Group组件,以确保内容按照一定的布局排列。 3. 在每个子对象上添加一个自定义的脚本,用于控制子对象的缩放和位置。脚本中需要包含以下几个要点: a. 监听ScrollView滑动事件,获取当前的滑动位置。 b. 根据当前滑动位置,计算每个子对象在滑动过程中应该设置的缩放比例。例如,距离居中的子对象应该更大,而距离边缘的子对象应该更小。 c. 根据计算得到的缩放比例,分别对每个子对象进行缩放设置。可以使用RectTransform的scale属性来实现缩放功能。 d. 根据子对象的缩放比例和位置信息,将子对象移动到ScrollView的合适位置。可以使用RectTransform的anchoredPosition属性来实现位置调整。 e. 可以根据需要,在脚本中添加其他的功能,例如点击子对象时的反应等。 4. 将自定义的脚本添加到所有的子对象上,确保每个子对象都能根据滑动进行缩放和位置调整。 通过以上步骤,我们可以实现Unity UGUI中的ScrollView滑动过程中,距离居中的子对象放大,而距离边缘的子对象缩小的效果。具体的缩放比例和位置调整可以根据实际需求进行调整
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

仙魁XAN

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值