【鸿蒙实战开发】基于原生实现高级显示效果

最新推荐文章于 2025-11-21 10:04:20 发布

原创最新推荐文章于 2025-11-21 10:04:20 发布 · 884 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #ArkUI #移动开发 #鸿蒙开发 #组件化

移动开发同时被 3 个专栏收录

704 篇文章

订阅专栏

鸿蒙开发

688 篇文章

订阅专栏

HarmonyOS

651 篇文章

订阅专栏

往期知识点整理

场景描述

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

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

方案描述

场景一：

文字渐变效果

效果图

方案

使用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）全栈开发技术的学习路线，包含了鸿蒙开发必掌握的核心知识要点，内容有（OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony驱动开发、系统定制移植……等）技术知识点。