HarmonyOS鸿蒙Next中list的子条目item中子组件点击旋转动画

根据你的代码看动画的代码是没问题的，没生效的原因可能是有：

1. dataSource的item的class没有加@ObservedV2装饰器，isExpand没有加@Trace装饰器。

2. 在@Builder函数中，当传递的参数为状态变量时，状态变量的改变不会引起@Builder函数内的UI刷新。按引用传递参数时，传递的参数可为状态变量，且状态变量的改变会引起@Builder函数内的UI刷新。故itemHeader的第三个参数应该为item，然后Image组件rotate用item.isExpand绑定。

参考代码如下：

[@ObservedV2](/user/ObservedV2)
class Data {
  [@Trace](/user/Trace) isExpand: boolean = false;
}

class BasicDataSource<T> implements IDataSource {
  private listeners: DataChangeListener[] = [];
  private originDataArray: T[] = [];

  public totalCount(): number {
    return this.originDataArray.length;
  }

  public getData(index: number): T {
    return this.originDataArray[index];
  }

  registerDataChangeListener(listener: DataChangeListener): void {
    if (this.listeners.indexOf(listener) < 0) {
      console.info('add listener');
      this.listeners.push(listener);
    }
  }

  unregisterDataChangeListener(listener: DataChangeListener): void {
    const pos = this.listeners.indexOf(listener);
    if (pos >= 0) {
      console.info('remove listener');
      this.listeners.splice(pos, 1);
    }
  }

  notifyDataReload(): void {
    this.listeners.forEach(listener => {
      listener.onDataReloaded();
    });
  }

  notifyDataAdd(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataAdd(index);
    });
  }

  notifyDataChange(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataChange(index);
    });
  }

  notifyDataDelete(index: number): void {
    this.listeners.forEach(listener => {
      listener.onDataDelete(index);
    });
  }

  notifyDataMove(from: number, to: number): void {
    this.listeners.forEach(listener => {
      listener.onDataMove(from, to);
    });
  }

  notifyDatasetChange(operations: DataOperation[]): void {
    this.listeners.forEach(listener => {
      listener.onDatasetChange(operations);
    });
  }
}

class MyDataSource<T> extends BasicDataSource<T> {
  private dataArray: T[] = [];

  public totalCount(): number {
    return this.dataArray.length;
  }

  public getData(index: number): T {
    return this.dataArray[index];
  }

  public pushData(data: T): void {
    this.dataArray.push(data);
    this.notifyDataAdd(this.dataArray.length - 1);
  }
}

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @State private dataSource: MyDataSource<Data> = new MyDataSource<Data>();

  @Builder
  itemHeader(index: number, str: string, item: Data) {
      Row() {
        Text(str + JSON.stringify(item.isExpand))
          .fontColor(Color.Red)
          .padding(6)

        Button() {

          Image($r('sys.media.ohos_ic_public_arrow_down'))
            .width(24)
            .height(24)
            .fillColor('#3F72AF')
            .rotate({ angle: item.isExpand? 90: 0 })
            .animation({
              duration : 2000,
              curve : Curve.Linear,
              delay : 0
            })
        }
        .width(36)
        .height(36)
        .backgroundColor(Color.Transparent)
        .onClick(() => {
          let bool:boolean = this.dataSource.getData(index).isExpand
          this.dataSource.getData(index).isExpand = !bool
          this.dataSource.notifyDataChange(index)
        })

      }.justifyContent(FlexAlign.SpaceBetween).width('100%').backgroundColor(Color.Orange)

    }

    aboutToAppear(): void {
      this.dataSource.pushData(new Data())
      this.dataSource.pushData(new Data())
      this.dataSource.pushData(new Data())
    }

    build() {
      List({ space: 3 }) {
        LazyForEach(this.dataSource, (item: Data, index) => {
          ListItem() {
            this.itemHeader(index, index.toString(), item)
            Text(item.isExpand ? '展开' : '收起')
          }
        }, (item: string) => item)
      }.cachedCount(5)
    }
}

哈哈，之前那个长按左/*右滑动删除条目也是你的问题吧，你这是研究动画呢？

显式动画方案：

Button() {
  Image($r('sys.media.ohos_ic_public_arrow_down'))
    .rotate({ angle: isExpand ? 90 : 0 })
}
.onClick(() => {
  animateTo({
    duration: 300,
    curve: Curve.EaseInOut
  }, () => {
    let bol = this.dataSource.getData(index).isExpand
    this.dataSource.getData(index).isExpand = !bol
    this.dataSource.notifyDataChange(index)
  })
})

属性动画方案

Image($r('sys.media.ohos_ic_public_arrow_down'))
  .rotate({ 
    angle: isExpand ? 90 : 0 
  })
  .animation({
    duration: 300,
    curve: Curve.EaseInOut,
    iterations: 1,
    playMode: PlayMode.Normal
  })

2个方案，你体会一下