HarmonyOS 上如何实现透明渐变遮罩效果

直播间弹幕场景,最上方需要有一个透明渐变的遮罩实现渐隐效果,

试过了

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-sharp-clipping-V5#maskshape12

既没有渐变也没有实现透明需要实现该效果给出指导

HarmonyOS
2025-01-09 15:22:53
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
shlp

可以使用linearGradient加层叠布局、设置遮罩和list的位置,实现渐变的效果

相关文档链接:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-gradient-color-V5#lineargradient

@Entry
@Component
struct page240709164929023 {

  @State message: string = 'Hello World';
  @State
  products: Array<Product> = [];

  @Builder
  fadingOverlay() {
    Column()
      .width('100%')
      .height(200)
      .linearGradient({
        angle: 180,
        colors: [[Color.Black, 0], [Color.Transparent, 1]]
      })
      .zIndex(1) // 设置遮罩的 z-index 为 1,使其位于 Text 之上
  }

  @Builder
  danmuList(){
    // 产品列表
    List() {
      ForEach(this.products, (item: Product, index: number) => {
        ListItem() {
          Text(item.content.toString())
            .fontSize(50)
            .fontColor(Color.White)
            .opacity(this.products[index].opacity)
        }
      }, (item: Product) => {
        return item.content + "";
      })
    }.height("100%").width('100%')
  }

  aboutToAppear() {
    for (let index = 0; index < 20; index++) {
      const pro: Product = new Product(index, 1);
      this.products.push(pro)
    }
  }

  build() {
    // 添加遮罩层
    Column() {
      Stack({ alignContent: Alignment.TopStart }) {
        // 遮罩层
        this.fadingOverlay()
        this.danmuList()
      }

    }
    .width('100%').height('100%')
    .backgroundColor(Color.Pink)
  }
}

class Product {
  content: number;
  opacity: number;
  constructor(content: number, opacity: number) {
    this.content = content;
    this.opacity = opacity;
  }
}

@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)
          Text("234")
            .fontSize(180)
            .fontColor(Color.Orange)
            .width(300)
            .height(500)
          Text("234")
            .fontSize(180)
            .fontColor(Color.Orange)
            .width(300)
            .height(500)
        }
        .blendMode(BlendMode.SRC_IN, BlendApplyType.OFFSCREEN)
      }
      .linearGradient({
        angle: 180, colors: [['rgba(0, 255, 255, 1)', 0],
          ['rgba(0, 255, 255, 1)', 0.6],
          ['rgba(0, 255, 255, 0)', 1]]
      })
      .blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN) // 启离屏

    }
    .backgroundImage('common/1.jpeg')
    .backgroundImageSize(ImageSize.Cover)
    .width('100%')
    .height('100%')
  }
}
分享
微博
QQ
微信
回复
2025-01-09 18:17:53
相关问题
如何实现顶部渐变遮罩效果
798浏览 • 1回复 待解决
HarmonyOS 渐变遮罩效果如何实现
525浏览 • 1回复 待解决
HarmonyOS 如何实现透明遮罩效果
399浏览 • 1回复 待解决
HarmonyOS 如何实现透明度的渐变效果
316浏览 • 1回复 待解决
HarmonyOS 如何实现滚动渐变效果
729浏览 • 1回复 待解决
HarmonyOS 如何实现文字渐变效果
496浏览 • 1回复 待解决
引导遮罩效果实现的最佳方案
1664浏览 • 1回复 待解决
ArkTS卡片能否实现透明效果
766浏览 • 1回复 待解决
HarmonyOS 背景半透明渐变怎么设置
394浏览 • 1回复 待解决
如何设置组件透明效果
2444浏览 • 1回复 待解决
HarmonyOS 如何实现列表的效果
281浏览 • 1回复 待解决