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

请参考示例：

@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
  }
}
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.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.