diff --git a/src/components/Index.vue b/src/components/Index.vue index c34667f..9a50685 100644 --- a/src/components/Index.vue +++ b/src/components/Index.vue @@ -85,7 +85,7 @@ console.log('isLegacyiOS', isLegacyiOS); // 路线节点 -const progressArr = [0, 38, 48, 67, 100,] +const progressArr = [0, 25, 45, 85, 100,] const playerRef = ref(null) const imageFramePlayer = ref(null) @@ -157,8 +157,8 @@ const playFn = (index) => { } if (locationId.value !== index) { // 计算相差多少步 - // 取正数 const setpNum = Math.abs(index - locationId.value) + const direction = index - locationId.value > 0 ? 1 : -1 console.log('setpNum', setpNum); locationId.value = index; @@ -171,7 +171,7 @@ const playFn = (index) => { } ] }; - handleMove(progressArr[index - 1], setpNum) + handleMove(progressArr[index - 1], setpNum, direction) } else { locationId.value = index playerRef.value.source = { @@ -237,14 +237,21 @@ const initSvgAnimation = () => { path: "#motionPath", align: "#motionPath", autoRotate: false, + type: "uniform", // 均匀分布路径点 + curviness: 0, // 新增坐标转换 from: convertCoordinates({ x: 0, y: 0 }), to: convertCoordinates({ x: 1, y: 1 }), usePathData: true }, + snap: { + x: 1, // 强制对齐整像素 + y: 1 + }, paused: true, duration: 1, - ease: "power2.inOut" + ease: "none", + force3D: true // 启用GPU加速 }) // 初始定位优化 @@ -257,7 +264,7 @@ const initSvgAnimation = () => { } // 统一运动控制方法 -const handleMove = (percent, setpNum) => { +const handleMove = (percent, setpNum,) => { const target = percent // 边界限制 @@ -268,6 +275,7 @@ const handleMove = (percent, setpNum) => { gsap.to(currentProgress, { value: clampedTarget, duration: 1 * setpNum, + ease: "power2.inOut", // 统一缓动 onUpdate: () => { animation.progress(currentProgress.value / 100) }, @@ -290,8 +298,6 @@ const handleMove = (percent, setpNum) => { // 入场动画 const animationFn = () => { - - const tl = gsap.timeline({ onComplete: () => { gsap.to(".title-flower", { @@ -659,15 +665,21 @@ const animationFn = () => { .xfl-icon { pointer-events: none; - position: absolute; + // position: absolute; width: 163px; height: 153px; // 以中心放大1.5倍 will-change: transform; - transform: translate(-50%, -50%) scale(1.5); + transform: translateZ(0) translate(-50%, -50%) 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); + } + #frameBox { width: 100%; height: 100%;