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