HarmonyOS 如何实现柔滑边缘的效果？

Question

如何实现柔滑边缘的效果，即不知道背景颜色情况下，直接将边缘过度成透明，透出底下颜色

Answer 1

请参考示例：

@Entry
@Component
struct TestCommentDisplay {
  @State message: string = 'Hello World';
  @State
  products: Array<Product> = [];

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

  build() {
    Column() {
      List() {
        ForEach(this.products, (item: Product, index: number) => {
          ListItem() {
            Text(item.content.toString())
              .fontSize(50)
              .opacity(this.products[index].opacity)
          }
          .onVisibleAreaChange([0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0], (isVisible: boolean, currentRatio: number) => {
            console.info('tag：：：Test Text isVisible: ' + isVisible + ', currentRatio:' + currentRatio)
            this.products[index] = new Product(this.products[index].content, currentRatio)
          })
        }, (item: Product) => {
          return item.content + "";
        })
      }.height("100%").width('100%')
    }
    .width('100%').height('100%')
  }
}

class Product {
  content: number;
  opacity: number;

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