差替换视频

src/components/Index.vue

@@ -219,6 +219,9 @@ const convertCoordinates = (point) => {
   const svg = document.querySelector('.path-svg')
   const pt = svg.createSVGPoint()
 
+
+  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent)
+
   // 添加1px偏移修复iOS精度问题
   pt.x = point.x + 1
   pt.y = point.y + 1
@@ -239,13 +242,14 @@ const initSvgAnimation = async () => {
   const path = document.querySelector('#motionPath')
 
   // 关键：设置SVG的preserveAspectRatio
-  svg.setAttribute('preserveAspectRatio', 'none')
+  svg.setAttribute('preserveAspectRatio', 'xMidYMid meet')
 
   animation = gsap.to(xflIconRef.value, {
     motionPath: {
       path: "#motionPath",
       align: "#motionPath",
       autoRotate: false,
+      alignOrigin: [0.5, 0.5], // 中心点对齐
       type: "uniform", // 均匀分布路径点
       curviness: 0,
       // 新增坐标转换
@@ -264,19 +268,20 @@ const initSvgAnimation = async () => {
   })
 
   // 等待2帧确保渲染完成
-  await new Promise(resolve => requestAnimationFrame(resolve))
-  await new Promise(resolve => requestAnimationFrame(resolve))
+  // await new Promise(resolve => requestAnimationFrame(resolve))
+  // await new Promise(resolve => requestAnimationFrame(resolve))
 
   // 强制重排
 
-  void path.offsetHeight
+  // void path.offsetHeight
 
   // 初始定位优化
-  gsap.set(xflIconRef.value, {
-    x: convertCoordinates(path.getPointAtLength(0)).x,
-    y: convertCoordinates(path.getPointAtLength(0)).y,
-    force3D: true
-  })
+  // gsap.set(xflIconRef.value, {
+  //   x: convertCoordinates(path.getPointAtLength(0)).x,
+  //   y: convertCoordinates(path.getPointAtLength(0)).y,
+  //   scale: 1.5,
+  //   force3D: true
+  // })
 
 
 }
@@ -692,16 +697,12 @@ const animationFn = () => {
     position: absolute;
     width: 163px;
     height: 153px;
-    // 以中心放大1.5倍
-
-    will-change: transform;
-    transform: translateZ(0) translate(-50%, -50%) scale(1.5);
+    transform:  scale(1.5);
     visibility: hidden;
 
     /* 旧iOS需要绝对像素值 */
     @media screen and (-webkit-min-device-pixel-ratio:0) {
-      will-change: transform;
-      transform: translateZ(0) translate(-50%, -50%) scale(1.5);
+      transform:   scale(1.5);
     }
 
     #frameBox {

src/page/Home/main.js

@@ -2,7 +2,7 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import { wxShare } from '@/plugins/wxshare';
 // import {isMobile} from '@/plugins'
-// import VConsole from 'vconsole';
+import VConsole from 'vconsole';
 import 'vant/lib/index.css';
 
 
@@ -15,11 +15,11 @@ wxShare({
     title: '兴福龙 护航记',
     desc: '趣味地图大探索，消保守护每一程',
 })
-
+const vConsole = new VConsole();
 
 // 测试环境开vconsole
 // if (isMobile()) {
-//     // const vConsole = new VConsole();
+    // const vConsole = new VConsole();
 // }
 
 app.mount('#app')