SwiftUI 的动画 API 一行代码就能跑起来——withAnimation { ... } 包一下，视图就动了。但当你要做“复合动画”、“手势驱动的弹性反馈”、“非线性插值”时，原生的简洁反而会变成障碍。本文梳理 SwiftUI 动画系统的几个关键概念，帮你跨过“会用但不精”这道坎。

一、Animation 的两层抽象

SwiftUI 动画系统由两层组成：

1. Animation：描述“如何插值”——时长、曲线、是否重复
2. Transaction：描述“何时插值”——本次状态变更用哪个 Animation、是否禁用动画

withAnimation(.spring(response: 0.4, dampingFraction: 0.7)) {
    isExpanded.toggle()
}

withAnimation 做的事是：创建一个 Transaction，把传入的 Animation 装进去，然后在 transaction scope 内执行闭包。SwiftUI 在 diff 状态时读取 transaction 决定如何过渡。

二、spring 的两个核心参数

Animation.spring 有几个变种，最常用的是 spring(response:dampingFraction:)：

• response：周期，类似 duration，但更物理化。0.4 ≈ 一个比较“快”的反馈。
• dampingFraction：阻尼比。1.0 = 临界阻尼（无回弹），0.6 = 明显回弹，0.3 = 强烈回弹。

// 一个"有弹但克制"的按钮反馈
withAnimation(.spring(response: 0.35, dampingFraction: 0.65)) {
    scale = isPressed ? 0.95 : 1.0
}

经验值：列表项交互动画用 0.4 / 0.8，强调型反馈（点赞、收藏）用 0.3 / 0.5，大尺寸转场用 0.5 / 0.9。

三、animatableData：自定义可动画值

SwiftUI 默认只对“已知 Animatable”的属性做插值（position、opacity、scale 等）。要让自定义 View 参与动画，需要声明 animatableData：

struct CircularProgress: View {
    var progress: Double

    var animatableData: Double {
        get { progress }
        set { progress = newValue }
    }

    var body: some View {
        Circle()
            .trim(from: 0, to: progress)
            .stroke(Gradient.purple, lineWidth: 8)
            .rotationEffect(.degrees(-90))
    }
}

// 调用
withAnimation(.easeInOut(duration: 0.8)) {
    progress = 0.85
}

trim 本身已经支持动画，但当你把它包成自定义组件且暴露自定义参数时，animatableData 是连接 SwiftUI 插值系统的桥梁。

四、PhaseAnimator：循环动画的官方答案

iOS 17 引入的 PhaseAnimator 替代了过去用 TimelineView + 手动状态机的写法：

Image(systemName: "heart.fill")
    .phaseAnimator([false, true]) { content, phase in
        content
            .scaleEffect(phase ? 1.3 : 1.0)
            .foregroundStyle(phase ? .pink : .gray)
    } animation: { phase in
        switch phase {
        case true: .spring(response: 0.3, dampingFraction: 0.4)
        case false: .easeInOut(duration: 0.4)
        }
    }

每次 phase 切换都触发一次动画，并可以为每个切换指定不同的 timing。这对“心跳动画”、“加载循环”、“提示动效”非常合适。

五、KeyframeAnimator：关键帧动画

iOS 17 同步引入的 KeyframeAnimator 用于复杂的多关键帧动画：

Rectangle()
    .fill(.orange)
    .frame(width: 60, height: 60)
    .keyframeAnimator(initialValue: 0) { content, value in
        content
            .rotationEffect(.degrees(value.rotation))
            .scaleEffect(value.scale)
            .offset(value.offset)
    } keyframes: { _ in
        KeyframeTrack(\.rotation) {
            CubicKeyframe(0, duration: 0.3)
            CubicKeyframe(180, duration: 0.5)
            CubicKeyframe(360, duration: 0.4)
        }
        KeyframeTrack(\.scale) {
            SpringKeyframe(1.5, duration: 0.4)
            SpringKeyframe(1.0, duration: 0.6)
        }
    }

不同 track 可以用不同的 timing 函数（Cubic / Spring / Linear），每条 track 独立插值——这在过去只能用 UIView animate keyframes + representable 包一层，现在原生支持。

六、手势 + 动画：用 transaction 协调

@State private var offset: CGSize = .zero

DragGesture()
    .onChanged { value in
        offset = value.translation
    }
    .onEnded { value in
        if abs(value.translation.width) > 100 {
            // 用 transaction 控制回弹 vs 飞出
            withAnimation(.spring(response: 0.3, dampingFraction: 0.6)) {
                offset = CGSize(width: 500 * (value.translation.width > 0 ? 1 : -1), height: 0)
            }
        } else {
            withAnimation(.spring(response: 0.4, dampingFraction: 0.8)) {
                offset = .zero
            }
        }
    }

关键原则：手势过程中不要用 withAnimation（跟随手指要即时响应），手势结束时再用动画过渡到目标状态。这是几乎所有“自然手感”动画的底层逻辑。

七、避免动画卡顿：transaction 与离散状态

// 反例：在 onAppear 里改多个状态，会触发多次 transaction
.onAppear {
    isLoading = false
    showContent = true
    // 两次状态变更可能造成动画错位
}

// 正例：用 withTransaction 把它们合并
.onAppear {
    var t = Transaction(animation: .easeInOut(duration: 0.4))
    withTransaction(t) {
        isLoading = false
        showContent = true
    }
}

withTransaction 让多个状态变更共享同一个 animation context，避免每次 set 都触发独立的动画过渡。

八、性能：动画背后的 GPU 开销

SwiftUI 的动画最终落到 Metal 上，几个常见开销点：

• blur、shadow：高斯模糊在每帧都重算，能用 mask 替代就替代
• modifier 顺序：A().blur().B() 与 A().B().blur() 渲染开销差几倍
• frame width: 0：避免用 0 宽度做“隐藏”，会创建空 layer

开启 SwiftUI Animation Debug（Instruments）能看到每帧的 layer 数量和合成耗时。

结语

SwiftUI 动画系统的“简单”是建立在一套严密的抽象之上的——Animation 描述插值、Transaction 协调时机、animatableData 桥接自定义状态。当你把这三个概念串起来，就不再需要“调参玄学”，而是可以预测性地写出你想要的动画效果。

iOS 17 引入的 PhaseAnimator / KeyframeAnimator 进一步降低了复杂动画的门槛，是时候把过去那些“UIView 包装”重写一遍了。