fix-帧动画抖动问题

code/src/assets/styles/base.css

@@ -185,14 +185,15 @@ textarea {
 }
 #root #AppM .AppMtab {
   position: absolute;
-  bottom: 30px;
+  bottom: 0px;
   width: 100%;
   height: auto;
   z-index: 32;
   left: 0;
-  padding: 0 10px;
+  padding: 0px 10px 20px;
   display: flex;
   justify-content: space-around;
+  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
 }
 #root #AppM .AppMtab .AppMtabRow {
   padding: 0 10px;

code/src/assets/styles/base.less

@@ -225,14 +225,16 @@ textarea {
 
     .AppMtab {
       position: absolute;
-      bottom: 30px;
+      bottom: 0px;
       width: 100%;
       height: auto;
       z-index: 32;
       left: 0;
-      padding: 0 10px;
+      padding: 0px 10px 20px;
       display: flex;
       justify-content: space-around;
+      background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .4));
+
 
       .AppMtabRow {
         padding: 0 10px;

code/src/pages/B1Village/index.module.scss

@@ -73,7 +73,6 @@
           }
 
           .B1infoFloo {
-            cursor: pointer;
             position: absolute;
             z-index: 10;
             bottom: 30px;
@@ -246,24 +245,25 @@
           .B1imgMove {
             position: absolute;
             bottom: 248px;
-            left: 16%;
+            left: 40%;
+            transform: translateX(-50%);
             z-index: 10;
-            width: 50%;
-            // height: auto;
+            width: auto;
             height: calc(100% - 370px);
             overflow: hidden;
-            // overflow-y: visible;
 
             .B1imgMoveMain {
-              pointer-events: none;
+              max-width: 10000%;
+              height: 100%;
+              object-fit: fill;
               position: absolute;
-              top: 50%;
-              transform: translateY(-50%);
+              top: 0;
               left: 0;
-              // max-height: 10000px;
-              object-fit: fill;
-              // height: 100%;
+              &:hover{
+                animation-play-state: paused;
+              }
             }
+   
           }
 
         }

code/src/pages/B1Village/index.tsx

