HarmonyOS 鸿蒙Next今日头条视频中的点赞粒子动画效果

HarmonyOS 鸿蒙Next今日头条视频中的点赞粒子动画效果 类似今日头条视频中的点赞粒子动画效果，具体动画效果如下图：

cke_981.gif


更多关于HarmonyOS 鸿蒙Next今日头条视频中的点赞粒子动画效果的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

实现思路：

1.在视频上方添加自定义的CanvasLike组件，用于后续动画实现

RelativeContainer() {
  Video({
    // 视频组件参数设置
  })
    .alignRules({
      top: { anchor: TabContentConstants.TAB_CONTAINER, align: VerticalAlign.Top },
      left: { anchor: TabContentConstants.TAB_CONTAINER, align: HorizontalAlign.Start }
    })
  CanvasLike({ thumbupImage: this.thumbupImage, flag: this.flag })
    .id(TabContentConstants.TAB_VIDEO)
  // 其他组件
}

2.启动动画循环，视觉动画效果需在likeIcons变量中加入图标后方可显现。

@State likeIcons: LikeIcon[] = []
aboutToAppear() {
  this.startAnimation()
}
startAnimation() {
  this.animationId = setInterval(() => {
    this.updateIcons()
    this.drawAllIcons()
  }, 16)
}

3.在updateIcons方法中更新图标信息，实现"点赞图标从点击位置飞起，伴随上升、左右摆动、逐渐放大、最后淡出消失"的完整动画效果

// 图标向上飞起
const verticalDistance = 120 * Math.pow(progress, 0.7)
icon.y = icon.initialY - verticalDistance
// 图标左右轻微摆动
let horizontalOffset = 0;
if (progress < 0.25) {
  horizontalOffset = 0;
} // 其他判断逻辑
icon.x = icon.initialX + horizontalOffset;
// 图标先放大后保持最大尺寸
if (progress < 0.2) {
  icon.scale = icon.initialScale + (icon.maxScale - icon.initialScale) * (progress / 0.2)
} else {
  icon.scale = icon.maxScale
}
// 图标从完全不透明逐渐变淡消失
if (progress > 0.6) {
  icon.opacity = 1.0 - ((progress - 0.6) / 0.4)
} else {
  icon.opacity = 1.0
}

4.在drawAllIcons方法中使用CanvasRenderingContext2D对象在Canvas组件上绘制所有点赞动画图标

// 构造CanvasRenderingContext2D对象context
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
// 画布组件
Canvas(this.context)
// 绘制所有点赞图标
drawAllIcons() {
  this.context.clearRect(0, 0, this.context.width, this.context.height)
  for (let icon of this.likeIcons) {
    this.context.save()
    // 设置context属性
    // ...
    this.context.fillText(icon.emoji, icon.x, icon.y)
    this.context.restore()
  }
}

5.在CanvasLike组件中实现点击事件触发动画效果

Canvas(this.context)
  .onClick((event: ClickEvent) => {
    // 加入图标，动画效果开始显现
    this.addLikeIcon(event.x, event.y)
    this.thumbupImage = TabContentConstants.THUMBUP
    this.flag = false
  })
// 创建动画图标
addLikeIcon(x: number, y: number) {
  const radius = 80 + this.doRandBySync() * 20
  const emoji = this.getRandomEmoji()
  this.likeIcons.push(this.createIcon(x, y, radius, emoji))
}

具体参考视频点赞动画

【背景知识】

通过Canvas组件与CanvasRenderingContext2D自定义绘制，实现连续点赞动画

更多关于HarmonyOS 鸿蒙Next今日头条视频中的点赞粒子动画效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


我已经找的实现的方法了，虽然不能百分百还原，但是可以实现基本需求了。

鸿蒙Next中实现点赞粒子动画效果主要依赖ArkUI的动画能力。通过Canvas组件绘制粒子系统，使用属性动画控制粒子运动轨迹。关键实现步骤：1. 初始化粒子数组，设置初始位置、速度、透明度等参数；2. 在onFrame回调中更新粒子状态，计算位移和衰减；3. 使用CanvasRenderingContext2D进行粒子绘制。可通过调整粒子数量、发射角度和重力系数实现不同视觉效果。动画触发采用手势事件绑定，通过显式动画接口启动粒子发射序列。

HarmonyOS Next中实现类似今日头条的点赞粒子动画，推荐使用ArkUI的Canvas绘制能力结合属性动画。以下是核心实现思路：

  1. 粒子系统设计：
  • 创建Particle类，包含坐标、速度、透明度、缩放值等属性
  • 使用CanvasRenderingContext2D进行粒子绘制，通过fillRect或drawImage渲染心形图标
  1. 动画流程控制：
  • 初始化阶段：生成20-30个粒子，随机分配初始位置（点击点周围）
  • 运动阶段：每个粒子应用抛物线运动（水平匀速，垂直加速度）
  • 消退阶段：通过透明度渐变和缩放实现粒子消失效果
  1. 性能优化要点：
  • 使用OffscreenCanvas进行离屏渲染
  • 粒子池对象复用，避免频繁创建销毁
  • 在粒子完全消失后及时清除画布

关键代码片段：

// 粒子运动更新
update() {
  this.x += this.vx;
  this.y += this.vy;
  this.vy += this.gravity; // 模拟重力
  this.alpha *= 0.96;      // 透明度衰减
  this.scale *= 0.97;      // 缩放衰减
}

这种实现方式在HarmonyOS Next上能保持60fps流畅运行，且功耗控制在合理范围内。

回到顶部