HarmonyOS鸿蒙Next中关于拖拽item交换位置的过度动画

HarmonyOS鸿蒙Next中关于拖拽item交换位置的过度动画 先上效果

代码实现来自官网的grid拖拽部分，基本没改，地址是

https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-container-grid-0000001815927620

示例5

官网这个例子里没有动画过度，松手后item瞬间交换位置，要想要动画过度效果只需要给grid加上一个属性就行

.supportAnimation(true)

完整代码：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @State dataArr: string[] = [
    'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'
  ]
  @State text: string = ''

  build() {
    RelativeContainer() {
      Grid() {
        ForEach(this.dataArr,
          (item: string) => {
            GridItem() {
              this.buffItem(item)
            }
          })
      }
      .editMode(true)
      .onItemDragStart((event: ItemDragInfo, itemIndex: number) => {
        this.text = this.dataArr[itemIndex]
        return this.pixelMapBuilder()
      })
      .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => {
        if (!isSuccess || insertIndex >= this.dataArr.length) {
          return
        }
        this.changeIndex(itemIndex, insertIndex)
      })
      .columnsTemplate('1fr 1fr')
      .scrollBar(BarState.Off)
      .columnsGap(18)
      .rowsGap(20)
      .supportAnimation(true) // <-----------------这里是增加过度动画的关键
      .margin({ left: 16, right: 16 })
      .alignRules({
        center: { anchor: '__container__', align: VerticalAlign.Center },
        middle: { anchor: '__container__', align: HorizontalAlign.Center }
      })
    }
    .height('100%')
    .width('100%')
  }

  @Builder
  pixelMapBuilder() {
    Stack() {
      Column() {
        Image($r('app.media.startIcon')).width(30)
        Text(this.text)
          .fontSize(16)
          .fontColor('#000000')
          .textAlign(TextAlign.Center)
      }
      .width(160)
      .height(160)
      .justifyContent(FlexAlign.Center)
    }
    .borderRadius(8)
    .backgroundColor('#ffe78b8b')
    .onClick(() => {
    })
  }

  @Builder
  buffItem(item: string) {
    Stack() {
      Column() {
        Image($r('app.media.startIcon')).width(30)
        Text(item)
          .fontSize(16)
          .fontColor('#000000')
          .textAlign(TextAlign.Center)
      }
      .width(160)
      .height(160)
      .justifyContent(FlexAlign.Center)
    }
    .borderRadius(8)
    .backgroundColor('#ffe78b8b')
    .onClick(() => {
    })
  }

  changeIndex(index1: number, index2: number) {
    let temp: string;
    temp = this.dataArr[index1];
    this.dataArr[index1] = this.dataArr[index2];
    this.dataArr[index2] = temp;
  }
}