实现多行文本渐变,Text实现多行文本渐变

Text实现多行文本渐变

HarmonyOS
2024-05-26 15:42:52
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

使用的核心API

核心代码解释

核心代码如下:

@Entry 
@Component 
struct Page240126155113078 { 
@State message: string = '文本文本文本文本文本'; 
@State playLine: number = 1 
​ 
build() { 
  Row() { 
    Column() { 
      TextGradient({ message: this.message, playMode: this.playLine, line: 1 }) 
      TextGradient({ message: this.message, playMode: this.playLine, line: 2 }) 
      TextGradient({ message: this.message, playMode: this.playLine, line: 3 }) 
    } 
    .width('100%') 
  } 
  .height('100%') 
} 
} 
​ 
@Component 
struct TextGradient { 
@State message: string = 'Hello World'; 
@State value: number = 0.0 
@Link @Watch("playModeWatch") playMode: number 
@Prop line: number 
private intervalId: number | null = null 
​ 
playModeWatch() { 
  if (this.playMode === this.line) { 
    this.intervalId = setInterval(() => { 
      this.value = parseFloat((this.value + 0.01).toFixed(2)) 
      if (this.value == 1) { 
        clearInterval(this.intervalId) 
        this.intervalId = null 
        this.playMode++ 
      } 
    }, 100) 
  } 
} 
​ 
aboutToAppear(): void { 
  if (this.playMode === this.line) { 
    this.intervalId = setInterval(() => { 
      this.value = parseFloat((this.value + 0.01).toFixed(2)) 
      if (this.value == 1) { 
        clearInterval(this.intervalId) 
        this.intervalId = null 
        this.playMode++ 
      } 
    }, 100) 
  } 
} 
​ 
build() { 
  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 }) 
} 
}

实现效果

分享
微博
QQ
微信
回复
2024-05-27 20:45:36
相关问题
HarmonyOS Text多行文本不能居中对齐
579浏览 • 1回复 待解决
多行文本省略的展开与显示
1129浏览 • 1回复 待解决
多行文字后面添加标签
237浏览 • 1回复 待解决
Text怎么设置文本渐变
244浏览 • 0回复 待解决
Text组件是否支持多行显示
1990浏览 • 1回复 待解决
HarmonyOS 如何进行文本文件读取?
167浏览 • 1回复 待解决
ArkTS实现Text文本的【...展开】
1654浏览 • 2回复 待解决
如何实现多行输入,你知道吗?
1896浏览 • 1回复 待解决
Text文本过长时如何实现上下滚动?
571浏览 • 1回复 待解决
Text多行展示时,如何设置行间距?
315浏览 • 1回复 待解决
HarmonyOS 如何实现滚动渐变效果?
294浏览 • 1回复 待解决
如何实现渐变的圆角边框
2501浏览 • 1回复 待解决
组件如何实现渐变色?
2040浏览 • 1回复 待解决
DataPanel如何实现颜色的渐变
513浏览 • 1回复 待解决
如何实现顶部渐变遮罩效果
486浏览 • 1回复 待解决
如何实现组件边缘的颜色渐变
1955浏览 • 1回复 待解决
Text如何实现文本段落的两端对齐?
392浏览 • 1回复 待解决
HarmonyOS 渐变遮罩效果如何实现
184浏览 • 1回复 待解决