OpenHarmony三方组件：LoadingViewJs

Handpc

发布于 2023-3-17 09:51

浏览

0收藏

HarmonyOs中有个Loading动画组件(HarmonyOS-TPC/LoadingView)，效果很不错，想着在OpenHarmony的JS上将其实现一下，此LoadingViewJs组件便因此诞生了！

效果图

OpenHarmony三方组件：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画布组件根据当前进度值重新绘制图形，以此便可达到动画的效果。

entry运行要求

SDK 6+

LICENSE

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.

文章转载自：https://gitee.com/openharmony-tpc/LoadingViewJs

分类

卡片开发

三方件

标签

OpenHarmony

LoadingViewJs-master.zip 1.14M 7次下载