開篇點題镶奉，今天玩點花的。
不知道大家有沒有發(fā)現(xiàn)资铡，抖音上的評論鍵長按會彈出一排表情框用于快速評論，不過現(xiàn)在鴻蒙原生版的抖音還沒有這個功能幢码，今天幽藍(lán)君就小試牛刀笤休，在鴻蒙上做一下這個功能，也是應(yīng)一位友友的私信要求症副。
不過幽藍(lán)君學(xué)藝不精店雅，水平有限，只能模仿個三分像贞铣，僅供大家參考闹啦。
話不多說，直接看成品效果圖：
實話實說辕坝，真的是有點難窍奋，昨晚搞到零點一刻，一度崩潰酱畅。關(guān)于這個功能的實現(xiàn)過程琳袄，還聽幽藍(lán)君細(xì)細(xì)道來。
首先你看這個彈出框纺酸，它并不存在于頁面之中窖逗，因為在彈出之后整個頁面是有蒙版的，除了它之外所有按鍵不能點擊餐蔬，所以它其實是一個彈框碎紊，我選擇使用CustomDialogController來實現(xiàn)在张。
那么問題來了，CustomDialogController覆蓋在頁面上方矮慕，怎么做才能讓這一排表情看起來像是從評論按鈕里彈出呢帮匾？
幽藍(lán)君的實現(xiàn)思路是這樣的，將彈框的起始位置設(shè)置在評論按鈕上痴鳄，彈框的尺寸尤其是寬度設(shè)置為0瘟斜，在動畫的過程中，讓彈框的x坐標(biāo)不斷左移痪寻，同時寬度增加螺句，這樣看起來就像是從評論按鈕中滑出來。
相關(guān)代碼如下：
Flex({ direction: FlexDirection.Row,justifyContent:FlexAlign.SpaceEvenly,alignItems:ItemAlign.Center }) {
})
.width(this.menuWidth)
.height(60)
.opacity(this.alpha)
.position({ x: this.menuX })
.backgroundColor('rgb(22,22,22)')
.animation({ duration: 300, curve: Curve.Linear, iterations: 1 })
.onAppear(()=>{
this.menuX = 0 this.menuWidth = 200
})
彈出動畫做完了橡类，內(nèi)容部分很簡單蛇尚，就幾個表情，下面要做的事情是長按表情放大顾画，不僅長按會放大取劫，長按之后滑動到表情上也會放大，所以我判斷這是一個組合手勢研侣，長按手勢和滑動手勢的組合谱邪。
這個組合手勢也有前后順序，只有長按開始之后的滑動才會有放大效果庶诡。
所以我的實現(xiàn)邏輯是這樣的惦银，給單個表情添加長按放大手勢祥诽，給整個彈框添加觸摸手勢onTouch僧诚，根據(jù)它返回的坐標(biāo)確定當(dāng)前的表情，為了提高精度牺弹，我對坐標(biāo)進(jìn)行了判斷喇澡，只有滑動到表情中間才會觸發(fā)放大效果迅栅。相關(guān)代碼如下：
//表情長按
.gesture(
LongPressGesture({ repeat: false })
.onAction((event: GestureEvent) => {
this.bigIndex = index
this.longPress = true
})
)
//長按之后滑動
.onTouch((event?: TouchEvent) => {
if(event && this.longPress){
if(event.touches[0].x > 0 && event.touches[0].x < 200){
if(event.touches[0].y > 25 && event.touches[0].y < 35){
let ys = event.touches[0].x%50
if(ys > 20 && ys < 40){
this.bigIndex = Math.floor(event.touches[0].x/50)
}
}
}
}
})
接下來，最難的部分來了撩幽，點擊表情進(jìn)行評論的時候库继，除了彈框消失以外箩艺，它還有一個發(fā)射的效果窜醉，發(fā)射一串表情到評論按鈕里，這玩意怎么實現(xiàn)呢艺谆。
首先想到的是路徑動畫motionPath榨惰，最終也確實是用它實現(xiàn)，不過過程沒那么容易静汤，因為我們這個效果是出場的時候不觸發(fā)琅催，退出的時候觸發(fā)動畫居凶。但是motionPath這個東西并不支持像按鈕點擊主動觸發(fā)，只能通過尺寸或者位置的變化來觸發(fā)藤抡，官方管這叫設(shè)計哲學(xué)侠碧。。缠黍。
我的實現(xiàn)思路是這樣的弄兜，在點擊某個表情之后，在對應(yīng)的位置創(chuàng)建三個相同的表情瓷式，然后依次發(fā)射出去替饿，但是又怎么實現(xiàn)依次發(fā)射的效果呢。使用計時器嗎贸典，效果并不好视卢，最后發(fā)現(xiàn)在animation上設(shè)置不同的動畫時間可以實現(xiàn)想要的效果：
Text(this.emoList[this.toggleIndex])
.fontSize(this.toggleSize)
.motionPath({ path: this.animatePath, from: 0.0, to: 1.0, rotatable: false })
.position({x:this.toggleX,y:0})
.animation({ duration: this.duration, curve: Curve.EaseIn, iterations: 1 })
以上就是今天內(nèi)容的整個實現(xiàn)過程，其實它從技術(shù)角度上并不難廊驼，難的是實現(xiàn)思路和方法据过，這就好比華為推出三折疊手機(jī)之后很多友商也要推出三折疊了，在這之前你怎么不造呢妒挎，因為華為的專利沒有公布蝶俱。
