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

场景描述

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

  • 场景一:文字渐变效果

  • 场景二:歌词滚动效果

  • 场景三:文字倒影效果

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

方案描述

场景一:

文字渐变效果

效果图

方案

使用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: () =&
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值