控制颜色渐变,实现图形图像的那种颜色渐变的效果

功能:实现图形图像的那种颜色渐变的效果。

使用场景:桌面歌词,歌播放到哪里,歌词的颜色渐变就跟随到哪里。

HarmonyOS
2024-05-26 14:16:56
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
电子土豆片

1.先设置颜色。

2.通过设置blendMode来实现颜色混合的模式。

3.再通过LinearGradient来控制颜色渐变的渐变颜色和渐变点位置。

核心代码如下:

//Index.ets 
  
@Entry 
@Component 
struct Index { 
@State message: string = 'Hello World'; 
@State value: number = 0.6 
​ 
build() { 
  Row() { 
    Column() { 
      Row() { 
        Text(this.message) 
          .fontSize(50) 
          .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 }) 
​ 
      Button("++").onClick(() => { 
        this.value += 0.01 
      }) 
      Button("--").onClick(() => { 
        this.value -= 0.01 
      }) 
    } 
    .width('100%') 
  } 
  .height('100%') 
 } 
}

实现效果

分享
微博
QQ
微信
回复
2024-05-27 18:06:14
相关问题
DataPanel如何实现颜色渐变
576浏览 • 1回复 待解决
图形图像开发场景实践
775浏览 • 1回复 待解决
如何实现组件边缘颜色渐变
2005浏览 • 1回复 待解决
HarmonyOS Tab颜色渐变宽度渐变
15浏览 • 1回复 待解决
类似边框颜色线性渐变
672浏览 • 1回复 待解决
文字背景颜色渐变显示
2188浏览 • 1回复 待解决
如何设置边框颜色渐变色?
531浏览 • 1回复 待解决
HarmonyOS 如何实现滚动渐变效果
363浏览 • 1回复 待解决
如何实现顶部渐变遮罩效果
529浏览 • 1回复 待解决
HarmonyOS 渐变遮罩效果如何实现
240浏览 • 1回复 待解决
HarmonyOS 如何实现文字渐变效果
60浏览 • 1回复 待解决
如何实现渐变圆角边框
2559浏览 • 1回复 待解决