HarmonyOS鸿蒙Next中抛砖引玉，模仿抖音长按快速评论特效

HarmonyOS鸿蒙Next中抛砖引玉，模仿抖音长按快速评论特效 看到原生鸿蒙版的抖音还没有长按快速评论的功能，本人斗胆来模仿一下。 做的一般，仅供大家参考。

关于这个功能的实现过程，还听幽蓝君细细道来。

首先你看这个弹出框，它并不存在于页面之中，因为在弹出之后整个页面是有蒙版的，除了它之外所有按键不能点击，所以它其实是一个弹框，我选择使用CustomDialogController来实现。

那么问题来了，CustomDialogController覆盖在页面上方，怎么做才能让这一排表情看起来像是从评论按钮里弹出呢？

幽蓝君的实现思路是这样的，将弹框的起始位置设置在评论按钮上，弹框的尺寸尤其是宽度设置为0，在动画的过程中，让弹框的x坐标不断左移，同时宽度增加，这样看起来就像是从评论按钮中滑出来。

相关代码如下：

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

弹出动画做完了，内容部分很简单，就几个表情，下面要做的事情是长按表情放大，不仅长按会放大，长按之后滑动到表情上也会放大，所以我判断这是一个组合手势，长按手势和滑动手势的组合。

这个组合手势也有前后顺序，只有长按开始之后的滑动才会有放大效果。 所以我的实现逻辑是这样的，给单个表情添加长按放大手势，给整个弹框添加触摸手势onTouch，根据它返回的坐标确定当前的表情，为了提高精度，我对坐标进行了判断，只有滑动到表情中间才会触发放大效果。

相关代码如下：

//表情长按
.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)        
 }     
 }    
 }  
})

接下来，最难的部分来了，点击表情进行评论的时候，除了弹框消失以外，它还有一个发射的效果，发射一串表情到评论按钮里，这玩意怎么实现呢。

首先想到的是路径动画motionPath，最终也确实是用它实现，不过过程没那么容易，因为我们这个效果是出场的时候不触发，退出的时候触发动画。但是motionPath这个东西并不支持像按钮点击主动触发，只能通过尺寸或者位置的变化来触发，官方管这叫设计哲学。。。

我的实现思路是这样的，在点击某个表情之后，在对应的位置创建三个相同的表情，然后依次发射出去，但是又怎么实现依次发射的效果呢。使用计时器吗，效果并不好，最后发现在animation上设置不同的动画时间可以实现想要的效果：

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

以上就是今天内容的整个实现过程，其实它从技术角度上并不难，难的是实现思路和方法.感谢大家的观看。


更多关于HarmonyOS鸿蒙Next中抛砖引玉，模仿抖音长按快速评论特效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS鸿蒙Next中，模仿抖音长按快速评论特效可以通过使用ArkUI框架中的Gesture和Animation组件来实现。首先，使用Gesture组件监听长按事件，当用户长按时，触发相应的动画效果。可以使用Animation组件定义评论框的弹出动画，例如从底部滑入。同时，可以通过State管理组件状态，控制评论框的显示与隐藏。以下是一个简单的代码示例：

@Entry
@Component
struct QuickComment {
  @State isVisible: boolean = false;

  build() {
    Column() {
      // 其他UI内容
      Text('长按此处')
        .onGesture(Gesture.LongPress, () => {
          this.isVisible = true;
        })

      if (this.isVisible) {
        TextInput({ placeholder: '输入评论' })
          .animation({ duration: 300, curve: Curve.EaseInOut })
          .transition({ type: TransitionType.Slide, direction: SlideDirection.Bottom })
      }
    }
  }
}

在这个示例中，Gesture.LongPress监听长按事件，TextInput组件在长按时显示，并通过Animation和Transition实现平滑的弹出效果。

更多关于HarmonyOS鸿蒙Next中抛砖引玉，模仿抖音长按快速评论特效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中实现类似抖音长按快速评论的特效，可以通过以下步骤实现：

  1. 监听长按事件：使用 onLongPress 事件监听器，当用户长按某个区域时触发。
  2. 显示评论弹窗：在长按事件触发后，使用 Dialog 组件快速弹出一个评论输入框。
  3. 动画效果：通过 Animator 组件实现弹窗的平滑弹出和消失动画，提升用户体验。
  4. 处理输入内容：用户输入评论后，通过回调函数处理并提交评论内容。

示例代码：

view.setOnLongClickListener(v -> {
    showCommentDialog();
    return true;
});

void showCommentDialog() {
    Dialog dialog = new Dialog(context);
    // 设置弹窗内容和动画
    dialog.show();
}

通过以上步骤，可以在鸿蒙系统中实现类似抖音的快速评论特效。

回到顶部