HarmonyOS鸿蒙开发：文字特效高级显示效果场景

场景描述

文字特效是一个比较常见的功能，下面列举一些遇到的业务需求：

• 场景一：文字渐变效果

• 场景二：歌词滚动效果

• 场景三：文字倒影效果

• 场景四：跑马灯渐变效果

方案描述

场景一：

文字渐变效果

效果图

方案

使用linearGradient与blendMode结合实现文字渐变效果

核心代码

Row() {

Text(this.message)

.fontSize(42)

.fontWeight(FontWeight.Bold)

.blendMode(BlendMode.DST_IN, BlendApplyType.OFFSCREEN)

}.linearGradient({

direction: GradientDirection.Right,

colors: [["#f97794", 0.0], ["#623aa2", 1]]

})

.blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN)

场景二：

歌词滚动效果

效果图

方案

使用linearGradient与blendMode结合实现文字渐变效果，在结合动画来实现滚动的效果。

核心代码

Row() {

Text(this.message)

.fontSize(32)

.fontColor(Color.Black)

.fontWeight(FontWeight.Bold)

.blendMode(BlendMode.DST_IN, BlendApplyType.OFFSCREEN)

}.linearGradient({

direction: GradientDirection.Right,

colors: [[0xff0000, 0.0], [0xff0000, this.value], [0x000000, this.value], [0x000000, 1.0]]

}).blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN)

.backgroundImageSize({ width: 0, height: 0 })

.onAppear(() => {

animateTo({

duration: 5000,

finishCallbackType: FinishCallbackType.LOGICALLY,

curve: Curve.Linear,

iterations: -1,

onFinish: () => {

this.value = 0

}

}, () => {

this.value = 1

})

})

场景三：

文字倒影效果

效果图

方案

鸿蒙没有直接设置文字倒影的API，我们可以使用Stack将两个一样的元素叠在一起，将底层的元素沿着X轴翻转180度即可达到倒影效果，具体代码如下所示：

核心代码

Stack()

Text("好好学习 天天向上").fontSize(24).fontColor(Color.Red)

Text("好好学习 天天向上").fontSize(24).fontColor(Color.Red)

.rotate({

x: 1,

y: 0,

z: 0,

angle: "180deg",

centerX: "50%",

centerY: "100%"

})

.linearGradientBlur(60, {

fractionStops: [[0, 0], [1, 1]],

direction: GradientDirection.Bottom

})

}

场景四：

跑马灯渐变效果

效果图

方案与核心代码

文字跑马灯实现有两种方案:

**方案一：**使用Marquee组件实现文本跑马灯效果

这种方案实现的跑马灯效果能力更强，可塑性更强，但是注意使用Marquee组件试下的时候不宜在页面中使用过多，该组件存在一定的性能问题，不建议在一个页面中使用超过四个。

Row() {

Column() {

Marquee({

start: this.start,

step: this.step,

loop: this.loop,

fromStart: this.fromStart,

src: this.src

})

.overlay('两边透明渐变', {

align: Alignment.Bottom,

offset: { x: 0, y: -35 }

})

.width('90%')

.fontColor('#000000')

.fontSize(30)

.fontWeight(700)

}

.blendMode(BlendMode.SRC_IN, BlendApplyType.OFFSCREEN)

.backgroundColor(Color.Transparent)

.width('100%')

}

.width('100%')

.linearGradient({

angle: 90,

// rgba(0, 0, 0, 0) 表示一种完全透明的颜色，其中最后一个参数 alpha（透明度）值为 0，表示该颜色是完全透明的

colors: [['rgba(0, 0, 0, 0)', 0], ['rgba(0, 0, 0, 1)', 0.2], ['rgba(0, 0, 0, 1)', 0.8], ['rgba(0, 0, 0, 0)', 1]]

})

.blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN)

**方案二：**使用textOverlay属性实现跑马灯效果

这种方案实现的跑马灯效果没有性能问题，但是没有Marquee那样提供了各种回调，如果没有复杂的效果并且需要在页面中大量使用的时候建议使用这一种。

Row() {

Column() {

Text(this.src)

.width('90%')

.fontColor('#000000')

.fontSize(30)

.fontWeight(700)

.textOverflow({ overflow: TextOverflow.MARQUEE })

}

.blendMode(BlendMode.SRC_IN, BlendApplyType.OFFSCREEN)

.backgroundColor(Color.Transparent)

.width('100%')

}

.width('100%')

.linearGradient({

angle: 90,

// rgba(0, 0, 0, 0) 表示一种完全透明的颜色，其中最后一个参数 alpha（透明度）值为 0，表示该颜色是完全透明的

colors: [['rgba(0, 0, 0, 0)', 0], ['rgba(0, 0, 0, 1)', 0.2], ['rgba(0, 0, 0, 1)', 0.8], ['rgba(0, 0, 0, 0)', 1]]

})

.blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN)

最后

小编在之前的鸿蒙系统扫盲中，有很多朋友给我留言，不同的角度的问了一些问题，我明显感觉到一点，那就是许多人参与鸿蒙开发，但是又不知道从哪里下手，因为资料太多，太杂，教授的人也多，无从选择。有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）文档用来跟着学习是非常有必要的。 

为了确保高效学习，建议规划清晰的学习路线，涵盖以下关键阶段：

 →【纯血版鸿蒙全套最新学习文档】希望这一份鸿蒙学习文档能够给大家带来帮助~

---

 鸿蒙（HarmonyOS NEXT）最新学习路线

​

该路线图包含基础技能、就业必备技能、多媒体技术、六大电商APP、进阶高级技能、实战就业级设备开发，不仅补充了华为官网未涉及的解决方案

路线图适合人群：

IT开发人员：想要拓展职业边界
零基础小白：鸿蒙爱好者，希望从0到1学习，增加一项技能。
技术提升/进阶跳槽：发展瓶颈期，提升职场竞争力，快速掌握鸿蒙技术

2.学习视频+学习PDF文档

HarmonyOS Next 最新全套视频教程 （鸿蒙语法ArkTS、TypeScript、ArkUI教程……）

​​

 纯血版鸿蒙全套学习文档（面试、文档、全套视频等）

                   

​​​​鸿蒙APP开发必备

​​

总结

【纯血版鸿蒙全套最新学习文档】

总的来说，华为鸿蒙不再兼容安卓，对程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，才能在这个变革的时代中立于不败之地。