chore: improve animation performace

forbole · Nov 16, 2023 · 7d58ea2 · 7d58ea2
1 parent c56ec19
commit 7d58ea2
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 69 deletions.
diff --git a/src/components/scroll_logo/Card.tsx b/src/components/scroll_logo/Card.tsx
@@ -6,11 +6,13 @@ import "swiper/swiper.min.css";
 
 SwiperCore.use([Autoplay]);
 type Props = {
+  imageSize?: number;
   networkData: { image: string; name: string }[];
   sx?: SxProps<Theme> | undefined;
 };
-const Card = ({ networkData, sx }: Props) => {
+const Card = ({ networkData, sx, imageSize }: Props) => {
   const theme = useTheme();
+
   return (
     <Box display="flex" maxWidth="max-content" sx={sx}>
       {networkData.map((item: any, index) => (
@@ -46,9 +48,8 @@ const Card = ({ networkData, sx }: Props) => {
             {item.image && (
               <Image
                 alt=""
-                layout="fill"
-                objectFit="contain"
                 src={item.image}
+                {...(imageSize && { width: imageSize, height: imageSize })}
               />
             )}
           </Box>

diff --git a/src/components/scroll_logo/index.tsx b/src/components/scroll_logo/index.tsx
@@ -1,22 +1,23 @@
 import { Box, Container, useMediaQuery, useTheme } from "@mui/material";
-import dynamic from "next/dynamic";
 import { useMemo } from "react";
 
+import { NoSSR } from "@components/no-ssr";
 import { allNetworkKeys, getNetworkInfo } from "@utils/network_info";
 
-import { TransitionCSS } from "./style";
+import Card from "./Card";
+import classes from "./scroll_logo.module.css";
+
+function splitArray(array: any[], length: number) {
+  const result = [];
+  for (let i = 0; i < array.length; i += length) {
+    result.push(array.slice(i, i + length));
+  }
+  return result;
+}
 
-const Card = dynamic(() => import("./Card"), { ssr: false });
 const ScrollLogo = () => {
   const theme = useTheme();
-  // 分割数组
-  function splitArray(array: any[], length: number) {
-    const result = [];
-    for (let i = 0; i < array.length; i += length) {
-      result.push(array.slice(i, i + length));
-    }
-    return result;
-  }
+
   const allNetworkData = allNetworkKeys.map((x: string | number) =>
     getNetworkInfo(x),
   );
@@ -52,23 +53,23 @@ const ScrollLogo = () => {
           py: "10px",
         }}
       >
-        <Box position="relative" width="max-content">
-          {data.map((networkData, index) => (
-            <TransitionCSS
-              key={index}
-              style={{
-                animation:
-                  "35s linear 0s infinite alternate none running jss634",
-                animationName:
-                  index === 1
-                    ? " horizontalRightMove"
-                    : `horizontalMove${index}`,
-              }}
-            >
-              <Card networkData={networkData.concat(networkData)} />
-            </TransitionCSS>
-          ))}
-        </Box>
+        <NoSSR>
+          <Box position="relative" width="max-content">
+            {data.map((networkData, index) => (
+              <div
+                key={index}
+                className={[classes.animatedRow, classes[`left${index}`]].join(
+                  " ",
+                )}
+              >
+                <Card
+                  imageSize={30}
+                  networkData={networkData.concat(networkData)}
+                />
+              </div>
+            ))}
+          </Box>
+        </NoSSR>
       </Box>
     </Container>
   );

diff --git a/src/components/scroll_logo/scroll_logo.module.css b/src/components/scroll_logo/scroll_logo.module.css
@@ -0,0 +1,59 @@
+@keyframes horizontalMove0 {
+  0% {
+    transform: translateX(-10vw);
+  }
+  100% {
+    transform: translateX(calc(-100% + 100vw));
+  }
+}
+@keyframes horizontalMove1 {
+  0% {
+    transform: translateX(calc(-100% + 200vw));
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+@keyframes horizontalMove2 {
+  0% {
+    transform: translateX(-10vw);
+  }
+  100% {
+    transform: translateX(calc(-100% + 100vw));
+  }
+}
+@keyframes horizontalMove3 {
+  0% {
+    transform: translateX(calc(-100% + 200vw));
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+.animatedRow {
+  animation-delay: 0s;
+  animation-direction: alternate;
+  animation-duration: 200s;
+  animation-fill-mode: none;
+  animation-iteration-count: infinite;
+  animation-play-state: running;
+  animation-timing-function: linear;
+}
+
+.left0 {
+  animation-name: horizontalMove0;
+}
+.left1 {
+  animation-name: horizontalMove1;
+}
+.left2 {
+  animation-name: horizontalMove2;
+}
+.left3 {
+  animation-name: horizontalMove3;
+}
+
+.animatedRow:hover {
+  animation-play-state: paused;
+}
diff --git a/src/components/scroll_logo/style.ts b/src/components/scroll_logo/style.ts
diff --git a/src/components/section/index.tsx b/src/components/section/index.tsx
@@ -6,11 +6,11 @@ const Trans = dynamic(async () => import("next-translate/Trans"), {
 });
 
 type Props = {
+  desc?: string;
   maxWidth?: string;
   title?: string;
   title_large?: string;
   title_large_trans?: string;
-  desc?: string;
 };
 
 // Rename the component so the i18next parser doesn't try to parse it

diff --git a/src/screens/Infrastructure/index.tsx b/src/screens/Infrastructure/index.tsx
@@ -11,6 +11,7 @@ import { useRouter } from "next/router";
 import type { SyntheticEvent } from "react";
 import { useMemo, useRef, useState } from "react";
 
+import { NoSSR } from "@components/no-ssr";
 import { Layout, ScrollToTop } from "@src/components";
 import Carousel from "@src/components/Carousel";
 import IntroPanel from "@src/components/Intro_panel";
@@ -318,7 +319,9 @@ const Infrastructure = () => {
           </CtaButton>
         </Stack>
         <Stack>
-          <Carousel personList={personList} />
+          <NoSSR>
+            <Carousel personList={personList} />
+          </NoSSR>
         </Stack>
         <ScrollToTop topRef={topRef} />
       </Container>