场景描述
文字特效是一个比较常见的功能,下面列举一些遇到的业务需求:
-
场景一:文字渐变效果
-
场景二:歌词滚动效果
-
场景三:文字倒影效果
-
场景四:跑马灯渐变效果
方案描述
场景一:
文字渐变效果
效果图
方案
使用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: () =&