HarmonyOS三方开源组件——鸿蒙JS实现仿蚂蚁森林
时间：2023-03-17 16:53:03
科技观察
详情请访问：https://harmonyos.51cto.com，与华为官方共建的鸿蒙技术社区。:1.接收一个从外部传给组件的数组（球能量列表），能量收集动画结束的位置props:{//后台返回的球信息ballList:{default:[10,11,12,13,14],},//能量收集动画结束的X坐标collDestinationX:{default:350},//能量结束的Y坐标采集动画collDestinationY:{default:400}},2.根据小球的数量，生成小球的随机位置坐标。//生成球的x坐标数组letxRandom=this.randomCommon(1,8,this.ballList.length)letall_x=xRandom.map(item=>{returnitem*width*0.10});//生成y球的坐标数组letyRandom=this.randomCommon(1,8,this.ballList.length);letall_y=yRandom.map(item=>{returnitem*height*0.08})/***随机指定N个不重复数在指定范围内*最简单最基本的方法**@parammin指定范围的最小值*@parammax指定范围的最大值*@paramnnumberofrandomnumbers*@returnrandomnumberlist*/randomCommon(min,max,n){if(n>(max-min+1)||max{{$item.content}}
.main_contain{width:100%;position:relative;}.ball{width:120px;height:120px；背景颜色：#c3f593；背景大小：100%；边框半径：60px；边框：#69c78e；边框底部样式：实体；边框宽度：1px；位置：绝对；文本对齐：中心；}5.给小球添加动画：由于鸿蒙JSUI框架@keyframes动画只能指定动画初始样式（from属性）和结束样式（to属性），所以只能使用JS为小球指定动画小球的运动轨迹是上下浮动的简单动画。有两种实现方式：方法一：为每个球设置无限个连续动画createShakeAnimate(el){if(el==null||el==undefined){return}varoptions={duration:2000,easing:'friction',fill:'forwards',iterations:"Infinity",};varframes=[{transform:{translate:'0px0px'},offset:0.0//动画开始},{transform:{translate:'0px20px'},offset:0.5//动画进行到一半时},{transform:{translate:'0px0px'},offset:1.0//动画结束时},];letanimation=el.animate(frames,options);returnanimation},方法二：每个球设置为单向动画，只执行一次，当监听动画结束时，调用reverse()方法执行反向动画createShakeAnimate(el){如果(el==null||el==undefined){return}varoptions={duration:2000,easing:'friction',fill:'forwards',iterations:1,};varframes=[{transform:{translate:'0px0px'},offset:0.0},{transform:{translate:'0px20px'},offset:1.0},];letanimation=el.animate(frames,options);animation.onfinish=function(){animation.reverse()};returnanimation执行浮动动画
{{$item.content}}playShakeAnimate(){setTimeout(()=>{console.info('xwgplayShakeAnimate');for(varindex=0;index{letanimate=_t.createShakeAnimate(el)animate.play()},5)}};this.isCollect=trueanimation.play()},7.父组件点击reset时，更新界面onInit(){this.$watch('ballList','onBallListChange');//注册数据变化监听},onBallListChange(newV){//外部数据变化时重新渲染组件console.log('onBallListChangenewV='+JSON.stringify(newV))this.onReady()}完整代码如下：子组件：.main_contain{width:100%;position:relative;}.ball{width:100px;高度:100px;背景颜色:#c3f593;背景d-size:100%;border-radius:60px;border:#69c78e;border-bottom-style:solid;border-width:1px;position:absolute;text-align:center;}@keyframesWave{from{transform:translateY(0px);}到{transform:translateY(10px);}}{{$item.content}} exportdefault{props:{//后台返回的小球信息ballList:{default:[10,11,12,13,14],},//能量收集动画结束的X坐标collDestinationX:{default:0},//能量采集动画结束的Y坐标collDestinationY:{default:600}},data(){return{/***ballDataList每个对象包括以下属性：*content（小球显示的文字信息）*x（横坐标),*y(纵坐标),*/ballDataList:[],isCollect:false//是否正在执行能量收集动画};},onInit(){this.$watch('ballList','onBallListChange');//注册数据变更监听},onReady(){letwidth=720//组件的段落letheight=600//组件的高度//生成球的x坐标数组letxRandom=this.randomCommon(1,8,this.ballList.length)letall_x=xRandom.map(item=>{returnitem*width*0.10});//生成球的y坐标数组letyRandom=this.randomCommon(1,8,this.ballList.length);letall_y=yRandom.map(item=>{returnitem*height*0.08})if(xRandom==null||yRandom==null){return}letdataList=[]for(letindex=0;index
{letanimate=_t.createShakeAnimate(el)animate.play()},5)}};this.isCollect=trueanimation.play()},createShakeAnimate(el){if(el==null||el==undefined){return}varoptions={duration:2000,easing:'friction',fill:'forwards',iterations:"Infinity",};varframes=[{transform:{translate:'0px0px'},offset:0.0},{transform:{translate:'0px20px'},offset:0.5},{transform:{translate:'0px0px'},offset:1.0},];letanimation=el.animate(frames,options);returnanimation},playShakeAnimate(){setTimeout(()=>{console.info('xwgplayShakeAnimate');for(varindex=0;index(max-min+1)||max 