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: 1, tension: 800, friction: 30 },
       }) satisfies SpringApiProps,
   );
 

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

@@ -52,16 +52,17 @@ export const attack: AttackFunc = async (props) => {
     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,
     },
@@ -72,8 +73,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/moveToGround.ts

@@ -98,32 +98,17 @@ 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,
-      },
-    });
   }
 
   await asyncStart(api)({
     height,
+    x,
+    y,
     z: 0,
+    ry,
+    rz,
     subZ: isToken ? 100 : 0,
     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,20 @@ 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;
   }
+  api.set({
+    z: 0,
+    subZ: 100,
+  })
   await asyncStart(api)({
     x,
     y,
@@ -41,9 +45,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

@@ -20,6 +20,13 @@ export interface SpringApiProps {
   // <<< focus
 
   subZ: number; // 0 -> 100，这是为了让卡片移动过程中，稍微上浮一些，避免一些奇怪的遮挡问题
+
+  config?: Partial<{
+    mass: number,
+    tension: number,
+    friction: number,
+    clamp: boolean
+  }>
 }
 
 export type SpringApi = SpringRef<SpringApiProps>;
@@ -37,7 +44,7 @@ export type MoveFunc = OptionsToFunc<MoveOptions>;
 
 export type AttackOptions =
   | {
-      directAttack: true;
-    }
+    directAttack: true;
+  }
   | { directAttack: false; target: ygopro.CardLocation };
 export type AttackFunc = OptionsToFunc<AttackOptions>;

src/ui/Shared/YgoCard/index.tsx

 import classNames from "classnames";
-import { CSSProperties, useMemo } from "react";
+import { CSSProperties, useMemo, useEffect, useState } from "react";
 
 import { useConfig } from "@/config";
 import { isSuperReleaseCard } from "@/superPreRelease";
@@ -21,33 +21,41 @@ export const YgoCard: React.FC<Props> = (props) => {
   const {
     className,
     code = 0,
-    // cardName,
     isBack = false,
     width,
     style,
     onClick,
     onLoad,
   } = props;
-  return useMemo(
-    () => (
-      <div
-        className={classNames(styles["ygo-card"], className)}
-        style={
-          {
-            width,
-            "--src": `url(${getCardImgUrl(code, isBack)})`,
-            ...style,
-          } as any
-        }
-        onClick={onClick}
-        // 加载完成
-        onLoad={onLoad}
-      >
-        {/* 暂时不能这么写...但如果用onload的话来判断可能又很消耗性能，再看看吧 */}
-        {/* {cardName} */}
-      </div>
-    ),
-    [code],
+
+  const [src, setSrc] = useState(
+    "https://img2.imgtp.com/2024/03/06/G6wTJRz9.png",
+  );
+
+  useEffect(() => {
+    const img = new Image();
+    img.onload = () => {
+      console.timeEnd(code.toString());
+      setSrc(img.src); // 图片加载完成后更新src状态
+    };
+    // 直接设置图片路径，无需url()包裹
+    img.src = getCardImgUrl(code, isBack);
+    console.time(code.toString());
+  }, [code, isBack]); // useEffect的依赖数组中加入isBack
+
+  return (
+    <div
+      className={classNames(styles["ygo-card"], className)}
+      style={
+        {
+          width,
+          "--src": `url(${src})`,
+          ...style,
+        } as any
+      }
+      onClick={onClick}
+      onLoad={onLoad}
+    ></div>
   );
 };