From 8a435be4c8e675b12fe0dcafcbecb811f86eb94e Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Sun, 3 Nov 2024 18:39:09 +0800
Subject: [PATCH] BottomSheet: adjust hero animation

---
 src/material/BottomSheet.tsx | 47 ++++++++++++++++++++++++------------
 1 file changed, 31 insertions(+), 16 deletions(-)

diff --git a/src/material/BottomSheet.tsx b/src/material/BottomSheet.tsx
index 1258c81..2ebed75 100644
--- a/src/material/BottomSheet.tsx
+++ b/src/material/BottomSheet.tsx
@@ -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" }),