一、简介
继《OpenHarmony有氧拳击设施端的开发》后，本次为大家带来酷炫的利用端开发。如下，开发者随同着音乐，律动出拳后，那开发板每每播放“挨打”成果，这到底是怎么一回事？让咱们一探背地原理。
这款拳击游戏开始时会播放音乐，而后以随机速度着落“击拳方块”。当小哥哥在击拳区域内挥拳时，游戏会判断方块的地位，依据不同地位确定播放一般击中或完满击中的动画成果。
二、动画
游戏中一共应用两种动画：属性动画和Lottie动画，别离实现着落和击中的成果。“击拳方块”着落成果是利用属性动画进行批改偏移量来实现。游戏同时设置定时器，定时获取挥拳状态和“击拳方块”的所处地位，用于判断以后挥拳是否得分。若得分则依据击中区间来播放不同成果的Lottie动画。
三、“着落”动画
1、属性动画介绍
从上图能够看到，游戏中“击拳方块”是自上而下匀速挪动。这种简略管制通用属性进行动画变动的动画，便很适宜应用属性动画来实现。属性动画是指组件的通用属性发生变化时，会依据开始状态和通用属性扭转后的状态作为动画关键帧，在指定工夫内实现突变成果。换言之咱们只须要确定设置好组件在动画完结时的组件属性，而后调用animateTo(value: AnimationOptions, event: ()=> void)，即可创立属性动画。
AnimationOptions对象阐明
● 属性
● 接口
2、动画实现
编写“击拳方块”UI组件，并将组件的绝对布局偏移量offset属性，绑定到@state leftY1变量中,那么通过批改leftY1的值即可实现批改组件所在位置。
@State leftY1: string = '50%' @Builder LeftBoxing(offsetY: string) { Image($r('app.media.icon_boxing_left')) .width(144) .height(110) .offset({ x: "-30%", y: offsetY }) .touchable(true) } build() { Stack() { // ..... // 左侧 this.LeftBoxing(this.leftY1) // ..... }3、创立动画
调用animateTo显式动画来播放动画实现单个“击拳方块”自上而下地挪动，再通过设置delay参数实现4个“击拳方块”按程序别离挪动。
async leftAnimate(){ // 设置图标下滑动画 // 动画持续时间 let leftDuration = this.getRandomDuration() this.leftDuration = leftDuration // 提早时长 let leftDelay = leftDuration / (this.boxingCount - 1) // 设置开始工夫 let now = new Date this.animateLeftTimestamp = now.getTime() // 左侧animateTo动画 animateTo({ duration: leftDuration, curve: Curve.Linear,delay:0 * leftDelay ,iterations: 1 }, () => { this.leftY1 = "50%" }) animateTo({ duration: leftDuration, curve: Curve.Linear,delay:1 * leftDelay, iterations: 1 }, () => { this.leftY2 = "50%" }) animateTo({ duration: leftDuration, curve: Curve.Linear,delay:2 * leftDelay, iterations: 1 }, () => { this.leftY3 = "50%" }) animateTo({ duration: leftDuration, curve: Curve.Linear,delay:3 * leftDelay, iterations: 1 }, () => { this.leftY4 = "50%" }) let totalTime = leftDuration + 3 * leftDelay await this.sleep(totalTime) this.resetAnimate(true) this.leftAnimate() }4、设置击中区域监听
设置定时器定时查问以后是否挥拳，若检测到挥拳再通过计算以后动画运行工夫来判断“击拳方块”地位，从而执行击中或完满击中的逻辑，以下为监听逻辑。
setScoreListen(){ this.intervalNumber = setInterval(async()=>{ let res = await BoxingGameNAPI.recvMsg(); if(res?.message.length > 0){ if(res.message.includes('left') && !this.leftAnimateLock){ // 检测到左手挥拳 this.judgeLeft() } } },200) } judgeLeft(){ let nowTime = new Date().getTime() // 首次到达指标顶部工夫 let firstTime = this.animateLeftTimestamp + (this.percentToPoint(this.targetOffsetY)+this.percentToPoint('50%') - this.percentToPoint('10%')) * this.leftDuration // 完结工夫 let endTime = this.animateLeftTimestamp + this.leftDuration * 2 if(nowTime > firstTime - 200 && nowTime < endTime){ // 得分工夫界线 let leftDelay = this.leftDuration /(this.boxingCount -1 ) let handleTime = (nowTime - firstTime) % leftDelay let judgeTime = this.leftDuration /6 CommonLog.info(TAG,`leftDelay:${leftDelay},handleTime:${handleTime},judgeTime:${judgeTime}`) // 完满击中 if (judgeTime/4 < handleTime && handleTime < (judgeTime *(3/4))) { }else if(handleTime < judgeTime){ // 一般击中 }else{ // 不得分 } }else{ // 未到达区域 } }四、击中动画
像前文提到的“着落”动画适宜应用属性动画，那么当咱们须要实现更简单，如上图的动画成果时，该如何来实现呢？
Lottie介绍
Lottie是一款可能为应用程序增加动画的开源组件，它能够解析AE（After Effects）导出的json文件，让简单的动画资源轻松运行在应用程序中。如图所示，动画文件通过AE的bodymovin插件将动画转换成通用的json格局形容文件后，利用开发者只需应用Lottie解析json文件，就能将动画绘制进去。
Lottie长处：
- 只需应用Lottie解析json文件就能实现动画的加载，基本上实现了0代码开发；
- 利用开发者能够通过批改json文件的参数，将动画运行到不同的应用程序中，实现动画的一次设计多端应用；
- 利用开发者可从网络如https://lottiefiles.com/间接下载json文件，实时更新动画资源；
- Lottie基于canvas画布进行根底的2D渲染，让动画晦涩度更高；
- Lottie能够将UX设计师给出的简单动画成果100%还原到应用程序中 ；
- Lottie提供了丰盛的API，让开发者能轻松管制动画，大大提高了开发效率。
如何应用Lottie？ - 导入Lottie
在Terminal窗口应用npm install @ohos/lottieETS命令下载Lottie，并在页面中导入@ohos/lottieETS，如下：import lottie from '@ohos/lottieETS'
搁置动画资源将After Effects导出的json动画资源文件保留到我的项目common/lottie门路中，具体门路如下：entry/src/main/ets/MainAbility/common/lottie/animation.json
- 创立Lottie动画Lottie基于canvas画布进行根底的2D渲染，创立canvas画布后设置相干播放参数即可创立并播放Lottie动画，Lottie更多信息可参考Lottie接口。创立canvas画布：
@Builder TargetArea(controller:CanvasRenderingContext2D,lottieName:string) { Stack() { Canvas(controller) .aspectRatio(1) .width(300) .offset({ y: this.targetOffsetY }) .onAppear(() => { }) Animator('__lottie_ets') // declare Animator('__lottie_ets') when use lottie }.height('100%').width(220) }设置Lottie动画参数：
setLottie(controller:CanvasRenderingContext2D,lottieName:string,animatePath:string){ lottie.loadAnimation({ container: controller, renderer: 'canvas', loop: false, autoplay: false, name: lottieName, path: animatePath, }) lottie.setSpeed(1,lottieName) }在“着落”动画击拳监听中退出播放不同成果的Lottie动画逻辑：
judgeLeft(){ ...... if(nowTime > firstTime - 200 && nowTime < endTime){ ...... // 完满击中 if (judgeTime/4 < handleTime && handleTime < (judgeTime *(3/4))) { lottie.destroy('animate_left') this.setLottie(this.controllerLeft,'animate_left',this.animatePerfectPath) lottie.play('animate_left') // 播放完满击中动画 // 等动画执行实现后能力进入下一次挥拳断定 this.leftAnimateLock = true setTimeout(()=>{ lottie.stop() lottie.destroy('animate_left') this.leftAnimateLock = false },this.lottieDuration) }else if(handleTime < judgeTime){ // 击中 lottie.destroy('animate_left') this.setLottie(this.controllerLeft,'animate_left',this.animateJustPath) lottie.play('animate_left')// 播放击中动画 this.leftAnimateLock = true setTimeout(()=>{ lottie.stop() lottie.destroy('animate_left') this.leftAnimateLock = false },this.lottieDuration) } } }五、总结
本文次要讲述了拳击互动游戏中，如何应用属性动画实现简略属性变动的动画成果，如游戏中“击拳方块”自上往下挪动；应用Lottie组件实现简单壮丽的动画成果，如游戏中的击拳成果。
本样例是OpenHarmony常识体系工作组（相干链接在文章开端）为宽广开发者分享的样例。常识体系工作组联合日常生活，给开发者布局了各种场景的Demo样例，如智能家居场景、影音娱乐场景、静止衰弱场景等。欢送宽广开发者一起参加OpenHarmony的开发，更加欠缺样例，互相学习，互相提高。
六、参考链接
本样例代码下载链接
https://growing.openharmony.c...
属性动画
https://docs.openharmony.cn/p...
https://docs.openharmony.cn/p...
Lottie
https://docs.openharmony.cn/p...
https://mp.weixin.qq.com/s/2a...
OpenHarmony常识体系共建开发仓
https://gitee.com/openharmony...
OpenHarmony学习门路
https://growing.openharmony.c...
小熊派BearPi-HM Nano开发板学习门路
https://growing.openharmony.c...
https://gitee.com/bearpi/bear...
润和DAYU200（RK3568）开发板介绍
https://growing.openharmony.c...
OpenHarmony有氧拳击之设施端开发
https://mp.weixin.qq.com/s/qV...