feat: 调节动画

src/ui/Duel/PlayMat/Card/index.tsx

@@ -54,6 +54,7 @@ export const Card: React.FC<{ idx: number }> = React.memo(({ idx }) => {
         focusOpacity: 1,
         subZ: 0,
         opacity: 1,
+        config: { mass: 0.8, tension: 800, friction: 30 },
       }) satisfies SpringApiProps,
   );
 

src/ui/Duel/PlayMat/Card/springs/attack.ts

@@ -20,6 +20,7 @@ export const attack: AttackFunc = async (props) => {
   if (options?.directAttack) {
     // 直接攻击
     y = BLOCK_HEIGHT_M + BLOCK_HEIGHT_S;
+    x = 0;
 
     if (isMe(card.location.controller)) {
       y = -y;
@@ -40,30 +41,31 @@ export const attack: AttackFunc = async (props) => {
       x = -x;
       y = -y;
     }
-
-    rz += -Math.atan((x - current.x) / (y - current.y)) / (Math.PI / 180);
   } else {
     console.error(`<Spring/Attack>directAttack is false and target is null.`);
     return;
   }
 
+  rz += -Math.atan((x - current.x) / (y - current.y)) / (Math.PI / 180);
+
   // 先浮空
   await asyncStart(api)({
     z: 200,
   });
   // 后撤半个卡位，并调整倾斜角
-  await asyncStart(api)({
-    y:
-      current.y +
-      (BLOCK_HEIGHT_M / 2) * (isMe(card.location.controller) ? 1 : -1),
-    rz,
-  });
+  // await asyncStart(api)({
+  //   y:
+  //     current.y +
+  //     (BLOCK_HEIGHT_M / 2) * (isMe(card.location.controller) ? 1 : -1),
+  //   rz,
+  // });
   // 加速前冲
   await asyncStart(api)({
     x,
     y,
+    rz,
     config: {
-      easing: easings.easeInOutSine,
+      easing: easings.easeInSine,
     },
   });
   // 减速归位
@@ -72,8 +74,5 @@ export const attack: AttackFunc = async (props) => {
     y: current.y,
     z: current.z,
     rz: current.rz,
-    config: {
-      easing: easings.easeInOutQuad,
-    },
   });
 };

src/ui/Duel/PlayMat/Card/springs/focus.ts

@@ -3,6 +3,7 @@ import { type CardType, matStore } from "@/stores";
 
 import type { SpringApi } from "./types";
 import { asyncStart } from "./utils";
+import { sleep } from "@/infra";
 
 /** 发动效果的动画 */
 export const focus = async (props: { card: CardType; api: SpringApi }) => {
@@ -19,6 +20,7 @@ export const focus = async (props: { card: CardType; api: SpringApi }) => {
       // rz: 0,
       z: current.z + 50,
     });
+    await sleep(500); // 稍微停一下，让人看清
     await asyncStart(api)(current);
   } else {
     await asyncStart(api)({

src/ui/Duel/PlayMat/Card/springs/moveToGround.ts

@@ -98,32 +98,24 @@ export const moveToGround: MoveFunc = async (props) => {
       rz,
       height: 0,
     });
-  } else {
-    await asyncStart(api)({
-      x,
-      y,
-      height,
-      z: is_overlay ? 120 : 200,
-      ry,
-      rz,
-      config: {
-        tension: 250,
-        clamp: true,
-        easing: easings.easeOutSine,
-      },
-    });
   }
 
+  // 先稍微浮起，然后降落，避免卡穿模
+  asyncStart(api)({
+    z: height / 2
+  }).then(() => asyncStart(api)({
+    z: 0
+  }))
+
   await asyncStart(api)({
     height,
+    x,
+    y,
     z: 0,
     subZ: isToken ? 100 : 0,
+    ry,
+    rz,
     zIndex: is_overlay ? 1 : 3,
-    config: {
-      easing: easings.easeInQuad,
-      duration: 200,
-      clamp: true,
-    },
   });
   if (isToken) api.set({ subZ: 0 });
 };

src/ui/Duel/PlayMat/Card/springs/moveToOutside.ts

@@ -22,16 +22,27 @@ export const moveToOutside: MoveFunc = async (props) => {
   const { zone, controller, position, sequence } = card.location;
 
   let x =
-      BLOCK_WIDTH * 2.5 +
-      COL_GAP * 2 +
-      BLOCK_OUTSIDE_OFFSET_X +
-      CARD_HEIGHT_O * CARD_RATIO * 0.5,
+    BLOCK_WIDTH * 2.5 +
+    COL_GAP * 2 +
+    BLOCK_OUTSIDE_OFFSET_X +
+    CARD_HEIGHT_O * CARD_RATIO * 0.5,
     y = ROW_GAP + BLOCK_HEIGHT_M + (BLOCK_HEIGHT_M - CARD_HEIGHT_O) / 2;
   if (zone === REMOVED) y -= ROW_GAP + CARD_HEIGHT_O;
   if (!isMe(controller)) {
     x = -x;
     y = -y;
   }
+
+  // 先稍微浮起，然后降落，避免卡穿模
+  asyncStart(api)({
+    z: CARD_HEIGHT_O / 2
+  }).then(() => asyncStart(api)({
+    z: 0,
+    config: {
+      clamp: false
+    }
+  }))
+
   await asyncStart(api)({
     x,
     y,
@@ -41,9 +52,6 @@ export const moveToOutside: MoveFunc = async (props) => {
     ry: [ygopro.CardPosition.FACEDOWN].includes(position) ? 180 : 0,
     subZ: 100,
     zIndex: sequence,
-    config: {
-      tension: 140,
-    },
   });
   api.set({ subZ: 0 });
 };

src/ui/Duel/PlayMat/Card/springs/types.ts

-import type { SpringRef } from "@react-spring/web";
+import type { SpringRef, SpringConfig } from "@react-spring/web";
 
 import type { ygopro } from "@/api";
 import type { CardType } from "@/stores";
@@ -20,6 +20,8 @@ export interface SpringApiProps {
   // <<< focus
 
   subZ: number; // 0 -> 100，这是为了让卡片移动过程中，稍微上浮一些，避免一些奇怪的遮挡问题
+
+  config?: SpringConfig
 }
 
 export type SpringApi = SpringRef<SpringApiProps>;
@@ -37,7 +39,7 @@ export type MoveFunc = OptionsToFunc<MoveOptions>;
 
 export type AttackOptions =
   | {
-      directAttack: true;
-    }
+    directAttack: true;
+  }
   | { directAttack: false; target: ygopro.CardLocation };
 export type AttackFunc = OptionsToFunc<AttackOptions>;