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

实现步骤

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

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