1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

import SwiftUI

struct Sweep: Shape, Animatable {
    var progress: Double

    // 框架会反复给这个属性赋中间值
    var animatableData: Double {
        get { progress }
        set { progress = newValue }
    }

    func path(in rect: CGRect) -> Path {
        var p = Path()
        p.move(to: CGPoint(x: rect.minX, y: rect.midY))
        p.addLine(to: CGPoint(x: rect.minX + rect.width * progress, y: rect.midY))
        return p
    }
}

struct SweepDemo: View {
    @State private var progress = 0.0

    var body: some View {
        VStack(spacing: 30) {
            Sweep(progress: progress)
                .stroke(.blue, style: StrokeStyle(lineWidth: 6, lineCap: .round))
                .frame(height: 8)

            Button("走一遍") {
                withAnimation(.easeInOut(duration: 1.5)) { progress = 1 }
            }
            Button("复位") { progress = 0 }        // 没有 withAnimation，瞬间归零
        }
        .padding()
    }
}

1

error: main actor-isolated property 'calls' can not be mutated from a nonisolated context

1
2
3
4
5
6

Button("展开") {
    withAnimation(.spring(duration: 0.4)) {
        isExpanded.toggle()
        rotation += 180          // 闭包里的多个变化会一起动画
    }
}

1
2
3

Text("\(count)")
    .scaleEffect(isBig ? 1.5 : 1.0)
    .animation(.bouncy, value: isBig)     // isBig 一变，这个 scaleEffect 就动画

1

warning: 'animation' was deprecated in macOS 12.0: Use withAnimation or animation(_:value:) instead.

1
2
3
4
5

