📝往期推文全新看点（文中附带最新·鸿蒙全栈学习笔记）

🚩 市场巨变，移动开发行业即将迎来“第二春”?

🚩 鸿蒙应用开发与鸿蒙系统开发哪个更有前景？

🚩 嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~

🚩 对于大前端开发来说，转鸿蒙开发究竟是福还是祸？

🚩 鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？

🚩 记录一场鸿蒙开发岗位面试经历~

📃 持续更新中……

---

场景描述

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

• 场景一：文字渐变效果
• 场景二：歌词滚动效果
• 场景三：文字倒影效果
• 场景四：跑马灯渐变效果

方案描述

场景一：

文字渐变效果

效果图

方案

使用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)