SwiftUI指定重复次数的旋转动画结束时无过渡效果且方向异常问题求助

我来帮你搞定这个旋转动画的问题——你碰到的突然停止、最终朝向错误，核心是动画触发逻辑和状态管理没匹配好，咱们一步步调整：

先分析问题出在哪 #

1. 你叠加了两个rotationEffect，其实只需要一个绑定状态的就够了，多的会干扰效果；
2. 用repeatCount(2)但只切换了一次isAnimating，这会让动画重复执行"从0→-90度"两次，但结束后isAnimating保持true，视图直接停在-90度，没有反向回到初始状态的过渡，自然显得突兀。

修正后的代码方案 #

第一步：简化视图结构

先把多余的rotationEffect删掉，只保留一个和状态绑定的：

Image(systemName: "iphone")
    .imageScale(.large)
    .font(.custom("Masive", size: 60))
    .rotationEffect(Angle(degrees: isAnimating ? -90 : 0))
    .frame(width: 60, height: 80, alignment: .center)
    .accessibilityLabel("A phone is repeatedly rotating and back")

第二步：调整动画触发逻辑（两种可选方案）

方案1：自动反转的重复动画（简洁版）

利用autoreverses(true)让动画自动来回，再配合repeatCount控制次数，最后确保状态回到初始值：

.onAppear {
    let animation = Animation.spring().delay(1).repeatCount(2, autoreverses: true)
    withAnimation(animation) {
        isAnimating = true
    }
    // 动画结束后重置状态，确保回到初始朝向
    DispatchQueue.main.asyncAfter(deadline: .now() + 1 + animation.duration * 2) {
        withAnimation(Animation.spring()) {
            isAnimating = false
        }
    }
}

方案2：手动控制状态切换（精准版）

如果需要更细致的动画节奏，手动控制每一次旋转和转回：

.onAppear {
    let baseAnimation = Animation.spring().delay(1)
    // 第一次旋转到-90度
    withAnimation(baseAnimation) {
        isAnimating = true
    }
    // 第一次转回0度
    DispatchQueue.main.asyncAfter(deadline: .now() + 1 + baseAnimation.duration) {
        withAnimation(baseAnimation) {
            isAnimating = false
        }
    }
    // 第二次旋转到-90度
    DispatchQueue.main.asyncAfter(deadline: .now() + 1 + baseAnimation.duration * 2) {
        withAnimation(baseAnimation) {
            isAnimating = true
        }
    }
    // 第二次转回0度，回到初始状态
    DispatchQueue.main.asyncAfter(deadline: .now() + 1 + baseAnimation.duration * 3) {
        withAnimation(baseAnimation) {
            isAnimating = false
        }
    }
}

关键注意点 #

• 始终确保动画结束后isAnimating回到false，这样视图会停在正确的初始朝向；
• 避免叠加多个rotationEffect，否则会导致旋转计算混乱；
• autoreverses适合快速实现来回动画，手动控制则更适合自定义复杂的动画节奏。

内容的提问来源于stack exchange，提问作者Dark star