鸿蒙Harmony-Next 实现渐变跑马灯效果

最近在搞鸿蒙开发，有个效果是要实现文字跑马灯效果，便记录做了一个分享

实现步骤

1. 创建组件

首先我们创建一个自定义组件 MarqueeGradientTextView，并在其中定义需要的参数如文本内容、字体大小、字体颜色、渐变角度、渐变开始颜色和结束颜色。

@Component
export default struct MarqueeGradientTextView {

  @Prop message: ResourceStr = ''; // 显示的文本
  @Prop fontSize: number = 30; // 字体大小
  @Prop fontColor: Color = Color.Black; // 字体颜色
  @Prop gradientAngle: number = 90; // 渐变角度
  @Prop startColor: Color = Color.Black; // 渐变开始颜色
  @Prop endColor: Color = Color.Transparent; // 渐变结束颜色

  build() {
    Row() {
      Column() {
        Text(this.message)
          .width('90%')
          .fontColor(this.fontColor) // 设置动态字体颜色
          .fontSize(this.fontSize) // 设置动态字体大小
          .fontWeight(FontWeight.Bold)
          .textOverflow({ overflow: TextOverflow.MARQUEE }) // 跑马灯效果
      }
      .blendMode(BlendMode.SRC_IN, BlendApplyType.OFFSCREEN)
      .backgroundColor(Color.Transparent)
      .width('100%')
    }
    .width('100%')
    .linearGradient({
      angle: this.gradientAngle, // 设置动态渐变角度
      colors: [
        [this.startColor, 0], 
        [this.startColor.withAlpha(0.2), 0.2],
        [this.endColor.withAlpha(0.8), 0.8], 
        [this.endColor, 1]
      ]
    })
    .blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN)
  }
}

2. 组件参数

组件支持以下参数的自定义：

• message: 文本内容
• fontSize: 字体大小，默认为 30
• fontColor: 字体颜色，默认为 Color.Black
• gradientAngle: 渐变角度，默认为 90
• startColor: 渐变开始颜色，默认为 Color.Black
• endColor: 渐变结束颜色，默认为 Color.Transparent

3. 使用示例

MarqueeGradientTextView({
  message: '欢迎来到鸿蒙系统',
  fontSize: 24,
  fontColor: Color.Red,
  gradientAngle: 45,
  startColor: Color.Blue,
  endColor: Color.Green
})

至此 你便实现了一个自定义渐变效果的跑马灯文本。