Commit 66c3b776 authored by timel's avatar timel

feat: 调节动画

parent 24a7c1b4
...@@ -54,6 +54,7 @@ export const Card: React.FC<{ idx: number }> = React.memo(({ idx }) => { ...@@ -54,6 +54,7 @@ export const Card: React.FC<{ idx: number }> = React.memo(({ idx }) => {
focusOpacity: 1, focusOpacity: 1,
subZ: 0, subZ: 0,
opacity: 1, opacity: 1,
config: { mass: 1, tension: 800, friction: 30 },
}) satisfies SpringApiProps, }) satisfies SpringApiProps,
); );
......
...@@ -52,16 +52,17 @@ export const attack: AttackFunc = async (props) => { ...@@ -52,16 +52,17 @@ export const attack: AttackFunc = async (props) => {
z: 200, z: 200,
}); });
// 后撤半个卡位,并调整倾斜角 // 后撤半个卡位,并调整倾斜角
await asyncStart(api)({ // await asyncStart(api)({
y: // y:
current.y + // current.y +
(BLOCK_HEIGHT_M / 2) * (isMe(card.location.controller) ? 1 : -1), // (BLOCK_HEIGHT_M / 2) * (isMe(card.location.controller) ? 1 : -1),
rz, // rz,
}); // });
// 加速前冲 // 加速前冲
await asyncStart(api)({ await asyncStart(api)({
x, x,
y, y,
rz,
config: { config: {
easing: easings.easeInOutSine, easing: easings.easeInOutSine,
}, },
...@@ -72,8 +73,5 @@ export const attack: AttackFunc = async (props) => { ...@@ -72,8 +73,5 @@ export const attack: AttackFunc = async (props) => {
y: current.y, y: current.y,
z: current.z, z: current.z,
rz: current.rz, rz: current.rz,
config: {
easing: easings.easeInOutQuad,
},
}); });
}; };
...@@ -98,32 +98,17 @@ export const moveToGround: MoveFunc = async (props) => { ...@@ -98,32 +98,17 @@ export const moveToGround: MoveFunc = async (props) => {
rz, rz,
height: 0, 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)({ await asyncStart(api)({
height, height,
x,
y,
z: 0, z: 0,
ry,
rz,
subZ: isToken ? 100 : 0, subZ: isToken ? 100 : 0,
zIndex: is_overlay ? 1 : 3, zIndex: is_overlay ? 1 : 3,
config: {
easing: easings.easeInQuad,
duration: 200,
clamp: true,
},
}); });
if (isToken) api.set({ subZ: 0 }); if (isToken) api.set({ subZ: 0 });
}; };
...@@ -22,16 +22,20 @@ export const moveToOutside: MoveFunc = async (props) => { ...@@ -22,16 +22,20 @@ export const moveToOutside: MoveFunc = async (props) => {
const { zone, controller, position, sequence } = card.location; const { zone, controller, position, sequence } = card.location;
let x = let x =
BLOCK_WIDTH * 2.5 + BLOCK_WIDTH * 2.5 +
COL_GAP * 2 + COL_GAP * 2 +
BLOCK_OUTSIDE_OFFSET_X + BLOCK_OUTSIDE_OFFSET_X +
CARD_HEIGHT_O * CARD_RATIO * 0.5, CARD_HEIGHT_O * CARD_RATIO * 0.5,
y = ROW_GAP + BLOCK_HEIGHT_M + (BLOCK_HEIGHT_M - CARD_HEIGHT_O) / 2; y = ROW_GAP + BLOCK_HEIGHT_M + (BLOCK_HEIGHT_M - CARD_HEIGHT_O) / 2;
if (zone === REMOVED) y -= ROW_GAP + CARD_HEIGHT_O; if (zone === REMOVED) y -= ROW_GAP + CARD_HEIGHT_O;
if (!isMe(controller)) { if (!isMe(controller)) {
x = -x; x = -x;
y = -y; y = -y;
} }
api.set({
z: 0,
subZ: 100,
})
await asyncStart(api)({ await asyncStart(api)({
x, x,
y, y,
...@@ -41,9 +45,6 @@ export const moveToOutside: MoveFunc = async (props) => { ...@@ -41,9 +45,6 @@ export const moveToOutside: MoveFunc = async (props) => {
ry: [ygopro.CardPosition.FACEDOWN].includes(position) ? 180 : 0, ry: [ygopro.CardPosition.FACEDOWN].includes(position) ? 180 : 0,
subZ: 100, subZ: 100,
zIndex: sequence, zIndex: sequence,
config: {
tension: 140,
},
}); });
api.set({ subZ: 0 }); api.set({ subZ: 0 });
}; };
...@@ -20,6 +20,13 @@ export interface SpringApiProps { ...@@ -20,6 +20,13 @@ export interface SpringApiProps {
// <<< focus // <<< focus
subZ: number; // 0 -> 100,这是为了让卡片移动过程中,稍微上浮一些,避免一些奇怪的遮挡问题 subZ: number; // 0 -> 100,这是为了让卡片移动过程中,稍微上浮一些,避免一些奇怪的遮挡问题
config?: Partial<{
mass: number,
tension: number,
friction: number,
clamp: boolean
}>
} }
export type SpringApi = SpringRef<SpringApiProps>; export type SpringApi = SpringRef<SpringApiProps>;
...@@ -37,7 +44,7 @@ export type MoveFunc = OptionsToFunc<MoveOptions>; ...@@ -37,7 +44,7 @@ export type MoveFunc = OptionsToFunc<MoveOptions>;
export type AttackOptions = export type AttackOptions =
| { | {
directAttack: true; directAttack: true;
} }
| { directAttack: false; target: ygopro.CardLocation }; | { directAttack: false; target: ygopro.CardLocation };
export type AttackFunc = OptionsToFunc<AttackOptions>; export type AttackFunc = OptionsToFunc<AttackOptions>;
import classNames from "classnames"; import classNames from "classnames";
import { CSSProperties, useMemo } from "react"; import { CSSProperties, useMemo, useEffect, useState } from "react";
import { useConfig } from "@/config"; import { useConfig } from "@/config";
import { isSuperReleaseCard } from "@/superPreRelease"; import { isSuperReleaseCard } from "@/superPreRelease";
...@@ -21,33 +21,41 @@ export const YgoCard: React.FC<Props> = (props) => { ...@@ -21,33 +21,41 @@ export const YgoCard: React.FC<Props> = (props) => {
const { const {
className, className,
code = 0, code = 0,
// cardName,
isBack = false, isBack = false,
width, width,
style, style,
onClick, onClick,
onLoad, onLoad,
} = props; } = props;
return useMemo(
() => ( const [src, setSrc] = useState(
<div "https://img2.imgtp.com/2024/03/06/G6wTJRz9.png",
className={classNames(styles["ygo-card"], className)} );
style={
{ useEffect(() => {
width, const img = new Image();
"--src": `url(${getCardImgUrl(code, isBack)})`, img.onload = () => {
...style, console.timeEnd(code.toString());
} as any setSrc(img.src); // 图片加载完成后更新src状态
} };
onClick={onClick} // 直接设置图片路径,无需url()包裹
// 加载完成 img.src = getCardImgUrl(code, isBack);
onLoad={onLoad} console.time(code.toString());
> }, [code, isBack]); // useEffect的依赖数组中加入isBack
{/* 暂时不能这么写...但如果用onload的话来判断可能又很消耗性能,再看看吧 */}
{/* {cardName} */} return (
</div> <div
), className={classNames(styles["ygo-card"], className)}
[code], style={
{
width,
"--src": `url(${src})`,
...style,
} as any
}
onClick={onClick}
onLoad={onLoad}
></div>
); );
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment