已给版本

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%;