HarmonyOS 拖拽时动画会丢失

拖拽的时候动画会丢失该如何处理呢?

一开始是抖动状态，长按一个和另一个交换后，动画会导致消息，以及拖拽元素的动画也消失了，是否有能够保持交换位置后动画还是保持的方法？以及长按拖拽元素保持动画的方法？

import { uniformTypeDescriptor } from '@kit.ArkData';

@Entry
@Component
struct DraggableTextGrid {
  @State texts: string[] = ['1', '2', '3', '4', '5', '1', '2', '3', '4', '5'];
  @State draggedText: string = "";
  @State draggedIndex: number = -1;
  @State myRotate: number = 1.0;
  @State shouldAnimate: boolean = true;
  private animationRunning: boolean = false;

  aboutToAppear() {
    this.uiContext = this.getUIContext?.();
  }

  uiContext: UIContext | undefined = undefined;

  onPageShow(): void {
    this.initAnimation();
  }

  initAnimation() {
    if (!this.animationRunning && this.uiContext) {
      this.animationRunning = true;  // 标记动画为运行中
      this.uiContext.keyframeAnimateTo({ iterations: -1 }, [
        {
          duration: 100,
          event: () => {
            this.myRotate = -10;
          }
        },
        {
          duration: 100,
          event: () => {
            this.myRotate = 10;
          }
        }
      ]);
    }
  }

  build() {
    Grid() {
      ForEach(this.texts, (text: string, index) => {
        GridItem() {
          if (this.draggedIndex === index) {
            Text(text)
              .width('100%')
              .height('100%')
              .opacity(0)
          } else {
            Text(text)
              .width('100%')
              .height('100%')
              .draggable(true)
              .onDragStart(() => {
                this.draggedText = text;
                this.draggedIndex = index;
              })
              .onDragEnd(() => {
                this.draggedText = "";
                this.draggedIndex = -1;
              })
              .allowDrop([uniformTypeDescriptor.UniformDataType.TEXT])
              .onDrop((event: DragEvent) => {
                if (this.draggedIndex !== index) {
                  // 用于交换位置，同时保证动画不间断
                  const tempTexts = [...this.texts];
                  tempTexts.splice(this.draggedIndex, 1);
                  tempTexts.splice(index, 0, this.draggedText);
                  this.texts = tempTexts;  // 一次性更新文本数组，减少动画中断
                }
                this.draggedText = "";
                this.draggedIndex = -1;
              })
              .onDragMove((event) => {
                if (this.draggedIndex !== index) {
                  // 使用临时数组进行操作，避免直接操作状态导致重绘
                  const tempTexts = [...this.texts];
                  tempTexts.splice(this.draggedIndex, 1);
                  tempTexts.splice(index, 0, this.draggedText);
                  this.texts = tempTexts;  // 一次性更新
                }
                this.draggedIndex = index;
              })
              .border({ width: 1, color: Color.Black });
          }
        }
        .width('100%')
        .height(50)
        .margin({ bottom: 5, right: 5 })
        .rotate({
          z: 1,
          angle: this.myRotate
        });
      })
    }
    .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
    .columnsGap(10)
    .rowsGap(10)
    .friction(0.6)
    .enableScrollInteraction(true)
    .multiSelectable(false)
    .edgeEffect(EdgeEffect.Spring)
    .scrollBar(BarState.On)
    .scrollBarColor(Color.Grey)
    .scrollBarWidth(4)
    .width('100%')
    .backgroundColor(0xFAEEE0)
    .height(300);
  }
}
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.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.