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 "./BottomSheet.css";
import { useHeroSignal } from "../platform/anim"; import { useHeroSignal } from "../platform/anim";
import material from "./material.module.css"; import material from "./material.module.css";
import { ANIM_CURVE_ACELERATION, ANIM_CURVE_DECELERATION } from "./theme"; import {
import { animateSlideInFromRight, animateSlideOutToRight } from "../platform/anim"; ANIM_CURVE_ACELERATION,
ANIM_CURVE_DECELERATION,
ANIM_CURVE_STD,
} from "./theme";
import {
animateSlideInFromRight,
animateSlideOutToRight,
} from "../platform/anim";
export type BottomSheetProps = { export type BottomSheetProps = {
open?: boolean; open?: boolean;
@ -90,10 +97,10 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
return; return;
} }
const onAnimationEnd = () => { const onAnimationEnd = () => {
element.classList.remove("animated") element.classList.remove("animated");
onClose() onClose();
} };
element.classList.add("animated") element.classList.add("animated");
animation = props.bottomUp animation = props.bottomUp
? animateSlideInFromBottom(element, true) ? animateSlideInFromBottom(element, true)
: animateSlideOutToRight(element, { easing: ANIM_CURVE_ACELERATION }); : animateSlideOutToRight(element, { easing: ANIM_CURVE_ACELERATION });
@ -116,13 +123,15 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
} else if (props.bottomUp) { } else if (props.bottomUp) {
animateSlideInFromBottom(element); animateSlideInFromBottom(element);
} else if (window.innerWidth <= 560) { } else if (window.innerWidth <= 560) {
element.classList.add("animated") element.classList.add("animated");
const onAnimationEnd = () => { const onAnimationEnd = () => {
element.classList.remove("animated") element.classList.remove("animated");
} };
animation = animateSlideInFromRight(element, { easing: ANIM_CURVE_DECELERATION }); animation = animateSlideInFromRight(element, {
animation.addEventListener("finish", onAnimationEnd) easing: ANIM_CURVE_DECELERATION,
animation.addEventListener("cancel", onAnimationEnd) });
animation.addEventListener("finish", onAnimationEnd);
animation.addEventListener("cancel", onAnimationEnd);
} }
}; };
@ -162,13 +171,19 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
element: HTMLElement, element: HTMLElement,
reserve?: boolean, reserve?: boolean,
) => { ) => {
const easing = "cubic-bezier(0.4, 0, 0.2, 1)"; const easing = ANIM_CURVE_STD;
element.classList.add("animated"); 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.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( animation = element.animate(
[ [
composeAnimationFrame(startRect, { transform: "none" }), composeAnimationFrame(startRect, { transform: "none" }),