feat: 为 观察记忆训练 洗牌时添加动画

features/feature/src/main/ets/components/observationalComp.ets

@@ -28,15 +28,17 @@ export struct observationalComp {
    */
   shuffleIconArray(): void {
     setTimeout(() => {
-      this.flipAll(false)
-
       const array = this.iconArray;
-      for (let i = array.length - 1; i > 0; i--) {
-        const j = Math.floor(Math.random() * (i + 1));
-        let temp = array[i]
-        array[i] = array[j]
-        array[j] = temp
-      }
+      this.getUIContext().animateTo({duration: 500}, () => {
+        this.flipAll(false)
+
+        for (let i = array.length - 1; i > 0; i--) {
+          const j = Math.floor(Math.random() * (i + 1));
+          let temp = array[i]
+          array[i] = array[j]
+          array[j] = temp
+        }
+      })
 
       if(this.timer != -1) clearTimeout(this.timer)
       this.timer = setTimeout(() => {
@@ -167,6 +169,7 @@ export struct observationalComp {
       .rowsGap(25)
       .columnsGap(20)
       .layoutWeight(1)
+      .supportAnimation(true)
       .columnsTemplate('repeat(3, 1fr)')
 
       Row({space: 73}){

features/feature/src/main/ets/view/ThirdView.ets

@@ -127,9 +127,11 @@ struct HeroItem{
     } else {
       for (let i = 0; i < this.flowerCoordinates.length; i++) {
         let f = new Location(this.flowerCoordinates[i].x, this.flowerCoordinates[i].y)
-        f.x -= 5
-        f.y += 20
-        this.getUIContext().animateTo({ duration: 600 }, () => {
+        // 将原来的固定值修改为随机值
+        // f.x += (Math.random() > 0.5 ? 1 : -1) * (5 + Math.random() * 15)
+
+        f.y += 15 + Math.random() * (this.isOpen ? 300 : 50)
+        this.getUIContext().animateTo({ duration: 800 }, () => {
           this.flowerCoordinates.splice(i, 1, f)
         })
       }
@@ -302,12 +304,15 @@ struct HeroItem{
               Image($r('app.media.icon_hero_flower'))
                 .width(36)
                 .aspectRatio(1)
+                .zIndex(999)
                 .position({ x: `${item.item.x}%`, y: item.item.y })
+                .opacity(this.flowerAnimation ? 1 : 0)
             })
             .key((item) => JSON.stringify(item))
         }
         .width("100%")
         .height(this.height_)
+        .opacity(this.flowerAnimation ? 1 : 0)
       }
     }
     .width('100%')