HarmonyOS三方开源组件——鸿蒙JS实现仿蚂蚁森林

上山打老虎 发表于 2021-8-3 13:51:34

实现的效果图：
::: hljs-center

:::
分析实现过程：
1、接收外部传递给组件的一个数组（小球能量列表），及收集能量动画结束的位置

props: {
//后台返回的小球信息
<space09da727f35d31814bff360fe6a495423Code 0>
<h5>2、根据小球的数量，生成小球的随机位置坐标。</h5>
<pre><code> // 生成小球的x坐标数组
let xRandom = this.randomCommon(1, 8, this.ballList.length)
let all_x = xRandom.map(item => {
return item width 0.10
});
//生成小球的y坐标数组
let yRandom = this.randomCommon(1, 8, this.ballList.length);
let all_y = yRandom.map(item => {
return item * height * 0.08
})/**
 随机指定范围内N个不重复的数
 最简单最基本的方法
 *
 @param min 指定范围最小值
 @param max 指定范围最大值
* @param n 随机数个数
 @return 随机数列表
 /
randomCommon(min, max, n) {
<space09da727f35d31814bff360fe6a495423Code 1>
3、根据传递进来的能量列表及生成的小球坐标，组装成我们需要的小球数据列表ballDataList[]
/**
 ballDataList的每个对象包括以下属性：
 content(小球显示的文本信息)
* x(横坐标）、
 y(纵坐标)
 /
ballDataList: [],let dataList = []
for (let index = 0; index < this.ballList.length; index++) {
dataList.push({
<space09da727f35d31814bff360fe6a495423Code 2>
 }
this.ballDataList = dataList; // 触发视图更新4、绘制小球随机显示界面

<div class="main_contain" ref="main_contain" id="main_contain">
<text for="{{ ballDataList }}"
<space09da727f35d31814bff360fe6a495423Code 3>

</div>.main_contain {
width: 100%;
position: relative;
}

.ball {
width: 120px;
height: 120px;
background-color: #c3f593;
background-size: 100%;
border-radius: 60px;
border: #69c78e;
border-bottom-style: solid;
border-width: 1px;
position: absolute;
text-align: center;
}5、给小球添加动画：
由于鸿蒙JSUI框架@keyframes 动画只能指定动画初始样式（from属性）和终止样式（to属性），故只能采用JS给小球指定动画。
小球移动轨迹为上下浮动的简单动画，可有两种思路实现：
方式一：为每个小球设置连续无限次数动画
createShakeAnimate(el) {
<space09da727f35d31814bff360fe6a495423Code 4>

<space09da727f35d31814bff360fe6a495423Code 5>
方式二：每个小球设置为单向动画，只执行一次，监听动画结束时，调用reverse()方法执行反转动画
<pre><code>createShakeAnimate(el) {
<space09da727f35d31814bff360fe6a495423Code 6>
}执行浮动动画

<text for="{{ ballDataList }}"
class="ball"
id="ball{{ $idx }}"

<space09da727f35d31814bff360fe6a495423Code 3>
playShakeAnimate() {
setTimeout(() => {
<space09da727f35d31814bff360fe6a495423Code 8>
<h5>6、为小球设置点击事件及收集能量动画</h5>
<pre><code>onBallClick(index, item) {
// 发送事件给父组件并将小球信息作为参数传递出去
this.$emit('ballClick', item);
let el = this.$element(<code>ball${index})
this.playCollectionAnimate(el, index)
},/**
 执行收集的动画
 @param el
* @param index
 @return
 /
playCollectionAnimate(el, index) {
if (this.isCollect) { // 正在执行收集动画则直接return
<space09da727f35d31814bff360fe6a495423Code 9>

<space09da727f35d31814bff360fe6a495423Code 10>
},7、父组件点击重置时，更新界面
onInit() {
<space09da727f35d31814bff360fe6a495423Code 11>
},
onBallListChange(newV) { // 外部数据发生变化重新渲染组件
<space09da727f35d31814bff360fe6a495423Code 12>
<h3>完整代码如下：</h3>
<h4>子组件：</h4>
<pre><code>
.main_contain {
width: 100%;
position: relative;
}

.ball {
width: 100px;
height: 100px;
background-color: #c3f593;
background-size: 100%;
border-radius: 60px;
border: #69c78e;
border-bottom-style: solid;
border-width: 1px;
position: absolute;
text-align: center;
}

@keyframes Wave {
from {
<space09da727f35d31814bff360fe6a495423Code 13>
to {
<space09da727f35d31814bff360fe6a495423Code 14>
}
<div class="main_contain" ref="main_contain" id="main_contain">
<text for="{{ ballDataList }}"
ref="ball{{ $idx }}" class="ball"
id="ball{{ $idx }}"
tid="ball{{ $idx }}"

<space09da727f35d31814bff360fe6a495423Code 3>

</div>
export default {
props: {
//后台返回的小球信息
ballList: {
default: ,
},
// 收集能量动画结束的X坐标
collDestinationX: {
default: 0
},
// 收集能量动画结束的Y坐标
collDestinationY: {
default: 600
 }
},
data() {
return {
/**
 ballDataList的每个对象包括以下属性：
 content(小球显示的文本信息)
* x(横坐标）、
 y(纵坐标)、
 /
ballDataList: [],
isCollect: false // 是否正在执行收集能量动画
};
},
onInit() {
<space09da727f35d31814bff360fe6a495423Code 11>
},
onReady() {
let width = 720 //组件的款第
let height = 600 //组件的高度
// 生成小球的x坐标数组
let xRandom = this.randomCommon(1, 8, this.ballList.length)
let all_x = xRandom.map(item => {
return item * width 0.10
});
//生成小球的y坐标数组
let yRandom = this.randomCommon(1, 8, this.ballList.length);
let all_y = yRandom.map(item => {
return item height * 0.08
})
if (xRandom == null || yRandom == null) {
return
 }
let dataList = []
for (let index = 0; index < this.ballList.length; index++) {
dataList.push({
content: this.ballList + 'g',
x: all_x,
y: all_y
})
 }
this.ballDataList = dataList; // 触发视图更新
console.info('onReady ballDataList = ' + JSON.stringify(this.ballDataList));
<space09da727f35d31814bff360fe6a495423Code 17>
/**
 执行收集的动画
 @param el
* @param index
 @return
 /
playCollectionAnimate(el, index) {
<space09da727f35d31814bff360fe6a495423Code 18>

<space09da727f35d31814bff360fe6a495423Code 19>

<space09da727f35d31814bff360fe6a495423Code 20>
/**
 随机指定范围内N个不重复的数
 最简单最基本的方法
 *
 @param min 指定范围最小值
 @param max 指定范围最大值
* @param n 随机数个数
 @return 随机数列表
 /
randomCommon(min, max, n) {
<space09da727f35d31814bff360fe6a495423Code 1>
onBallListChange(newV) { // 外部数据发生变化重新渲染组件
console.log('onBallListChange newV = ' + JSON.stringify(newV))
this.onReady()
 }
}父组件：

.container {
flex-direction: column;
align-items: flex-start;
}

.title {
font-size: 100px;
}

.forestContainer {
width: 100%;
height: 750px;
background-image: url("/common/bg.jpg");
background-size: 100%;
background-repeat: no-repeat;
}
<element name='waterFlake' src='../../../default/common/component/waterflake/waterFlake.hml'></element>
<div class="container">
<div class="forestContainer">
<space09da727f35d31814bff360fe6a495423Code 22>

</div>
import prompt from '@system.prompt';
export default {
data() {
<space09da727f35d31814bff360fe6a495423Code 23>
}gitee地址：
https://gitee.com/chinasoft4_ohos/CustomWaterView
作者：熊文功
想了解更多关于鸿蒙的内容，请访问：
51CTO和华为官方战略合作共建的鸿蒙技术社区
https://harmonyos.51cto.com/#bkwz

文档来源：51CTO技术博客https://blog.51cto.com/harmonyos/3253890

页: [1]

CodeAE代码之家-专为程序员打造的技术家园！-网站地图

HarmonyOS三方开源组件——鸿蒙JS实现仿蚂蚁森林