Loader 类 和 ProgressBar 类

本文详细介绍了Loader类及其方法和属性,包括如何加载内容、跟踪加载进度等;同时阐述了ProgressBar类的功能,如设置和获取进度、监听加载事件等。这对于理解和使用这两个组件进行资源加载与进度显示非常有用。
Loader 类的方法摘要

方法描述
Loader.load() 加载由 contentPath 属性指定的内容。

Loader 类的属性摘要
属性描述
Loader.autoLoad一个布尔值,指明内容会自动加载 (true) 还是您必须调用Loader.load()才进行加载 (false)。
Loader.bytesLoaded只读属性,指明已经加载的字节数。
Loader.bytesTotal 指明内容中的总字节数的只读属性。
Loader.content 引用由 Loader.contentPath属性指定的内容。该属性为只读。
Loader.contentPath 一个字符串,它指明要加载的内容的 URL。
Loader.percentLoaded 一个数字,它指明已加载内容的百分比。该属性为只读。
Loader.scaleContent 一个布尔值,它指明是内容会进行缩放以适合加载器 ( true),还是加载器会进行缩放以适合内容 (false)。

Loader 类的事件摘要
事件描述
Loader.complete 当内容加载完成时触发。
Loader.progress 在内容加载过程中触发。

ProgressBar 类的方法摘要
方法 描述
ProgressBar.setProgress()在手动模式中设置栏的进程。

ProgressBar 类的属性摘要
属性描述
ProgressBar.conversion 一个数字,用于转换当前所加载字节的值和所加载字节总值。
ProgressBar.direction 进程栏填充的方向。
ProgressBar.indeterminate 指明源的总字节数为未知。
ProgressBar.label进程栏随附的文本。
ProgressBar.labelPlacement 与进程栏相关的标签位置。
ProgressBar.maximum 手动模式中进程的最大值。
ProgressBar.minimum手动模式中进程的最小值。
ProgressBar.mode 进程栏加载内容的模式。
ProgressBar.percentComplete 指明加载百分比的数字。
ProgressBar.source要加载的内容,其进程由进程栏监视。
ProgressBar.value指明已建立的进程的数量。该属性为只读。

ProgressBar 类的事件摘要
事件描述
ProgressBar.complete加载完成时触发。
ProgressBar.progress在事件模式或轮询模式中加载内容时触发。
在 Laya 引擎中,`ProgressBar` 是一种常见的 UI 组件,用于显示任务的进度状态。它支持设置最大值、最小值、当前值,并且可以通过皮肤资源来定义其外观[^1]。 ### 创建进度条 1. **通过代码创建 `ProgressBar`** ```typescript // 创建一个 ProgressBar 实例 const progressBar = new laya.ui.ProgressBar("resources/ui/progress.png"); // 加载皮肤资源 progressBar.width = 200; // 设置进度条宽度 progressBar.height = 30; // 设置进度条高度 progressBar.x = 100; // 设置 X 坐标 progressBar.y = 100; // 设置 Y 坐标 Laya.stage.addChild(progressBar); // 添加到舞台 ``` 2. **通过 Laya IDE 创建 UI 界面** - 在 Laya IDE 中,可以直接拖拽 `ProgressBar` 组件到场景中。 - 设置其属性,例如 `max`、`min`、`value` 以及皮肤资源路径。 ### 设置进度条属性 - **设置最大值与最小值** ```typescript progressBar.max = 100; progressBar.min = 0; ``` - **设置当前进度值** ```typescript progressBar.value = 50; // 设置当前值为 50 ``` - **动态更新进度条** 可以结合定时器或异步加载逻辑来更新进度条的值: ```typescript Laya.timer.loop(100, this, () => { if (progressBar.value < progressBar.max) { progressBar.value += 1; } else { Laya.timer.clear(this, null); } }); ``` ### 进度条样式 - **皮肤资源** - `ProgressBar` 的外观由皮肤资源决定,可以通过设置 `skin` 属性更换不同的皮肤。 - 通常,进度条分为两部分:背景图进度图。进度图会根据当前值进行缩放或裁剪。 ```typescript progressBar.skin = "resources/ui/progress_new.png"; ``` - **方向设置** - 支持水平方向垂直方向的进度条。可以通过 `direction` 属性设置。 ```typescript progressBar.direction = laya.ui.ProgressBar.DIRECTION_HORIZONTAL; // 水平方向 // 或者 progressBar.direction = laya.ui.ProgressBar.DIRECTION_VERTICAL; // 垂直方向 ``` ### 进度条事件 - **监听进度变化事件** ```typescript progressBar.on(laya.events.Event.CHANGE, this, () => { console.log("当前进度值:" + progressBar.value); }); ``` ### 示例:加载资源时使用进度条 ```typescript Laya.loader.load("resources/images/loading.png", laya.utils.Handler.create(this, onLoaded)); function onLoaded() { progressBar.value = 100; console.log("资源加载完成"); } ``` ### 进度条的注意事项 - **资源路径问题** - 确保皮肤资源路径正确,否则进度条可能无法正常显示。 - **性能优化** - 避免频繁更新进度条,特别是在每一帧中更新,可能会导致性能下降。 - **适配问题** - 在不同分辨率设备上,确保进度条的大小位置能够适配屏幕。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值