update dot animate

layouts/blog_main/list.html

@@ -1327,82 +1327,167 @@
     let windowWidth = $(window).width();
     let x = windowWidth / 2.4;
     let y = domHeight * (110 / 693.38);
+    let callState = true;
     const dotDom = document.querySelector(".dot_mb");
 
     function dotAnimate(x, y) {
-      const dotPosition = [
-        {
-          transform: 'translate(0, 5px)'
-        },
-        {
-          transform: `translate(${x}px, 5px)`
-        },
-        , {
-          transform: `translate(${x}px, ${y}px)`
+      callState = true;
+      const keyFrames = document.createElement("style");
+      const dotKeyFrames = `
+        @keyframes dot_mb {
+          0% {
+            transform: 'translate(0, 5px)';
+          }
+          10% {
+            transform: translate(${x}px, 5px);
+          }
+          15% {
+            transform: translate(${x}px, ${y}px);
+          }
+          25% {
+            transform: translate(-13px, ${y}px);
+          }
+          30% {
+            transform: translate(-13px, ${y * 1.727}px);
+          }
+          40% {
+            transform: translate(${x}px, ${y * 1.727}px);
+          }
+          45% {
+            transform: translate(${x}px,  ${y * 2.68}px);
+          }
+          55% {
+            transform: translate(-13px, ${y * 2.68}px);
+          }
+          60% {
+            transform: translate(-13px, ${y * 3.4}px);
+          }
+          70% {
+            transform: translate(${x}px, ${y * 3.4}px);
+          }
+          75% {
+            transform: translate(${x}px, ${y * 4.35}px);
+          }
+          85% {
+            transform: translate(-13px, ${y * 4.35}px);
+          }
+          90% {
+            transform: translate(-13px, ${y * 5.08}px);
+          }
+          100% {
+            transform: translate(${x}px, ${y * 5.08}px);
+          }
         }
-        , {
-          transform: `translate(-13px, ${y}px)`
-        }
-        , {
-          // (110 + 80) / 110
-          transform: `translate(-13px, ${y * 1.727}px)`
-        }
-        , {
-          transform: `translate(${x}px,  ${y * 1.727}px)`
-        }
-        , {
-          // (190 + 110) / 110
-          transform: `translate(${x}px,  ${y * 2.68}px)`
-        }
-        , {
-          transform: `translate(-13px, ${y * 2.68}px)`
-        }
-        , {
-          // (275 + 110) / 110
-          transform: `translate(-13px, ${y * 3.4}px)`
-        }
-        , {
-          transform: `translate(${x}px, ${y * 3.4}px)`
-        }
-        , {
-          // (380 + 110) / 110
-          transform: `translate(${x}px, ${y * 4.35}px)`
-        }
-        , {
-          transform: `translate(-13px, ${y * 4.35}px)`
-        }
-        , {
-          // (550 + 110) / 110
-          transform: `translate(-13px, ${y * 5.08}px)`
-        }
-        , {
-          transform: `translate(${x}px, ${y * 5.08}px)`
-        }
-      ];
 
-      // 動畫時間
-      const dotTiming = {
-        duration: 8000,
-        iterations: Infinity
+          .dot_mb::before {
+            animation: dot_mb 8s infinite;
+          }
+        `;
+
+      keyFrames.innerHTML = dotKeyFrames;
+
+      let oldStyle = document.querySelector('style');
+
+      // 如已有 style 則直接覆蓋
+      if (!oldStyle) {
+        dotDom.appendChild(keyFrames);
+      } else {
+        dotDom.replaceChild(keyFrames, oldStyle);
       }
-      dotDom.animate(dotPosition, dotTiming);
+
+      /* 以下 animate() 方法 iOS 不支援 */
+      // const dotPosition = [
+      //   {
+      //     transform: 'translate(0, 5px)'
+      //   },
+      //   {
+      //     transform: `translate(${x}px, 5px)`
+      //   },
+      //   , {
+      //     transform: `translate(${x}px, ${y}px)`
+      //   }
+      //   , {
+      //     transform: `translate(-13px, ${y}px)`
+      //   }
+      //   , {
+      //     // (110 + 80) / 110
+      //     transform: `translate(-13px, ${y * 1.727}px)`
+      //   }
+      //   , {
+      //     transform: `translate(${x}px,  ${y * 1.727}px)`
+      //   }
+      //   , {
+      //     // (190 + 110) / 110
+      //     transform: `translate(${x}px,  ${y * 2.68}px)`
+      //   }
+      //   , {
+      //     transform: `translate(-13px, ${y * 2.68}px)`
+      //   }
+      //   , {
+      //     // (275 + 110) / 110
+      //     transform: `translate(-13px, ${y * 3.4}px)`
+      //   }
+      //   , {
+      //     transform: `translate(${x}px, ${y * 3.4}px)`
+      //   }
+      //   , {
+      //     // (380 + 110) / 110
+      //     transform: `translate(${x}px, ${y * 4.35}px)`
+      //   }
+      //   , {
+      //     transform: `translate(-13px, ${y * 4.35}px)`
+      //   }
+      //   , {
+      //     // (550 + 110) / 110
+      //     transform: `translate(-13px, ${y * 5.08}px)`
+      //   }
+      //   , {
+      //     transform: `translate(${x}px, ${y * 5.08}px)`
+      //   }
+      // ];
+
+      // // 動畫時間
+      // const dotTiming = {
+      //   duration: 8000,
+      //   iterations: Infinity
+      // }
+
+      // dotDom.animate(dotPosition, dotTiming);
     }
 
-    // 於手機尺寸出現動畫
+    // 於手機尺寸開始動畫
     if ($(window).width() < 576) {
       dotAnimate(x, y);
     }
 
-    addEventListener('resize', (event) => {
-      if ($(window).width() < 576) {
-        x = $(window).width() / 2.4;
-        y = domHeight * (110 / 693.38);
-        // 縮放畫面時重新取得x、y軸
-        setTimeout(() => {
-          dotAnimate(x, y);
-        }, 1000);
-      }
-    });
+    if (callState) {
+      addEventListener('resize', (event) => {
+        console.log('call');
+        if ($(window).width() < 576 && callState) {
+           // 避免重複 call function
+          callState = false;
+
+            const stopStyle = document.createElement("style");
+            // 尺寸改變後動畫重新開始
+            const stopKeyFrames = `
+                .dot_mb::before {
+                  animation: none;
+                }
+             `;
+             stopStyle.innerHTML = stopKeyFrames;
+             let oldStyle = document.querySelector('style');
+    
+        dotDom.replaceChild(stopStyle, oldStyle);
+      
+          setTimeout(() => {
+            // 縮放畫面時重新取得x、y軸
+            const x1 = $(window).width() / 2.4;
+            const y1 = $('.process_mb').height() * (110 / 693.38);
+            dotAnimate(x1, y1);
+          }, 1000);
+        }
+      });
+    }
   </script>
 </body>
 

themes/hugo-universal-theme-master/static/css/style.bhouse.css

@@ -3686,19 +3686,19 @@ input[type=search]::-webkit-search-cancel-button {
   z-index: 15;
   top: 34px;
   left: 0;
+}
+.blog-main .process .dot::before {
   -webkit-animation: dot 8s infinite;
           animation: dot 8s infinite;
 }
 @media (max-width: 892px) {
-  .blog-main .process .dot::before,
-.blog-main .process .dot_mb::before {
+  .blog-main .process .dot::before {
     -webkit-animation: none;
             animation: none;
   }
 }
 @media (width: 768px) {
-  .blog-main .process .dot::before,
-.blog-main .process .dot_mb::before {
+  .blog-main .process .dot::before {
     -webkit-animation: dot_768px 8s infinite;
             animation: dot_768px 8s infinite;
   }

themes/hugo-universal-theme-master/static/css/style.bhouse.scss

@@ -3575,6 +3575,8 @@ input[type="search"]::-webkit-search-cancel-button {
       z-index: 15;
       top: 34px;
       left: 0;
+    }
+    .dot::before {
       animation: dot 8s infinite;
       @media (max-width: 892px) {
         animation: none;
@@ -3583,6 +3585,11 @@ input[type="search"]::-webkit-search-cancel-button {
         animation: dot_768px 8s infinite;
       }
     }
+    // .dot_mb::before {
+    //   @media (width: 576px) {
+    //     animation: dot_mb 8s infinite;
+    //   }
+    // }
     section {
       margin-right: 80px;
       @media (max-width: 767px) {