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

可参考以下示例：

@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) //启离屏，这个控件之外的都是不想做渐隐的内容
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.

@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%")
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.

@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%')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.