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

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

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

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如何实现颜色渐变
420浏览 • 1回复 待解决
如何实现组件边缘颜色渐变
1885浏览 • 1回复 待解决
图形图像开发场景实践
653浏览 • 1回复 待解决
类似边框颜色线性渐变
598浏览 • 1回复 待解决
文字背景颜色渐变显示
2093浏览 • 1回复 待解决
如何设置边框颜色渐变色?
415浏览 • 1回复 待解决
如何实现顶部渐变遮罩效果
424浏览 • 1回复 待解决
HarmonyOS 如何实现滚动渐变效果
239浏览 • 1回复 待解决
HarmonyOS 渐变遮罩效果如何实现
148浏览 • 1回复 待解决
如何实现渐变圆角边框
2437浏览 • 1回复 待解决
List组件如何设置两端渐变效果
1887浏览 • 1回复 待解决
组件如何实现渐变色?
2009浏览 • 1回复 待解决