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


OpenHarmony三方组件:LoadingViewJs-鸿蒙开发者社区


LVCircularCDController

setViewColor(color) // 设置主色

2


OpenHarmony三方组件:LoadingViewJs-鸿蒙开发者社区


LVCircularRingController

setViewColor(color)

setBarColor(color) // 设置圆弧颜色

3


OpenHarmony三方组件:LoadingViewJs-鸿蒙开发者社区


LVCircularController

setViewColor(color)

setRoundColor(color) // 设置外圈小圆颜色

4


OpenHarmony三方组件:LoadingViewJs-鸿蒙开发者社区


LVFivePoiStarController

setViewColor(color)

setCircleColor(color) // 设置圆环颜色

5


OpenHarmony三方组件:LoadingViewJs-鸿蒙开发者社区


LVSmileController

setViewColor(color)

6


OpenHarmony三方组件:LoadingViewJs-鸿蒙开发者社区


LVGearsController

setViewColor(color)

7


OpenHarmony三方组件:LoadingViewJs-鸿蒙开发者社区


LVGearsTwoController

setViewColor(color)

8


OpenHarmony三方组件:LoadingViewJs-鸿蒙开发者社区


LVWifiController

setViewColor(color)

9


OpenHarmony三方组件:LoadingViewJs-鸿蒙开发者社区


LVCircularJumpController

setViewColor(color)

10


OpenHarmony三方组件:LoadingViewJs-鸿蒙开发者社区


LVCircularZoomController

setViewColor(color)

11


OpenHarmony三方组件:LoadingViewJs-鸿蒙开发者社区


LVPlayBallController

setViewColor(color)

setBallColor(color) // 设置球的颜色

12


OpenHarmony三方组件:LoadingViewJs-鸿蒙开发者社区


LVNewsController

setViewColor(color)

13


OpenHarmony三方组件:LoadingViewJs-鸿蒙开发者社区



LVLineWithTextController

setViewColor(color)

setTextColor(color) // 设置文字颜色

setLineWidth(lineWidth) // 设置线的颜色

setTextSize(textSize) // 设置文字大小

14


OpenHarmony三方组件:LoadingViewJs-鸿蒙开发者社区


LVEatBeansController

setViewColor(color)

setEyeColor(color) // 设置眼睛颜色

15


OpenHarmony三方组件:LoadingViewJs-鸿蒙开发者社区


LVChromeLogoController

16


OpenHarmony三方组件:LoadingViewJs-鸿蒙开发者社区


LVImgController

setImgPath(imgPath) // 设置旋转的图片路径

17


OpenHarmony三方组件:LoadingViewJs-鸿蒙开发者社区


LVBlockController

setViewColor(color)

setShadowColor(color) // 设置阴影颜色

isShadow(show) // 是否显示阴影

18


OpenHarmony三方组件:LoadingViewJs-鸿蒙开发者社区


LVFunnyBarController

setViewColor(color)

19


OpenHarmony三方组件:LoadingViewJs-鸿蒙开发者社区


LVGhostController

setViewColor(color)

setEyesColor(color) // 设置眼睛颜色

20


OpenHarmony三方组件:LoadingViewJs-鸿蒙开发者社区


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​

LoadingViewJs-master.zip 1.14M 3次下载
收藏
回复
举报
回复
    相关推荐