导语
这次作业主要是练习UI制作,我使用了NGUI来实现了一个ScrollView选择板效果。实例效果如下:http://www.tasharen.com/ngui/example7.html (使用IE11及翻墙)
主要实现的效果如下:
- 选择板可以拖动
- 鼠标hover到item上面,出现item变大的动画效果
视频演示
先上最终效果,后面是步骤分析:
https://www.bilibili.com/video/av24425629/
实现过程
选择板的实现分为两个部分:一是选择框及里面的选项内容;一是选择框后面的背景栏。
选择面板的实现
这个作业的难度在于控制选择面板的显示,这里我利用了一个画布和UIDragCamera来实现。首先创建一个空对象,并且添加一个UIRoot脚本,用于控制UI视口大小。然后在其内部放置一个摄像机,添加UIViewPort和UIDraggableCamera脚本,并设置viewport大小。UIViewport组件是实现该摄像机视图在主UICamera上显示,UIDraggableCamera的功能是确定主要拖动的父物体。如下图: