CocosCreator学习笔记11

一、 用脚本来控制一个加载界面（LoadingScreen）中的进度条（progressBar）和百分比文本（progressLabel）的更新。

方法：

1.创建两个progressBar和progressLabel的成员变量，将对应组件拖入。

2.在onLoad里面初始化进度条。

3.写一个方法来设置进度条进度和百分比文本。

代码如下：

 代码解析：

1.在类中定义了两个成员变量，冒号后面为变量的类型

2.分别使用了@property装饰器来标记为序列化属性，可以在面板上显示，并初始化为空。

还要将进度条和文本组件拖到对应的位置上，这样代码就能控制这两个组件了  。

 

 创建了一个方法命名为updateProgress，这个方法接受了一个参数progress类型为number

progress/100这个是将进度转换成0-1之间的小数，然后将该值设置给进度条的progress属性

 又通过模板字符串的方式progress的值转换为字符串并添加百分号后赋值给百分比文本的string属性。

运行代码后效果如下：

二、接下来要让进度条和百分数动态加载

方法：

1.要控制的是LoadingScreen组件就要声明变量，并显示到面板上让其挂载

2.在start（）里面让loading界面显示，并初始化进度条，再用一个定时器setInterval

在里面模拟进度条的加载。使用完计时器后记得清除计时器。

代码如下：

代码解析：

 通过“./Loading”路径导入了一个LoadingScriene的模块，以便在后续代码中来声明属性、变量或创建对象实例等。

 声明变量并且设置在面板上，还要将LoadingScreen和Slider组件拖到Game1Svene所挂载的节点的对应位置上，这样可以通过代码控制这些节点。

保证Loading界面一开始是显示的 

定义一个progress并初始化为0

使用了interval方法设置了时间间隔为100ms的定时器 

箭头函数内是每次回调函数都使progress加5，用来模拟场景加载。

 

将清除定时器

 只要没达到100就更新进度条和百分比显示，没有这行代码进度条和百分数就不会改变。

最后还要挂载对应组件

 运行效果随着进度条增加，百分比也同样增加，达到百分之百以后隐藏loading界面