HarmonyOS 鸿蒙Next中如何实现文本流光或者扫光效果

HarmonyOS 鸿蒙Next中如何实现文本流光或者扫光效果

这个是iOS上的实现效果。但是鸿蒙这我研究了一个下午还是一点头绪都没有，希望有个大神能指点迷津啊。谢谢了。

3 回复

填充颜色设置为渐变，然后做个渐变数值的改变动画？

更多关于HarmonyOS 鸿蒙Next中如何实现文本流光或者扫光效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，实现文本流光/扫光效果可以使用ArkUI的动画和渐变能力。在声明式UI中通过LinearGradient设置渐变颜色，结合animation属性创建移动动画。示例代码：

@Component
struct ShineText {
  private colors: Color[] = [Color.White, Color.Blue, Color.White]
  private start: number = 0

  build() {
    Text("流光文字")
      .linearGradient({
        angle: 0,
        colors: this.colors,
        start: {x: this.start, y: 0},
        end: {x: this.start + 0.3, y: 0}
      })
      .animation({
        duration: 2000,
        iterations: -1,
        curve: Curve.Linear
      })
      .onFrame(() => {
        this.start = (this.start + 0.01) % 1
      })
  }
}

通过调整渐变起始点和动画参数可控制扫光速度和范围。

在HarmonyOS Next中实现文本流光/扫光效果可以通过自定义绘制+动画组合实现。以下是核心实现思路：

  1. 使用Canvas绘制文本和光效层：
// 自定义组件中
private onDraw(canvas: Canvas) {
  // 1. 绘制原始文本
  canvas.drawText(this.text, 0, 0, this.textPaint);

  // 2. 创建扫光渐变层
  const gradient = new LinearGradient({
    start: {x: this.offsetX, y: 0},
    end: {x: this.offsetX + 100, y: 0}, // 控制光带宽度
    colors: [0x00FFFFFF, 0xAAFFFFFF, 0x00FFFFFF] // 透明-白-透明
  });

  // 3. 应用渐变蒙版
  this.glowPaint.setShader(gradient);
  canvas.drawText(this.text, 0, 0, this.glowPaint);
}
  1. 添加位移动画：
// 启动动画
animateTo({
  duration: 1500,
  iterations: -1 // 无限循环
}, () => {
  this.offsetX = this.width; // 从左侧移动到右侧
})
  1. 关键技巧：
  • 使用两个Paint对象分别绘制底层文本和上层光效
  • 通过LinearGradient创建半透明渐变实现光带效果
  • 使用animateTo驱动光带位置变化
  • 可调整colors数组改变光带颜色强度

注意：实际开发中需要处理文本测量、动画启停等细节，但核心原理是通过渐变遮罩+位移动画实现扫光视觉效果。

回到顶部