Rubicon/tutu
1
0
Fork 0
Code Issues 19 Pull requests Projects Activity Actions

anim: adjust speed for grow and shrink

Browse source
This commit is contained in:
thislight 2024-11-03 18:09:42 +08:00
parent 20a5e565b1
commit 012b078cee
No known key found for this signature in database
GPG key ID: FCFE5192241CCD4E
1 changed files with 15 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/platform/anim.ts
View file

@ -49,7 +49,7 @@ export function useHeroSignal(
return [get, set]; return [get, set];
} else { } else {
console.debug("no hero source") console.debug("no hero source");
return [() => undefined, () => undefined]; return [() => undefined, () => undefined];
} }
} }
@ -85,7 +85,6 @@ export function animateRollOutFromTop(
return animation; return animation;
} }
export function animateRollInFromBottom( export function animateRollInFromBottom(
root: HTMLElement, root: HTMLElement,
options?: Omit<KeyframeAnimationOptions, "duration">, options?: Omit<KeyframeAnimationOptions, "duration">,
@ -126,8 +125,10 @@ export function animateGrowFromTopRight(
const { width, height } = root.getBoundingClientRect(); const { width, height } = root.getBoundingClientRect();
const durationX = Math.floor((height / 1600) * 1000); const speed = transitionSpeedForEnter(window.innerHeight);
const durationY = Math.floor((width / 1600) * 1000);
const durationX = Math.floor(height / speed);
const durationY = Math.floor(width / speed);
// finds the offset for the center frame, // finds the offset for the center frame,
// it will stops at the (minDuration / maxDuration)% // it will stops at the (minDuration / maxDuration)%
@ -137,20 +138,19 @@ export function animateGrowFromTopRight(
const centerOffset = minDuration / maxDuration; const centerOffset = minDuration / maxDuration;
const keyframes = [ const keyframes = [
{ transform: "scaleX(0)", opacity: 0, height: "0px", offset: 0 }, { transform: "scaleX(0.5)", opacity: 0, height: "0px", offset: 0 },
{ {
transform: `scaleX(${minDuration === durationX ? "1" : centerOffset})`, transform: `scaleX(${minDuration === durationX ? "1" : centerOffset / 2 + 0.5})`,
height: `${(minDuration === durationY ? 1 : centerOffset) * height}px`, height: `${(minDuration === durationY ? 1 : centerOffset) * height}px`,
offset: centerOffset, offset: centerOffset,
opacity: 1,
}, },
{ transform: "scaleX(1)", height: `${height}px`, offset: 1 }, { transform: "scaleX(1)", height: `${height}px`, opacity: 1, offset: 1 },
]; ];
const animation = root.animate( const animation = root.animate(keyframes, {
keyframes, ...options,
{ ...options, duration: maxDuration }, duration: maxDuration,
); });
const restore = () => { const restore = () => {
root.style.transformOrigin = transformOrigin; root.style.transformOrigin = transformOrigin;
@ -173,9 +173,9 @@ export function animateShrinkToTopRight(
const { width, height } = root.getBoundingClientRect(); const { width, height } = root.getBoundingClientRect();
const duration = Math.floor( const speed = transitionSpeedForLeave(window.innerWidth);
Math.max((width / 1600) * 1000, (height / 1600) * 1000),
); const duration = Math.floor(Math.max(width / speed, height / speed));
const animation = root.animate( const animation = root.animate(
{ {