基于原生实现高级显示效果

场景描述

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

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

方案描述

场景一：文字渐变效果

效果图

方案

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

场景四：跑马灯渐变效果

效果图

方案与核心代码

文字跑马灯实现有两种方案:

1、方案一：使用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)

2、方案二：使用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)