SwiftUI 08-动画与过渡效果：打造自然的动态界面

SwiftUI 内建的动画系统简洁而强大，让开发者可以用极少代码构建流畅、响应式的动态交互体验。本章将系统讲解动画机制的核心用法、常见过渡方式，以及如何构建多状态协调动画。

一、动画的本质：状态驱动的变化

动画 ≠ 传统 UIKit 的 “手动控制时间轴”。

在 SwiftUI 中，动画 = 状态变化 + 系统插值过渡。例如视图的尺寸、颜色、位置、透明度随状态更新自动过渡，这种机制让我们更专注于数据逻辑。

---

二、用 .animation(_:value:) 添加隐式动画

@State private var isExpanded = false

RoundedRectangle(cornerRadius: 10)
    .frame(width: isExpanded ? 200 : 100, height: 100)
    .foregroundColor(.blue)
    .animation(.easeInOut(duration: 0.4), value: isExpanded)

Button("切换大小") {
    isExpanded.toggle()
}

推荐写法（iOS 15+）：animation(_:value:) 明确绑定状态变化

三、使用 .transition() 创建进入/退出动画

if show {
    RoundedRectangle(cornerRadius: 10)
        .fill(Color.green)
        .frame(width: 200, height: 200)
        .transition(.slide)
}

Button("显示 / 隐藏") {
    withAnimation {
        show.toggle()
    }
}

常用过渡：

方式	效果
.opacity	淡入淡出
.scale	缩放
.slide	从边缘滑入
.move(edge:)	指定边缘进入或退出
.asymmetric(insertion:removal:)	不同方向入场/离场动画

四、用 withAnimation {} 精准控制动画范围

@State private var offsetX: CGFloat = 0

Button("移动") {
    withAnimation(.easeOut(duration: 0.3)) {
        offsetX += 50
    }
}
.offset(x: offsetX)

适合用于多状态同时更新、临时触发动画、动画事件联动等场景。

五、显式 vs 隐式动画对比

类型	机制	控制程度
隐式动画（.animation(_:value:)）	系统自动插值	简洁但有限制
显式动画（withAnimation {}）	开发者手动控制动画块	灵活，适合多属性联动

六、动画插值函数：让动画更自然

插值类型	描述
.linear	匀速动画
.easeIn	慢进快出
.easeOut	快进慢出
.easeInOut	双端慢中间快
.spring()	弹簧动画，带回弹与摩擦感

示例：

.animation(.spring(response: 0.5, dampingFraction: 0.6), value: offset)

七、组合动画示例：滑动、透明度、缩放

@State private var show = false

VStack {
    if show {
        Text("Hello")
            .padding()
            .background(Color.pink)
            .cornerRadius(10)
            .scaleEffect(1.2)
            .opacity(0.8)
            .transition(.asymmetric(
                insertion: .move(edge: .bottom).combined(with: .opacity),
                removal: .scale.combined(with: .opacity)
            ))
    }

    Button("切换") {
        withAnimation(.spring()) {
            show.toggle()
        }
    }
}

八、动画常见应用场景

场景	动画类型
弹出模态卡片	.move + .opacity
加载指示器	.rotationEffect + Timer
Tab 栏切换	.opacity
用户交互反馈	.scaleEffect + spring
手势反馈	.offset + scale

九、动画调试技巧

• 使用 .animation(nil) 禁用动画定位问题；
• 通过 .debugPrint() 打印状态变化日志；
• 使用 Instruments 分析渲染性能（高级）；

小结

• SwiftUI 动画基于状态驱动设计；
• 隐式动画适合简单变化，显式动画控制更灵活；
• .transition() 控制进入/退出效果；
• withAnimation 是协调多动画的核心；
• 真实项目中需注意动画调试与性能；