《SwiftUI 进阶学习第2章：动画与过渡》

学习目标

• 掌握 SwiftUI 中的基本动画实现
• 了解不同类型的动画效果
• 学习如何创建组合动画
• 掌握过渡效果的使用方法
• 了解不同动画曲线的特点

---

核心概念

动画基础

在 SwiftUI 中，动画是通过 withAnimation 函数来实现的，它可以将状态变化包装在动画中，使 UI 变化更加平滑自然。

withAnimation {
    // 状态变化
}

---

动画类型

1. 淡入淡出动画

淡入淡出动画通过改变视图的不透明度来实现，可以使用 .transition(.opacity) 修饰符。

struct FadeAnimationDemo: View {
    @State private var isVisible = false
    
    var body: some View {
        VStack {
            Button("显示/隐藏") {
                withAnimation {
                    isVisible.toggle()
                }
            }
            
            if isVisible {
                Text("Hello, Animation!")
                    .transition(.opacity)
            }
        }
    }
}

---

2. 缩放动画

缩放动画通过改变视图的缩放比例来实现，可以使用 .scaleEffect() 修饰符。

struct ScaleAnimationDemo: View {
    @State private var scale = 1.0
    
    var body: some View {
        VStack {
            Button("缩放") {
                withAnimation(.spring()) {
                    scale = scale == 1.0 ? 1.5 : 1.0
                }
            }
            
            Circle()
                .fill(.red)
                .frame(width: 100, height: 100)
                .scaleEffect(scale)
        }
    }
}

---

3. 旋转动画

旋转动画通过改变视图的旋转角度来实现，可以使用 .rotationEffect() 修饰符。

struct RotationAnimationDemo: View {
    @State private var rotation = 0.0
    
    var body: some View {
        VStack {
            Button("旋转") {
                withAnimation(.easeInOut(duration: 1.0)) {
                    rotation += 360
                }
            }
            
            Rectangle()
                .fill(.yellow)
                .frame(width: 100, height: 100)
                .rotationEffect(.degrees(rotation))
        }
    }
}

---

4. 位移动画

位移动画通过改变视图的位置来实现，可以使用 .offset() 修饰符。

struct OffsetAnimationDemo: View {
    @State private var offset = CGSize.zero
    
    var body: some View {
        VStack {
            Button("移动") {
                withAnimation(.interactiveSpring()) {
                    offset = offset == .zero ? CGSize(width: 100, height: 50) : .zero
                }
            }
            
            Rectangle()
                .fill(.blue)
                .frame(width: 100, height: 100)
                .offset(offset)
        }
    }
}

---

5. 颜色动画

颜色动画通过改变视图的颜色来实现，可以直接动画化颜色属性。

struct ColorAnimationDemo: View {
    @State private var color = Color.blue
    
    var body: some View {
        VStack {
            Button("变色") {
                withAnimation(.easeInOut(duration: 1.0)) {
                    color = color == .blue ? .red : .blue
                }
            }
            
            Rectangle()
                .fill(color)
                .frame(width: 200, height: 100)
                .cornerRadius(10)
        }
    }
}

---

6. 组合动画

组合动画是将多种动画效果结合在一起，可以同时应用多个动画修饰符。

struct CombinedAnimationDemo: View {
    @State private var scale = 1.0
    @State private var rotation = 0.0
    @State private var opacity = 1.0
    
    var body: some View {
        VStack {
            Button("组合动画") {
                withAnimation(.easeInOut(duration: 1.0)) {
                    scale = scale == 1.0 ? 1.2 : 1.0
                    rotation = rotation == 0 ? 45 : 0
                    opacity = opacity == 1.0 ? 0.5 : 1.0
                }
            }
            
            Rectangle()
                .fill(.green)
                .frame(width: 100, height: 100)
                .scaleEffect(scale)
                .rotationEffect(.degrees(rotation))
                .opacity(opacity)
        }
    }
}

---

过渡效果

过渡效果是在视图出现或消失时应用的动画，可以使用 .transition() 修饰符。

struct TransitionDemo: View {
    @State private var isVisible = false
    
    var body: some View {
        VStack {
            Button("切换视图") {
                withAnimation {
                    isVisible.toggle()
                }
            }
            
            if isVisible {
                Text("滑入视图")
                    .transition(.slide)
            }
        }
    }
}

SwiftUI 提供了多种内置过渡效果：