@@ -48,6 +48,10 @@ function B1Village() {
   // 详情 索引
   const [infoInd, setInfoInd] = useState(-1);
 
+  // 序列帧dom
+  const moveWai = useRef<HTMLDivElement>(null);
+  const moveIn = useRef<HTMLImageElement>(null);
+
   // 每次索引变化的时候 动态加载 序列帧样式
   const setFullFu = useCallback(() => {
     // 看看是否已经插入的 script
@@ -58,22 +62,37 @@ function B1Village() {
     time.current = window.setTimeout(() => {
       if (infoInd === -1) return;
 
-      const num = curVillage[infoInd].zhen;
-      // 获取序列帧 外层 盒子的 宽度
-      const dom = document.querySelector(".B1imgMove") as HTMLDivElement;
-      if (dom) {
-        const width = dom.getBoundingClientRect().width;
-        const leftNum = "-" + width * num + "px";
+      if (moveIn.current && moveWai.current) {
+        // 配置的数据 帧数
+        const zhenNum = curVillage[infoInd].zhen;
+
+        // 配置的数据 帧动画的速度
+        const zhenSuDu = curVillage[infoInd].zhenSuDu;
+
+        // 图片的总宽度(自适应的宽度)
+        moveIn.current.style.width = "auto";
+        const imgWidth = moveIn.current.clientWidth;
+
+        // 设置外层盒子的宽度(取整)
+        const waiWdith = Math.round(imgWidth / zhenNum);
+        moveWai.current.style.width = waiWdith + "px";
+
+        // 重新设置图片的宽度（整数）
+        const lastInWdith = waiWdith * zhenNum;
+        moveIn.current.style.width = lastInWdith + "px";
+
+        // console.log(imgWidth, imgWidth / num);
+
         const styleStr = `.B1infoRowAc .B1imgMoveMain {
-             animation: tab2MoveImg 2.4s steps(${num}) infinite;
-           }
-           @keyframes tab2MoveImg {
-           
-             100% {
-               left: ${leftNum};
+               animation: tab2MoveImg ${(zhenNum / zhenSuDu).toFixed(
+                 1
+               )}s steps(${zhenNum}) infinite;
              }
-           }`;
-
+             @keyframes tab2MoveImg {
+               100% {
+                 left: -${lastInWdith}px;
+               }
+             }`;
         const styletDom = document.createElement("style");
         styletDom.type = "text/css";
         styletDom.id = "myStyle";
@@ -200,13 +219,14 @@ function B1Village() {
                 ))}
               </div>
               {/* 图片的序列帧 */}
-              <div className="B1imgMove">
+              <div className="B1imgMove" ref={infoInd === i ? moveWai : null}>
                 {uId ? (
                   <img
+                    ref={infoInd === i ? moveIn : null}
                     className={classNames("B1imgMoveMain")}
                     style={{
-                      width: v.zhen * 100 + "%",
-                      maxWidth: v.zhen * 100 + "%",
+                      // width: v.zhen * 100 + "%",
+                      maxWidth: "100000000px",
                     }}
                     src={`${baseUrl}/B1Village/pc/${uId}/move${v.id}.png`}
                     alt=""

code/src/pages/B1VillageM/index.module.scss

@@ -40,13 +40,16 @@
         }
 
         .B1imgMove {
-          width: 100%;
+          width: auto;
+          margin: 0 auto;
           height: 50%;
           position: relative;
           overflow: hidden;
 
           // 图片的序列帧
           .B1imgMoveMain {
+            max-width: 10000%;
+            height: 100%;
             pointer-events: none;
             position: absolute;
             top: 0;
@@ -59,7 +62,7 @@
         // 左右箭头
         .B1infoAr {
           position: absolute;
-          top: 50%;
+          top: 25%;
           left: 4px;
           width: 30px;
           height: 30px;

code/src/pages/B1VillageM/index.tsx

@@ -50,32 +50,50 @@ function B1VillageM() {
   // 详情 索引
   const [infoInd, setInfoInd] = useState(-1);
 
+  // 序列帧dom
+  const moveWai = useRef<HTMLDivElement>(null);
+  const moveIn = useRef<HTMLImageElement>(null);
+
   // 每次索引变化的时候 动态加载 序列帧样式
   const setFullFu = useCallback(() => {
     // 看看是否已经插入的 script
     const ruDom = document.querySelector("#myStyle");
     if (ruDom) ruDom.remove();
-
     clearTimeout(time.current);
     time.current = window.setTimeout(() => {
       if (infoInd === -1) return;
 
-      const num = curVillage[infoInd].zhen;
-      // 获取序列帧 外层 盒子的 宽度
-      const dom = document.querySelector(".B1imgMove") as HTMLDivElement;
-      if (dom) {
-        const width = dom.getBoundingClientRect().width;
-        const leftNum = "-" + width * num + "px";
+      if (moveIn.current && moveWai.current) {
+        // 配置的数据 帧数
+        const zhenNum = curVillage[infoInd].zhen;
+
+        // 配置的数据 帧动画的速度
+        const zhenSuDu = curVillage[infoInd].zhenSuDu;
+
+        // 图片的总宽度(自适应的宽度)
+        moveIn.current.style.width = "auto";
+        const imgWidth = moveIn.current.clientWidth;
+
+        // 设置外层盒子的宽度(取整)
+        const waiWdith = Math.round(imgWidth / zhenNum);
+        moveWai.current.style.width = waiWdith + "px";
+
+        // 重新设置图片的宽度（整数）
+        const lastInWdith = waiWdith * zhenNum;
+        moveIn.current.style.width = lastInWdith + "px";
+
+        // console.log(imgWidth, imgWidth / num);
+
         const styleStr = `.B1VinfoAc .B1imgMoveMain {
-               animation: tab2MoveImg 2.4s steps(${num}) infinite;
+               animation: tab2MoveImg ${(zhenNum / zhenSuDu).toFixed(
+                 1
+               )}s steps(${zhenNum}) infinite;
              }
              @keyframes tab2MoveImg {
-             
                100% {
-                 left: ${leftNum};
+                 left: -${lastInWdith}px;
                }
              }`;
-
         const styletDom = document.createElement("style");
         styletDom.type = "text/css";
         styletDom.id = "myStyle";
@@ -143,38 +161,36 @@ function B1VillageM() {
               </div>
             ) : null}
             {/* 上面的 序列帧 和 左右箭头 */}
-            <div className="B1imgMove">
+            <div className="B1imgMove" ref={infoInd === i ? moveWai : null}>
               {/* 图片的序列帧 */}
               {uId ? (
                 <img
+                  ref={infoInd === i ? moveIn : null}
                   className={classNames("B1imgMoveMain")}
-                  style={{
-                    width: v.zhen * 100 + "%",
-                    maxWidth: v.zhen * 100 + "%",
-                  }}
                   src={`${baseUrl}/B1Village/pc/${uId}/move${v.id}.png`}
                   alt=""
                 />
               ) : null}
-
-              {/* 左右箭头 */}
-              <div
-                onClick={() => setInfoInd(infoInd - 1)}
-                className={classNames(
-                  "B1infoAr B1infoAr1",
-                  infoInd === 0 ? "B1infoArNone" : ""
-                )}
-                hidden={curVillage.length <= 1}
-              ></div>
-              <div
-                onClick={() => setInfoInd(infoInd + 1)}
-                className={classNames(
-                  "B1infoAr B1infoAr2",
-                  infoInd >= curVillage.length - 1 ? "B1infoArNone" : ""
-                )}
-                hidden={curVillage.length <= 1}
-              ></div>
             </div>
+
+            {/* 左右箭头 */}
+            <div
+              onClick={() => setInfoInd(infoInd - 1)}
+              className={classNames(
+                "B1infoAr B1infoAr1",
+                infoInd === 0 ? "B1infoArNone" : ""
+              )}
+              hidden={curVillage.length <= 1}
+            ></div>
+            <div
+              onClick={() => setInfoInd(infoInd + 1)}
+              className={classNames(
+                "B1infoAr B1infoAr2",
+                infoInd >= curVillage.length - 1 ? "B1infoArNone" : ""
+              )}
+              hidden={curVillage.length <= 1}
+            ></div>
+
             {/* 下面的信息 */}
             <div className="B1infoTxt">
               {/* 场景和构件的选择 */}

code/src/pages/C1ArchitecM/index.module.scss

@@ -1,7 +1,6 @@
 .C1ArchitecM {
-  background-size: 100% 100%;
   position: relative;
-
+  background-size: 100% 100%;
   :global {
     .C1Aguang {
       z-index: 20;
@@ -90,7 +89,6 @@
       bottom: 16%;
       height: calc(76% - 80px);
       width: 100%;
-      z-index: 40;
 
       .mySwiper {
         width: 100%;

code/src/types/api/layot.d.ts

@@ -64,6 +64,7 @@ export type Tab2InfoType = {
   txt: string;
   architecId: string;
   zhen: number;
+  zhenSuDu:number
   buildArr: { id: string; name: string }[];
 };
 

静态资源/staticData/dataTemp.js

@@ -102,6 +102,8 @@ const staticDataTemp = {
           architecId: '3_1',
           // 帧动画的帧数
           zhen: 53,
+          // 帧动画的速度
+          zhenSuDu: 22,
           buildArr: [
             // 是否有场景，有的话，第一个填写场景,id为场景码,name为室内场景
             { id: '1194', name: '室内场景' },
@@ -123,6 +125,8 @@ const staticDataTemp = {
           architecId: '3_2',
           // 帧动画的帧数
           zhen: 53,
+          // 帧动画的速度
+          zhenSuDu: 40,
           buildArr: [
             // 是否有场景，有的话，第一个填写场景,id为场景码,name为室内场景
             { id: '1194', name: '室内场景' },
@@ -143,6 +147,8 @@ const staticDataTemp = {
           architecId: '3_3',
           // 帧动画的帧数
           zhen: 53,
+          // 帧动画的速度
+          zhenSuDu: 22,
           buildArr: [
             // 是否有场景，有的话，第一个填写场景,id为场景码,name为室内场景
             { id: '1194', name: '室内场景' },