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

最新推荐文章于 2024-09-09 21:03:29 发布

「已注销」

最新推荐文章于 2024-09-09 21:03:29 发布

阅读量1.1k

点赞数 13

分类专栏： HarmonyOS 鸿蒙开发移动开发文章标签： harmonyos 华为移动开发 ui 鸿蒙开发组件化自定义控件

本文链接：https://blog.csdn.net/MNXN666/article/details/140616321

版权

HarmonyOS 同时被 3 个专栏收录

100 篇文章 2 订阅

订阅专栏

鸿蒙开发

100 篇文章 3 订阅

订阅专栏

移动开发

100 篇文章 1 订阅

订阅专栏

场景描述

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

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

方案描述

场景一：

文字渐变效果

效果图

方案

使用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）全栈开发技术的学习路线，包含了鸿蒙开发必掌握的核心知识要点，内容有（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、WebGL、元服务、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony驱动开发、系统定制移植等等）鸿蒙（HarmonyOS NEXT）技术知识点。