SwiftUI如何串联依次执行两个动画？

解决思路 #

你需要用两个独立的状态变量分别控制圆周运动、shimmer动画的触发，通过第一个动画的完成回调触发第二个动画的状态变更，即可实现顺序执行。 #

完整实现代码 #

状态定义

// 控制圆周运动的角度，可替换为你自己的圆周运动参数
@State private var orbitAngle: Double = 0
// 控制shimmer动画是否激活
@State private var isShimmerActive: Bool = false
// 圆周运动动画的总时长，可按需调整
private let orbitAnimationDuration: Double = 0.8

视图部分

Circle()
    .frame(width: 50, height: 50)
    // 圆周运动实现，可替换为你自己的圆周布局逻辑
    .offset(x: 100, y: 0)
    .rotationEffect(.degrees(orbitAngle))
    // shimmer效果直接绑定状态，不需要条件判断包裹
    .shimmering(active: isShimmerActive, duration: 0.9, bounce: false)
    .onAppear {
        // iOS 17+ 支持带完成回调的动画API
        withAnimation(.linear(duration: orbitAnimationDuration)) {
            orbitAngle = 360 // 修改为你需要的圆周运动最终状态值
        } completion: {
            // 圆周动画完全结束后触发shimmer动画
            isShimmerActive = true
        }
    }

iOS 17以下版本兼容方案 #

如果需要支持更低系统版本，没有withAnimation的完成回调，可以用延迟执行替代，延迟时长等于第一个动画的总时长即可：

.onAppear {
    withAnimation(.linear(duration: orbitAnimationDuration)) {
        orbitAngle = 360
    }
    // 等圆周动画执行完毕后再激活shimmer
    DispatchQueue.main.asyncAfter(deadline: .now() + orbitAnimationDuration) {
        isShimmerActive = true
    }
}

原有代码问题说明 #

• 你原来的animation(.linear, value: 0.8)写法有误，value参数需要传入会发生变化的动态状态变量，传入固定常量0.8时，状态没有变更就不会触发动画。
• 不要用同一个条件变量同时控制两个动画的触发，拆分状态分别控制才能实现时序上的串联。

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