代码拉取完成,页面将自动刷新
HarmonyOs中有个Loading动画组件(HarmonyOS-TPC/LoadingView),效果很不错,想着在OpenHarmony的JS上将其实现一下,此LoadingViewJs组件便因此诞生了!
所有LoadingView的初始化、开始动画、结束动画都是一样的,此处仅以LVCircularCD为例
1.在你的css中定义你的组件宽高(也可以在hml中通过style来定义)
.loading_view {
width: 150px;
height: 150px;
}
2.在你的hml中写布局,使用你想用的自定义LoadingView组件
<element name='lv_circular_cd' src='../../common/component/LVCircularCD/LVCircularCD.hml'></element>
<lv_circular_cd
class="loading_view"
id="lvCircularCD"
onclick="start"
controller="{{ lvCircularCDController }}">
</lv_circular_cd>
3.在你的js中通过LoadingViewController初始化LoadingView的属性
import {LVCircularCDController} from '../../common/component/LVCircularCD/LVCircularCDController.js'
export default {
data: {
lvCircularCDController: null
},
onInit() {
this.lvCircularCDController = new LVCircularCDController()
.setViewColor("#00FF00") // 设置LoadingView的主色
},
start() {
this.$child('lvCircularCD').stopAnim() // 停止动画
this.$child('lvCircularCD').startAnim() // 开始执行动画
},
stop() {
this.$child('lvCircularCD').stopAnim() // 停止动画
}
}
除LVLineWithText
外,所有的LoadingView都有三个方法用来开始和停止动画startAnim()
、startAnimWithTime(time)
、stopAnim()
LVLineWithText
则通过setValue(value)
方法来修改进度值
下表为各LoadingView设置属性的方法
Id | Picture | Name | Method |
---|---|---|---|
1 | LVCircularCDController | setViewColor(color) // 设置主色 | |
2 | LVCircularRingController | setViewColor(color) setBarColor(color) // 设置圆弧颜色 |
|
3 | LVCircularController | setViewColor(color) setRoundColor(color) // 设置外圈小圆颜色 |
|
4 | LVFivePoiStarController | setViewColor(color) setCircleColor(color) // 设置圆环颜色 |
|
5 | LVSmileController | setViewColor(color) | |
6 | LVGearsController | setViewColor(color) | |
7 | LVGearsTwoController | setViewColor(color) | |
8 | LVWifiController | setViewColor(color) | |
9 | LVCircularJumpController | setViewColor(color) | |
10 | LVCircularZoomController | setViewColor(color) | |
11 | LVPlayBallController | setViewColor(color) setBallColor(color) // 设置球的颜色 |
|
12 | LVNewsController | setViewColor(color) | |
13 | LVLineWithTextController | setViewColor(color) setTextColor(color) // 设置文字颜色 setLineWidth(lineWidth) // 设置线的颜色 setTextSize(textSize) // 设置文字大小 |
|
14 | LVEatBeansController | setViewColor(color) setEyeColor(color) // 设置眼睛颜色 |
|
15 | LVChromeLogoController | 无 | |
16 | LVImgController | setImgPath(imgPath) // 设置旋转的图片路径 | |
17 | LVBlockController | setViewColor(color) setShadowColor(color) // 设置阴影颜色 isShadow(show) // 是否显示阴影 |
|
18 | LVFunnyBarController | setViewColor(color) | |
19 | LVGhostController | setViewColor(color) setEyesColor(color) // 设置眼睛颜色 |
|
20 | LVBatteryController | setViewColor(color) setCellColor(color) // 设置已充电区域的颜色 setTextSize(textSize) // 设置文字大小 setPadding(paddingVertical, paddingHorizontal) //设置内间距 |
通过数值动画不停的修改进度值,再让canvas画布组件根据当前进度值重新绘制图形,以此便可达到动画的效果。
SDK 6+
Copyright (c) 2021 ZhangXiaoqiu
LoadingViewJs is licensed under Mulan PSL v2.
You can use this software according to the terms and conditions of the Mulan PSL v2.
You may obtain a copy of Mulan PSL v2 at:
http://license.coscl.org.cn/MulanPSL2
THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
See the Mulan PSL v2 for more details.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。