一、簡介

繼《OpenHarmony有氧拳擊設(shè)備端的開發(fā)》后，本次為大家?guī)砜犰诺膽?yīng)用端開發(fā)。如下視頻，開發(fā)者伴隨著音樂，律動出拳后，那開發(fā)板屢屢播放“挨打”效果，這究竟是怎么一回事？讓我們一探背后原理。 這款拳擊游戲開始時會播放音樂，然后以隨機速度下落“擊拳方塊”。當小哥哥在擊拳區(qū)域內(nèi)揮拳時，游戲會判斷方塊的位置，根據(jù)不同位置確定播放普通擊中或完美擊中的動畫效果。

二、動畫

游戲中一共使用兩種動畫：屬性動畫和Lottie動畫，分別實現(xiàn)下落和擊中的效果。“擊拳方塊”下落效果是利用屬性動畫進行修改偏移量來實現(xiàn)。游戲同時設(shè)置定時器，定時獲取揮拳狀態(tài)和“擊拳方塊”的所處位置，用于判斷當前揮拳是否得分。若得分則根據(jù)擊中區(qū)間來播放不同效果的Lottie動畫。

三、“下落”動畫

1、屬性動畫介紹

從上圖可以看到，游戲中“擊拳方塊”是自上而下勻速移動。這種簡單控制通用屬性進行動畫變化的動畫，便很適合使用屬性動畫來實現(xiàn)。屬性動畫是指組件的通用屬性發(fā)生變化時，會根據(jù)開始狀態(tài)和通用屬性改變后的狀態(tài)作為動畫關(guān)鍵幀，在指定時間內(nèi)實現(xiàn)漸變效果。換言之我們只需要確定設(shè)置好組件在動畫結(jié)束時的組件屬性，然后調(diào)用animateTo(value: AnimationOptions, event: ()=> void)，即可創(chuàng)建屬性動畫。

AnimationOptions對象說明

● 屬性

●接口

2、動畫實現(xiàn)

編寫“擊拳方塊”UI組件，并將組件的相對布局偏移量offset屬性，綁定到@state leftY1變量中,那么通過修改leftY1的值即可實現(xiàn)修改組件所在位置。

@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() {            // .....             // 左側(cè)            this.LeftBoxing(this.leftY1)            // .....}

3、創(chuàng)建動畫

調(diào)用animateTo顯式動畫來播放動畫實現(xiàn)單個“擊拳方塊”自上而下地移動，再通過設(shè)置delay參數(shù)實現(xiàn)4個“擊拳方塊”按順序分別移動。

    async leftAnimate(){        // 設(shè)置圖標下滑動畫        // 動畫持續(xù)時間        let leftDuration = this.getRandomDuration()        this.leftDuration = leftDuration        // 延遲時長        let leftDelay = leftDuration / (this.boxingCount - 1)        // 設(shè)置開始時間        let now = new Date        this.animateLeftTimestamp = now.getTime()        // 左側(cè)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、設(shè)置擊中區(qū)域監(jiān)聽

設(shè)置定時器定時查詢當前是否揮拳，若檢測到揮拳再通過計算當前動畫運行時間來判斷“擊拳方塊”位置，從而執(zhí)行擊中或完美擊中的邏輯，以下為監(jiān)聽邏輯。

    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        // 結(jié)束時間        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{            // 未抵達區(qū)域        }????}

四、擊中動畫

像前文提到的“下落”動畫適合使用屬性動畫，那么當我們需要實現(xiàn)更復雜，如上圖的動畫效果時，該如何來實現(xiàn)呢？

Lottie介紹

Lottie是一款能夠為應(yīng)用程序添加動畫的開源組件，它可以解析AE（After Effects）導出的json文件，讓復雜的動畫資源輕松運行在應(yīng)用程序中。如圖所示，動畫文件通過AE的bodymovin插件將動畫轉(zhuǎn)換成通用的json格式描述文件后，應(yīng)用開發(fā)者只需使用Lottie解析json文件，就能將動畫繪制出來。

Lottie優(yōu)點：

1. 只需使用Lottie解析json文件就能實現(xiàn)動畫的加載，基本上實現(xiàn)了0代碼開發(fā)；

2. 應(yīng)用開發(fā)者可以通過修改json文件的參數(shù)，將動畫運行到不同的應(yīng)用程序中，實現(xiàn)動畫的一次設(shè)計多端使用；

3. 應(yīng)用開發(fā)者可從網(wǎng)絡(luò)如https://lottiefiles.com/直接下載json文件，實時更新動畫資源；

4. Lottie基于canvas畫布進行基礎(chǔ)的2D渲染，讓動畫流暢度更高；

5. Lottie可以將UX設(shè)計師給出的復雜動畫效果100%還原到應(yīng)用程序中 ；

6. Lottie提供了豐富的API，讓開發(fā)者能輕松控制動畫，大大提高了開發(fā)效率。

如何使用Lottie？

1.導入Lottie

在Terminal窗口使用npm install @ohos/lottieETS命令下載Lottie，并在頁面中導入@ohos/lottieETS，如下：

importlottiefrom'@ohos/lottieETS'

放置動畫資源

將After Effects導出的json動畫資源文件保存到項目common/lottie路徑中，具體路徑如下：entry/src/main/ets/MainAbility/common/lottie/animation.json

2. 創(chuàng)建Lottie動畫

Lottie基于canvas畫布進行基礎(chǔ)的2D渲染，創(chuàng)建canvas畫布后設(shè)置相關(guān)播放參數(shù)即可創(chuàng)建并播放Lottie動畫，Lottie更多信息可參考Lottie接口。

創(chuàng)建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)}

    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)}

    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') // 播放完美擊中動畫                // 等動畫執(zhí)行完成后才能進入下一次揮拳判定                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)            }        }}

五、總結(jié)

本文主要講述了拳擊互動游戲中，如何使用屬性動畫實現(xiàn)簡單屬性變化的動畫效果，如游戲中“擊拳方塊”自上往下移動；使用Lottie組件實現(xiàn)復雜絢麗的動畫效果，如游戲中的擊拳效果。

本樣例是OpenHarmony知識體系工作組（相關(guān)鏈接在文章末尾）為廣大開發(fā)者分享的樣例。知識體系工作組結(jié)合日常生活，給開發(fā)者規(guī)劃了各種場景的Demo樣例，如智能家居場景、影音娛樂場景、運動健康場景等。歡迎廣大開發(fā)者一同參與OpenHarmony的開發(fā)，更加完善樣例，相互學習，相互進步。