HarmonyOS 如何实现透明度的渐变效果

有些场景下需要对遮罩浮层做透明度的渐变效果,不是颜色的渐变linearGradient如何实现?

HarmonyOS
1天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Heiang

可参考以下示例:

@Entry
@Component
struct ScrollExample {
  build() {
    Stack() {

      Column() {
      } // dst
      .height('100%')
      .width('100%')
      .backgroundColor(Color.Pink)

      Column() {
      }
      .height('100%')
      .width('100%')
      .linearGradient({
        angle: 180, colors: [['rgba(0, 255, 255, 1)', 0],
          ['rgba(0, 255, 255, 1)', 0.8],
          ['rgba(0, 255, 255, 0)', 1]]
      }) // src
      .blendMode(BlendMode.DST_IN) // DST_IN运算规则为:dst * sa
    }
    .height('100%')
    .width('100%')
    .blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN) //启离屏,这个控件之外的都是不想做渐隐的内容
  }
}
@Entry
@Component
struct ImageOpacityDemo {
  build() {
    Column() {
      Stack() {
        Column() {
          Image($r("app.media.app_icon"))
        }
        .height("40%")

        Column() {
          Column() {
            Image($r("app.media.GenshinImpact"))
              .width('100%')

          }
          .blendMode(BlendMode.SRC_IN, BlendApplyType.OFFSCREEN)
          .backgroundColor(Color.Transparent)
          .width('100%')
          .height('100%')
        }
        .width('100%')
        .height('40%')
        .linearGradient({
          angle: 180,
          // rgba(0, 0, 0, 0) 表示一种完全透明的颜色,其中最后一个参数 alpha(透明度)值为 0,表示该颜色是完全透明的
          colors: [['rgba(0, 0, 0, 1)', 0], ['rgba(0, 0, 0, 0)', 1]]
        })
        .blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN)
      }
    }
    .width("100%")
  }
}
@Entry
@Component
struct ScrollExample {
  scroller: Scroller = new Scroller()
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6]

  build() {
    Column() {
      Column() {
        // BlendMode.SRC_IN所在控件(包含子控件)为要做渐隐的具体内容,注意src_in所在的控件的大小和linearGradient所在的控件大小位置必须完全一致,不然可能会有露线问题(linearGradient没有被完全覆盖掉)
        Column() {
          Text("234")
            .fontSize(180)
            .fontColor(Color.Orange)
            .width(300)
            .height(500)
        }
        .backgroundColor(Color.Pink)
        .blendMode(BlendMode.SRC_IN, BlendApplyType.OFFSCREEN)
      }
      .linearGradient({
        angle: 180, colors: [['rgba(0, 255, 255, 1)', 0],
          ['rgba(0, 255, 255, 1)', 0.8],
          ['rgba(0, 255, 255, 0)', 1]]
      })
      .blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN) // 启离屏
    }
    .width('100%')
    .height('100%')
  }
}
分享
微博
QQ
微信
回复
1天前
相关问题
SideBarContainer如何设置透明度
2360浏览 • 1回复 待解决
自定义颜色透明度如何实现
392浏览 • 1回复 待解决
HarmonyOS 如何设置背景透明度
26浏览 • 1回复 待解决
HarmonyOS 如何设置颜色透明度
775浏览 • 1回复 待解决
HarmonyOS color颜色怎么指定透明度
796浏览 • 1回复 待解决
HarmonyOS Image UI 如何设置图片透明度
32浏览 • 1回复 待解决
设置子窗口透明度未生效
1746浏览 • 1回复 待解决
背景色透明度问题解决方案
618浏览 • 1回复 待解决