diff --git a/src/components/Index.vue b/src/components/Index.vue index f1bebb1..dcf0d31 100644 --- a/src/components/Index.vue +++ b/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 + // }) } @@ -386,7 +391,7 @@ const animationFn = () => { repeat: -1, yoyo: true, ease: "bounce.out()", - + }) } }); @@ -446,9 +451,9 @@ const animationFn = () => { duration: 1, ease: "back.inOut(3)", onComplete: () => { - debounce.value = false + debounce.value = false - } + } }) @@ -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 { diff --git a/src/page/Home/main.js b/src/page/Home/main.js index bc46f0b..36e2404 100644 --- a/src/page/Home/main.js +++ b/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')