demo-ui 源码分析 知识点总结

项目链接：https://github.com/cocos-creator/demo-ui

1.游戏开始效果loading、mask遮罩

来看看这个游戏加载特效是怎么实现的

障眼法：利用黑色遮罩层和Loading文字，改变它们的透明度。其中遮罩层属于纯色节点

2.隐藏和显示节点

在同一个场景下，所有的子界面从一开始就已经准备好了，只是通过隐藏和显示子节点，又或者是把子节点从外面进入到主界面

3.组合节点、一组精灵

很多复杂的UI系统，都是通过子节点层层嵌套，构成一组精灵，它们就是通过很多组精灵构成一个大整体

4.弹回效果

5.常用组件Widget、Layout布局

Widget (对齐挂件) 是一个很常用的 UI 布局组件。它能使当前节点自动对齐到父物体的任意位置，或者约束尺寸，让你的游戏可以方便地适配不同的分辨率

Layout 是一种容器组件，容器能够开启自动布局功能，自动按照规范排列所有子物体，方便用户制作列表、翻页等功能

6.Scrollview

ScrollView 是一种带滚动功能的容器，它提供一种方式可以在有限的显示区域内浏览更多的内容。通常 ScrollView 会与 Mask 组件配合使用，同时也可以添加 ScrollBar 组件来显示浏览内容的位置

通常一个 ScrollView 的节点树如下图：

这里的 View 用来定义一个可以显示的滚动区域，所以通常 Mask 组件会被添加到 View 上。可以滚动的内容可以直接放到 content 节点或者添加节 content 的子节点上

Mask 组件用于规定子节点可渲染的范围，带有 Mask 组件的节点会使用该节点的约束框（也就是 属性检查器 中 Node 组件的 Size 规定的范围）创建一个渲染遮罩，该节点的所有子节点都会依据这个遮罩进行裁剪，遮罩范围外的将不会渲染

ScrollBar 一般不会单独使用，它需要与 ScrollView 配合使用，另外 ScrollBar 需要指定一个 Sprite 组件，即属性面板里面的 Handle

7.进度条