过渡效果	描述
.opacity	淡入淡出
.slide	从边缘滑入/滑出
.scale	缩放出现/消失
.move(edge:)	从指定方向移动
.asymmetric(insertion:removal:)	不对称过渡（出现和消失用不同效果）

---

动画曲线

动画曲线定义了动画的速度变化，可以使用不同的动画曲线来实现不同的视觉效果。

常用动画曲线

曲线	描述
.linear	线性动画，速度保持不变
.easeIn	缓入动画，开始慢，逐渐加快
.easeOut	缓出动画，开始快，逐渐减慢
.easeInOut	缓入缓出动画，开始慢，中间快，结束慢
.spring()	弹簧动画，有弹性效果
.interactiveSpring()	交互式弹簧动画，响应更灵敏

示例代码

// 线性动画
withAnimation(.linear(duration: 1.0)) {
    // 动画代码
}

// 弹簧动画
withAnimation(.spring(response: 0.6, dampingFraction: 0.8, blendDuration: 0)) {
    // 动画代码
}

// 可重复动画
withAnimation(.easeInOut(duration: 1.0).repeatCount(3, autoreverses: true)) {
    // 动画代码
}

---

实践示例：完整动画演示

以下是一个完整的动画演示示例，包含了各种动画类型和过渡效果：

import SwiftUI

struct AnimationAndTransitionDemo: View {
    // 状态管理
    @State private var isVisible = false
    @State private var scale = 1.0
    @State private var rotation = 0.0
    @State private var opacity = 1.0
    @State private var offset = CGSize.zero
    @State private var color = Color.blue
    @State private var selectedCurve = "linear"
    
    let curveOptions = ["linear", "easeIn", "easeOut", "easeInOut", "spring"]
    
    var body: some View {
        ScrollView {
            VStack(spacing: 25) {
                // 标题
                Text("动画与过渡")
                    .font(.largeTitle)
                    .fontWeight(.bold)
                    .foregroundColor(.blue)
                
                // 动画曲线选择
                VStack {
                    Text("动画曲线选择")
                        .font(.headline)
                    Picker("曲线", selection: $selectedCurve) {
                        ForEach(curveOptions, id: \.self) { option in
                            Text(option).tag(option)
                        }
                    }
                    .pickerStyle(.segmented)
                }
                
                // 淡入淡出动画
                VStack {
                    Text("1. 淡入淡出")
                        .font(.headline)
                    Button("显示/隐藏") {
                        withAnimation(getAnimation()) {
                            isVisible.toggle()
                        }
                    }
                    if isVisible {
                        Text("Hello, Animation!")
                            .padding()
                            .background(Color.orange)
                            .cornerRadius(8)
                            .transition(.opacity)
                    }
                }
                .padding()
                .background(Color.gray.opacity(0.1))
                .cornerRadius(10)
                
                // 缩放动画
                VStack {
                    Text("2. 缩放动画")
                        .font(.headline)
                    Button("缩放") {
                        withAnimation(getAnimation()) {
                            scale = scale == 1.0 ? 1.5 : 1.0
                        }
                    }
                    Circle()
                        .fill(.red)
                        .frame(width: 80, height: 80)
                        .scaleEffect(scale)
                }
                .padding()
                .background(Color.gray.opacity(0.1))
                .cornerRadius(10)
                
                // 旋转动画
                VStack {
                    Text("3. 旋转动画")
                        .font(.headline)
                    Button("旋转") {
                        withAnimation(getAnimation()) {
                            rotation += 360
                        }
                    }
                    Rectangle()
                        .fill(.yellow)
                        .frame(width: 80, height: 80)
                        .rotationEffect(.degrees(rotation))
                }
                .padding()
                .background(Color.gray.opacity(0.1))
                .cornerRadius(10)
                
                // 位移动画
                VStack {
                    Text("4. 位移动画")
                        .font(.headline)
                    Button("移动") {
                        withAnimation(getAnimation()) {
                            offset = offset == .zero ? CGSize(width: 100, height: 50) : .zero
                        }
                    }
                    Rectangle()
                        .fill(.blue)
                        .frame(width: 80, height: 80)
                        .offset(offset)
                }
                .padding()
                .background(Color.gray.opacity(0.1))
                .cornerRadius(10)
                
                // 颜色动画
                VStack {
                    Text("5. 颜色动画")
                        .font(.headline)
                    Button("变色") {
                        withAnimation(getAnimation()) {
                            color = color == .blue ? .red : .blue
                        }
                    }
                    Rectangle()
                        .fill(color)
                        .frame(width: 150, height: 80)
                        .cornerRadius(10)
                }
                .padding()
                .background(Color.gray.opacity(0.1))
                .cornerRadius(10)
                
                // 组合动画
                VStack {
                    Text("6. 组合动画")
                        .font(.headline)
                    Button("组合动画") {
                        withAnimation(getAnimation()) {
                            scale = scale == 1.0 ? 1.2 : 1.0
                            rotation = rotation == 0 ? 45 : 0
                            opacity = opacity == 1.0 ? 0.5 : 1.0
                        }
                    }
                    Rectangle()
                        .fill(.green)
                        .frame(width: 80, height: 80)
                        .scaleEffect(scale)
                        .rotationEffect(.degrees(rotation))
                        .opacity(opacity)
                }
                .padding()
                .background(Color.gray.opacity(0.1))
                .cornerRadius(10)
                
                // 过渡效果
                VStack {
                    Text("7. 过渡效果（Slide）")
                        .font(.headline)
                    Button("切换视图") {
                        withAnimation(getAnimation()) {
                            isVisible.toggle()
                        }
                    }
                    if isVisible {
                        Text("滑入视图")
                            .padding()
                            .background(Color.purple)
                            .foregroundColor(.white)
                            .cornerRadius(8)
                            .transition(.slide)
                    }
                }
                .padding()
                .background(Color.gray.opacity(0.1))
                .cornerRadius(10)
            }
            .padding()
        }
    }
    
