Merge pull request #10 from mowtwo/master

添加dock动画
CrazyBoyM · Jan 26, 2022 · 4fd3ce8 · 4fd3ce8 · vercel · Jan 26, 2022
2 parents a2140e1 + c51b6eb
commit 4fd3ce8
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 3 deletions.
diff --git a/src/component/AppList/index/index.css b/src/component/AppList/index/index.css
@@ -41,7 +41,7 @@
 .AppList-app {
   margin: 13px 0;
   width: 60px;
-  transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.3s;
+  transition: all 0.3s ease-out;
   cursor: pointer;
 }
 .AppList-app > img,

diff --git a/src/component/AppList/index/index.tsx b/src/component/AppList/index/index.tsx
@@ -8,7 +8,13 @@ import errorImg from "/assets/icon/error.png";
 import { openWindow } from "../Window";
 import { useLocalStorageState } from "@/hooks/useLocalStorageState";
 import { defaultUserAppList, UserApp } from "@/store/app";
-import { ReactEventHandler, SyntheticEvent } from "react";
+import {
+  ReactEventHandler,
+  SyntheticEvent,
+  useCallback,
+  useEffect,
+  useRef,
+} from "react";
 
 export const AppList = () => {
   // const [preAppList, setPreAppList] = useState([])
@@ -28,12 +34,92 @@ export const AppList = () => {
       window.open(appData.link);
     }
   };
+  const appListAppRef = useRef<Array<HTMLElement | null>>([]);
+  const getAppListApp = useCallback(
+    (el: HTMLElement | null) => {
+      appListAppRef.current?.push(el);
+    },
+    [userAppList]
+  );
+
+  const appMounseEnter = useCallback(
+    (e: SyntheticEvent<HTMLElement, MouseEvent>) => {
+      const index = appListAppRef.current.indexOf(e.currentTarget);
+      if (index >= 0) {
+        const target = appListAppRef.current[index];
+        const prev = appListAppRef.current[index - 1];
+        const next = appListAppRef.current[index + 1];
+        target!.style.transform = "scale(1.6)";
+        const scalePre = 0.6;
+        const rect = target?.getBoundingClientRect();
+        const offet =
+          Math.abs(e.nativeEvent.clientX - rect!.left) / rect!.width;
+        if (prev) {
+          prev!.style.transform = `scale(${
+            1 + scalePre * Math.abs(offet - 1)
+          }) `;
+        }
+        if (next) {
+          next!.style.transform = `scale(${1 + scalePre * offet})`;
+        }
+      }
+    },
+    [userAppList]
+  );
+  const appMounseMove = useCallback(
+    (e: SyntheticEvent<HTMLElement, MouseEvent>) => {
+      const index = appListAppRef.current.indexOf(e.currentTarget);
+      if (index >= 0) {
+        const target = appListAppRef.current[index];
+        const prev = appListAppRef.current[index - 1];
+        const next = appListAppRef.current[index + 1];
+        const scalePre = 0.6;
+        const rect = target?.getBoundingClientRect();
+        const offet =
+          Math.abs(e.nativeEvent.clientX - rect!.left) / rect!.width;
+        if (prev) {
+          prev!.style.transform = `scale(${
+            1 + scalePre * Math.abs(offet - 1)
+          }) `;
+        }
+        if (next) {
+          next!.style.transform = `scale(${1 + scalePre * offet})`;
+        }
+      }
+    },
+    [userAppList]
+  );
+  const appMounseLeave = useCallback(
+    (e: SyntheticEvent<HTMLElement, MouseEvent>) => {
+      const index = appListAppRef.current.indexOf(e.currentTarget);
+      if (index >= 0) {
+        const target = appListAppRef.current[index];
+        const prev = appListAppRef.current[index - 1];
+        const next = appListAppRef.current[index + 1];
+        target!.style.transform = "scale(1)";
+        if (prev) {
+          prev!.style.transform = "scale(1)";
+        }
+        if (next) {
+          next!.style.transform = "scale(1)";
+        }
+      }
+    },
+    [userAppList]
+  );
 
   return (
     <>
       <div id="App-window"></div>
       <section className="AppList-bottom">
-        <div className="AppList-app center" onClick={() => {}}>
+        <div
+          className="AppList-app center"
+          onClick={() => {}}
+          ref={getAppListApp}
+          onMouseEnter={appMounseEnter}
+          onMouseLeave={appMounseLeave}
+          onMouseMove={appMounseMove}
+        >
           <SettingOne
             theme="outline"
             size="30"
@@ -51,6 +137,10 @@ export const AppList = () => {
                 e.preventDefault();
                 editApp(appData, appIndex, userAppList, setUserAppList);
               }}
+              ref={getAppListApp}
+              onMouseEnter={appMounseEnter}
+              onMouseLeave={appMounseLeave}
+              onMouseMove={appMounseMove}
             >
               <img
                 className="AppList-app-logo"
@@ -63,6 +153,10 @@ export const AppList = () => {
         <div
           className="AppList-app center"
           onClick={() => addApp(userAppList, setUserAppList)}
+          ref={getAppListApp}
+          onMouseEnter={appMounseEnter}
+          onMouseLeave={appMounseLeave}
+          onMouseMove={appMounseMove}
         >
           <AddOne theme="outline" size="30" fill="slateblue" strokeWidth={3} />
         </div>