feat: 修改动画跳动

src/app/[locale]/(doings)/rank/detail/history.tsx

@@ -109,7 +109,11 @@ const History = React.forwardRef<ModalProps, Props>(({ areaId, type }, ref) => {
                                     </div>
                                     <div className={clsx(styles.normalHeader, "mr-[.2rem]")}>
                                         <img
-                                            src={HeaderImageMap.get(item.avatar)?.img}
+                                            src={
+                                                HeaderImageMap.get(
+                                                    item.avatar > 6 ? 1 : item.avatar
+                                                )?.img
+                                            }
                                             alt=""
                                             className={styles.headerImage}
                                         />

src/app/[locale]/(doings)/rank/detail/middle.tsx

@@ -142,7 +142,11 @@ const MiddleContainer: React.FC<Props> = ({ data, rankList = [], gamesInfo }) =>
                                                     alt=""
                                                 />
                                                 <img
-                                                    src={HeaderImageMap.get(item.avatar)?.img}
+                                                    src={
+                                                        HeaderImageMap.get(
+                                                            item.avatar > 6 ? 1 : item.avatar
+                                                        )?.img
+                                                    }
                                                     alt=""
                                                     className={styles.userHeader}
                                                 />
@@ -218,7 +222,10 @@ const MiddleContainer: React.FC<Props> = ({ data, rankList = [], gamesInfo }) =>
                                 </div>
                                 <div className={clsx(styles.normalHeader, "mr-[.2rem]")}>
                                     <img
-                                        src={HeaderImageMap.get(item.avatar)?.img}
+                                        src={
+                                            HeaderImageMap.get(item.avatar > 6 ? 1 : item.avatar)
+                                                ?.img
+                                        }
                                         alt=""
                                         className={styles.headerImage}
                                     />
@@ -252,7 +259,13 @@ const MiddleContainer: React.FC<Props> = ({ data, rankList = [], gamesInfo }) =>
                             </div>
                             <div className={clsx(styles.normalHeader, "mr-[.2rem]")}>
                                 <img
-                                    src={HeaderImageMap.get(data?.self_rank?.avatar)?.img}
+                                    src={
+                                        HeaderImageMap.get(
+                                            data?.self_rank?.avatar > 6
+                                                ? 1
+                                                : data?.self_rank?.avatar
+                                        )?.img
+                                    }
                                     alt=""
                                     className={styles.headerImage}
                                 />

src/app/[locale]/(doings)/rank/detail/page.module.scss

@@ -22,7 +22,7 @@
         background: url("/rank/swiper_footer.webp");
         background-size: 100% 100%;
         background-repeat: no-repeat;
-        span {
+        .span {
             background-image: linear-gradient(to bottom, #f2d9ba, #e99438);
             background-clip: text;
             -webkit-background-clip: text;

src/app/[locale]/(doings)/rank/detail/swiper.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { RankItem, refreshRank } from "@/api/activity";
 import CutDown from "@/components/CutDown2";
+import NumberBox from "@/components/NumberBox";
 import { timeFormat } from "@/utils/methods";
 import clsx from "clsx";
 import React from "react";
@@ -117,7 +118,11 @@ const RankSwiper: React.FC<Props> = ({ data = [], onChange, areaId }) => {
                                     </div>
                                 </div>
                                 <div className={styles.swiperItemFooter}>
-                                    <span>R${item.total}</span>
+                                    <NumberBox
+                                        numClassName={styles.span}
+                                        prefix="R$"
+                                        value={item.total}
+                                    ></NumberBox>
                                 </div>
                             </div>
                         </SwiperSlide>

src/app/globals.scss

@@ -22,7 +22,6 @@
     --block-text-color: #a9b2bb;
     --block-text-desc-color: #5d7284;
 
-
     --primary-color: #11de68;
     --text-color: #fff;
 
@@ -50,8 +49,6 @@
     //--bg-color: #000000; // todo
     --adm-button-text-color: #fff;
     //--adm-color-primary: #fff;
-
-
 }
 
 * {
@@ -141,9 +138,9 @@ input {
     .adm-tabs-tab-wrapper {
         padding: 0 0.05rem;
     }
-  .adm-tabs-header{
-    border: none;
-  }
+    .adm-tabs-header {
+        border: none;
+    }
 }
 
 .containerMask {
@@ -268,3 +265,17 @@ input[type="number"] {
     .adm-dialog-footer {
     }
 }
+@keyframes NumberScorll {
+    25%,
+    75% {
+        transform: translateY(-100%);
+    }
+    25.1%,
+    75.1% {
+        transform: translateY(100%);
+    }
+    0%,
+    100% {
+        transform: translateY(0);
+    }
+}

src/components/NumberBox/index.module.scss

@@ -0,0 +1,8 @@
+.numberBox {
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    .number {
+        transform: translateY(0);
+    }
+}

src/components/NumberBox/index.tsx

@@ -0,0 +1,69 @@
+import clsx from "clsx";
+import React from "react";
+import styles from "./index.module.scss";
+
+interface Props {
+    value: number;
+    numClassName?: string;
+    prefix?: string;
+}
+
+const NumberBox: React.FC<Props> = ({ value, numClassName, prefix }) => {
+    const [innerValue, setInnerValue] = React.useState<string[]>([]);
+    const [prev, setPrev] = React.useState<string[]>([]);
+    const [changeIdxs, setChangeIdx] = React.useState<number[]>([]);
+
+    React.useEffect(() => {
+        const toValue = `${value.toFixed(2)}`.split("");
+        setInnerValue(toValue);
+    }, [value]);
+
+    React.useEffect(() => {
+        if (prev?.length) {
+            const toChange: number[] = [];
+            innerValue.forEach((item, idx) => {
+                if (innerValue.length === prev.length) {
+                    if (item !== prev[idx]) {
+                        toChange.push(idx);
+                    }
+                }
+                if (innerValue.length > prev.length) {
+                    const num = innerValue.length - prev.length;
+                    if (idx < num) return;
+                    if (item !== prev[idx - num]) {
+                        toChange.push(idx);
+                    }
+                }
+            });
+            setChangeIdx(toChange);
+            setTimeout(() => {
+                setChangeIdx([]);
+            }, 1000);
+        }
+        setPrev(innerValue);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [innerValue]);
+
+    return (
+        <div className={styles.numberBox}>
+            <div className={clsx(styles.number, numClassName)}>{prefix}</div>
+            {innerValue.map((item, idx) => {
+                return (
+                    <div
+                        key={idx}
+                        className={clsx(styles.number, numClassName)}
+                        style={{
+                            animation: changeIdxs.includes(idx)
+                                ? `NumberScorll 0.${Number(item) < 3 ? 3 : item}s ease-in-out`
+                                : "",
+                        }}
+                    >
+                        {item}
+                    </div>
+                );
+            })}
+        </div>
+    );
+};
+
+export default NumberBox;

src/enums/index.tsx

@@ -108,49 +108,31 @@ export const HeaderImageMap = new Map<number, Record<string, any>>([
     [
         2,
         {
-            img: "/user_header/h_1.webp",
+            img: "/user_header/h_2.webp",
         },
     ],
     [
         3,
         {
-            img: "/user_header/h_1.webp",
+            img: "/user_header/h_3.webp",
         },
     ],
     [
         4,
         {
-            img: "/user_header/h_1.webp",
+            img: "/user_header/h_4.webp",
         },
     ],
     [
         5,
         {
-            img: "/user_header/h_1.webp",
+            img: "/user_header/h_5.webp",
         },
     ],
     [
         6,
         {
-            img: "/user_header/h_1.webp",
-        },
-    ],
-    [
-        7,
-        {
-            img: "/user_header/h_1.webp",
-        },
-    ],
-    [
-        8,
-        {
-            img: "/user_header/h_1.webp",
-        },
-    ],
-    [
-        9,
-        {
-            img: "/user_header/h_1.webp",
+            img: "/user_header/h_6.webp",
         },
     ],
 ]);