    // 根据选择的曲线返回对应的动画
    private func getAnimation() -> Animation {
        switch selectedCurve {
        case "linear":
            return .linear(duration: 0.8)
        case "easeIn":
            return .easeIn(duration: 0.8)
        case "easeOut":
            return .easeOut(duration: 0.8)
        case "easeInOut":
            return .easeInOut(duration: 0.8)
        case "spring":
            return .spring(response: 0.6, dampingFraction: 0.7)
        default:
            return .easeInOut(duration: 0.8)
        }
    }
}

#Preview {
    AnimationAndTransitionDemo()
}

---

常见问题与解决方案

1. 动画不生效

问题：状态变化了，但没有动画效果。

解决方案 ：确保状态变化被包裹在 withAnimation 函数中。

// 错误 ❌
isVisible.toggle()

// 正确 ✅
withAnimation {
    isVisible.toggle()
}

2. 动画效果不符合预期

问题：动画效果不够流畅或不符合预期。

解决方案 ：尝试使用不同的动画曲线，如 .spring() 或 .easeInOut()，并调整动画时长。

// 使用弹簧动画获得更自然的弹性效果
withAnimation(.spring(response: 0.5, dampingFraction: 0.6)) {
    // 状态变化
}

3. 过渡效果不显示

问题：视图出现或消失时没有过渡效果。

解决方案 ：确保为视图添加了 .transition() 修饰符，并且状态变化在 withAnimation 中。

if isVisible {
    Text("Hello")
        .transition(.slide)  // 必须添加 transition
}

4. 动画卡顿或掉帧

问题：动画执行时界面卡顿。

解决方案：

• 避免在动画中同时改变过多属性
• 对于复杂视图，考虑使用 .drawingGroup() 优化渲染
• 确保动画中不执行耗时操作

---

总结

本章介绍了 SwiftUI 中的动画与过渡效果，包括：

• 基本动画类型：淡入淡出、缩放、旋转、位移、颜色动画
• 组合动画：同时应用多种动画效果
• 过渡效果 ：视图出现/消失时的动画（.transition）
• 动画曲线：线性、缓入、缓出、弹簧等不同速度曲线
• 实践示例：完整的动画演示应用

通过这些动画效果，可以使应用界面更加生动有趣，提升用户体验。在实际开发中，合理使用动画可以为应用增添活力，使界面交互更加自然流畅。

---

参考资料

• SwiftUI 官方文档 - Animation
• Apple Developer Documentation: withAnimation
• Apple Developer Documentation: Transition
• WWDC 2019: Building Custom Views with SwiftUI
• SwiftUI Animation Tutorial

---

本内容为《SwiftUI 高级教程》第二章，欢迎关注后续更新。