@Entry
@Component
struct Demo {
  @State message: string = 'Hello World'
  @State location: number = 0.0
  @State leftlocation: number = -0.1
  @State rightlocation: number = 0.1

  // 配置渐变色起始点位周期性移动
  aboutToAppear(): void {
    setInterval(() => {
      this.location += 0.01
      this.leftlocation += 0.01
      this.rightlocation += 0.01
      if (this.location >= 1) {
        this.location = 0.0
        this.leftlocation = -0.1
        this.rightlocation = 0.1
      }
    }, 50)
  }

  build() {
    Column({ space: 5 }) {
      Row() {
        Text(this.message)
          .maxLines(1)
          .fontSize(40)
          .fontWeight(800)
          .fontColor(Color.White)
          .padding(10)
          .blendMode(BlendMode.DST_IN, BlendApplyType.OFFSCREEN) // 设置混合模式
      }
      .linearGradient({
        angle: 110,
        colors: [[Color.White, this.leftlocation], [Color.Orange, this.location],
          [Color.White, this.rightlocation]] // 设置渐变色起始点位
      })
      .blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN)
    }
    .width('100%')
    .backgroundColor(Color.Black)
    .justifyContent(FlexAlign.Center)
  }
}