if isLoading {
    ProgressView()
} else {
    ContentView()
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

struct TransitionDemo: View {
    @State private var showDetail = false

    var body: some View {
        VStack {
            Button(showDetail ? "收起" : "展开") {
                withAnimation(.easeInOut(duration: 0.3)) {
                    showDetail.toggle()
                }
            }

            if showDetail {
                Text("详情内容")
                    .padding()
                    .background(.blue.opacity(0.15), in: RoundedRectangle(cornerRadius: 8))
                    .transition(.move(edge: .top).combined(with: .opacity))
            }
        }
    }
}

1
2
3
4
5
6
7

// 🛑 不动：状态变了，但没有告诉框架"这次要动画"
Button("切换") { showDetail.toggle() }
if showDetail { Detail().transition(.opacity) }

// ✅ 动了：用 withAnimation 包住状态变化
Button("切换") { withAnimation { showDetail.toggle() } }
if showDetail { Detail().transition(.opacity) }

1
2
3
4

Group {
    if showDetail { Detail().transition(.opacity) }
}
.animation(.easeInOut, value: showDetail)

1
2
3
4
5

// 情况一：同一个视图，宽度在变 → 会平滑地长/缩
Rectangle().frame(width: big ? 200 : 50)

// 情况二：两个不同分支的视图 → 走转场，不会"变形"
if big { WideView() } else { NarrowView() }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

struct ExpandDemo: View {
    @Namespace private var ns
    @State private var expanded = false

    var body: some View {
        ZStack {
            if expanded {
                RoundedRectangle(cornerRadius: 20)
                    .fill(.blue)
                    .frame(width: 300, height: 200)
                    .matchedGeometryEffect(id: "card", in: ns)
                    .onTapGesture { withAnimation(.spring) { expanded = false } }
            } else {
                RoundedRectangle(cornerRadius: 10)
                    .fill(.blue)
                    .frame(width: 100, height: 60)
                    .matchedGeometryEffect(id: "card", in: ns)
                    .onTapGesture { withAnimation(.spring) { expanded = true } }
            }
        }
    }
}

1
2
3
4
5
6
7
8

PhaseAnimator([1.0, 1.3, 1.0]) { phase in
    Circle()
        .fill(.blue)
        .frame(width: 80, height: 80)
        .scaleEffect(phase)
} animation: { _ in
    .easeInOut(duration: 0.6)
}

1
2
3
4
5
6
7
8

KeyframeAnimator(initialValue: 0.0) { offset in
    Circle().fill(.orange).frame(width: 40, height: 40).offset(x: offset)
} keyframes: { _ in
    KeyframeTrack(\.self) {
        CubicKeyframe(120, duration: 0.5)
        SpringKeyframe(0, duration: 0.6, spring: .bouncy)
    }
}

1
2
3
4
5
6
7

// 🛑 滚动位置每帧都在变，给它加动画只会打架
ScrollView { ... }
    .animation(.spring, value: scrollOffset)

// 🛑 输入框每敲一个字都触发
TextField("搜索", text: $query)
    .animation(.bouncy, value: query)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// 在视图里读系统的"减弱动态效果"开关
@Environment(\.accessibilityReduceMotion) private var reduceMotion

// 写成一个可选的动画：开关打开时给 nil
var animation: Animation? {
    reduceMotion ? nil : .spring(duration: 0.4)
}

// 用法：withAnimation 接受 Animation?，传 nil 就是"不做动画"
withAnimation(animation) { expanded.toggle() }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

import SwiftUI

struct AnimationLab: View {
    @State private var isExpanded = false
    @State private var count = 0
    @State private var showBadge = false
    @Namespace private var ns
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var animation: Animation? { reduceMotion ? nil : .spring(duration: 0.4) }

    var body: some View {
        ScrollView {
            VStack(spacing: 32) {

                // ① 布局属性可动画：宽度
                section("① frame 宽度（可动画）") {
                    RoundedRectangle(cornerRadius: 8)
                        .fill(.blue)
                        .frame(width: isExpanded ? 260 : 80, height: 40)
                }

                // ② 只动画指定属性：value 明确
                section("② 数字变化时脉冲（.animation(value:)）") {
                    Text("\(count)")
                        .font(.system(size: 40, weight: .bold, design: .rounded))
                        .scaleEffect(showBadge ? 1.3 : 1.0)
                        .animation(.bouncy(duration: 0.3), value: showBadge)
                }

                // ③ 转场：需要 withAnimation + transition
                section("③ 转场（withAnimation + transition）") {
                    VStack {
                        if showBadge {
                            Text("我是转场出来的")
                                .padding(8)
                                .background(.green.opacity(0.2), in: Capsule())
                                .transition(.move(edge: .top).combined(with: .opacity))
                        }
                    }
                    .frame(height: 50)
                }

                // ④ matchedGeometryEffect：身份不同但当成同一个
                section("④ matchedGeometryEffect") {
                    ZStack {
                        if isExpanded {
                            RoundedRectangle(cornerRadius: 20)
                                .fill(.orange)
                                .frame(width: 240, height: 120)
                                .matchedGeometryEffect(id: "card", in: ns)
                        } else {
                            RoundedRectangle(cornerRadius: 10)
                                .fill(.orange)
                                .frame(width: 80, height: 40)
                                .matchedGeometryEffect(id: "card", in: ns)
                        }
                    }
                    .frame(height: 130)
                }

                // ⑤ PhaseAnimator：无需状态变化的循环动效
                section("⑤ PhaseAnimator（循环脉冲）") {
                    PhaseAnimator([1.0, 1.25, 1.0]) { phase in
                        Image(systemName: "bell.fill")
                            .font(.system(size: 36))
                            .foregroundStyle(.red)
                            .scaleEffect(phase)
                    } animation: { _ in
                        .easeInOut(duration: 0.7)
                    }
                }

                HStack {
                    Button("切换布局") { withAnimation(animation) { isExpanded.toggle() } }
                    Button("加一") { count += 1; showBadge.toggle() }
                    Button("转场开关") { withAnimation(animation) { showBadge.toggle() } }
                }
                .buttonStyle(.bordered)
            }
            .padding()
        }
    }

    func section<Content: View>(_ title: String, @ViewBuilder content: () -> Content) -> some View {
        VStack(spacing: 8) {
            Text(title).font(.footnote).foregroundStyle(.secondary)
            content()
        }
    }
}

#Preview {
    AnimationLab()
}