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

BottomSheet: adjust hero animation
All checks were successful
/ depoly (push) Successful in 1m17s
Details

Browse source
This commit is contained in:
thislight 2024-11-03 18:39:09 +08:00
parent 06e988e0e5
commit 8a435be4c8
No known key found for this signature in database
GPG key ID: FCFE5192241CCD4E
1 changed files with 31 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
src/material/BottomSheet.tsx
View file

@ -11,8 +11,15 @@ import {
import "./BottomSheet.css";
import { useHeroSignal } from "../platform/anim";
import material from "./material.module.css";
import { ANIM_CURVE_ACELERATION, ANIM_CURVE_DECELERATION } from "./theme";
import { animateSlideInFromRight, animateSlideOutToRight } from "../platform/anim";
import {
ANIM_CURVE_ACELERATION,
ANIM_CURVE_DECELERATION,
ANIM_CURVE_STD,
} from "./theme";
import {
animateSlideInFromRight,
animateSlideOutToRight,
} from "../platform/anim";
export type BottomSheetProps = {
open?: boolean;
@ -90,10 +97,10 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
return;
}
const onAnimationEnd = () => {
element.classList.remove("animated")
onClose()
}
element.classList.add("animated")
element.classList.remove("animated");
onClose();
};
element.classList.add("animated");
animation = props.bottomUp
? animateSlideInFromBottom(element, true)
: animateSlideOutToRight(element, { easing: ANIM_CURVE_ACELERATION });
@ -116,13 +123,15 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
} else if (props.bottomUp) {
animateSlideInFromBottom(element);
} else if (window.innerWidth <= 560) {
element.classList.add("animated")
element.classList.add("animated");
const onAnimationEnd = () => {
element.classList.remove("animated")
}
animation = animateSlideInFromRight(element, { easing: ANIM_CURVE_DECELERATION });
animation.addEventListener("finish", onAnimationEnd)
animation.addEventListener("cancel", onAnimationEnd)
element.classList.remove("animated");
};
animation = animateSlideInFromRight(element, {
easing: ANIM_CURVE_DECELERATION,
});
animation.addEventListener("finish", onAnimationEnd);
animation.addEventListener("cancel", onAnimationEnd);
}
};
@ -162,13 +171,19 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
element: HTMLElement,
reserve?: boolean,
) => {
const easing = "cubic-bezier(0.4, 0, 0.2, 1)";
const easing = ANIM_CURVE_STD;
element.classList.add("animated");
const distance = Math.sqrt(
// distance_lt = (|top_start - top_end|^2 + |left_end - left_end|^2)^(-2)
const distancelt = Math.sqrt(
Math.pow(Math.abs(startRect.top - endRect.top), 2) +
Math.pow(Math.abs(startRect.left - startRect.top), 2),
Math.pow(Math.abs(startRect.left - endRect.left), 2),
);
const duration = (distance / MOVE_SPEED) * 1000;
const distancerb = Math.sqrt(
Math.pow(Math.abs(startRect.bottom - endRect.bottom), 2) +
Math.pow(Math.abs(startRect.right - endRect.right), 2),
);
const distance = distancelt + distancerb;
const duration = distance / 1.6;
animation = element.animate(
[
composeAnimationFrame(startRect, { transform: "none" }),