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

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

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

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

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
相关问题
如何实现组件边缘颜色渐变
715浏览 • 1回复 待解决
类似边框颜色线性渐变
278浏览 • 1回复 待解决
文字背景颜色渐变显示
938浏览 • 1回复 待解决
图形图像开发场景实践
358浏览 • 1回复 待解决
如何实现渐变圆角边框
948浏览 • 1回复 待解决
List组件如何设置两端渐变效果
815浏览 • 1回复 待解决
鸿蒙 如何实现一个渐变圆形图片;
11107浏览 • 2回复 已解决
组件如何实现渐变色?
939浏览 • 1回复 待解决
Progress进度条如何实现渐变色?
70浏览 • 1回复 待解决
图片如何添加渐变模糊
733浏览 • 1回复 待解决