HarmonyOS LazyForEach中listItem添加动画效果

可以参考自定义动画属性

参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-custom-attribute-animation-V5

参考demo：

@Entry
@Component
struct MyComponent {
  @State private materialsDataSource: FilterItemDataSource = new FilterItemDataSource()
  private dataOrign: MaterialWrap[] = []
  @State widths:number = 10
  aboutToAppear() {
    for (let i = 0; i <= 2; i++) {
      this.dataOrign.push(new MaterialWrap(10))
    }
    this.materialsDataSource.filterDataItems = this.dataOrign
    this.materialsDataSource.notifyDataReload()
  }
  build() {
    Column() {
      List({ space: 3 }) {
        LazyForEach(this.materialsDataSource, (item: MaterialWrap) => {
          ListItem() {
            Button("button").animatableFontSize(item.size)
              .animation({ duration: 1000, curve: Curve.Linear })
          }
          .onClick(() => {
            item.size = item.size == 10 ? 20 : 10;
          })
        }, (item: MaterialWrap) => item.size.toString())
      }.cachedCount(5)
    }
  }
}
@AnimatableExtend(Button)
function animatableFontSize(size: number) {
  .fontSize(size)
}
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.