HarmonyOS LazyForEach中listItem添加动画效果？

Question

在List 中，LazyForEach 里面的ListItem 在刷新的时候无法做动画嘛？

同样一个动画，单独写就没有问题，但是放到List -\>LazyForEach-\>ListItem 中没有任何动画效果，直接从0到1了

Answer 1

可以参考自定义动画属性

参考链接：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)
}