Day 14 · 1부 · 애니메이션 해부와 여러 단계 모션

struct PetAvatar: View {
    @State private var selected = false

    var body: some View {
        Image(systemName: "cat.fill")
            .font(.system(size: 60))
            .scaleEffect(selected ? 1.5 : 1.0)
            .onTapGesture {
                withAnimation(.bouncy) {        // 이번 트랜잭션에 .bouncy 기록
                    selected.toggle()
                }
            }
    }
}

struct PetAvatarBadge: View {
    @Binding var selected: Bool          // 밖에서 코드로 바뀌어도 애니메이션

    var body: some View {
        Image(systemName: "dog.fill")
            .font(.system(size: 60))
            .scaleEffect(selected ? 1.5 : 1.0)
            .animation(.bouncy, value: selected)   // selected가 바뀐 업데이트에만 적용
    }
}

struct AccidentalAnimation: View {
    var isOn: Bool
    var title: String

    var body: some View {
        Text(title)
            .scaleEffect(isOn ? 1.2 : 1.0)
            .animation(.easeInOut)      // title이 바뀌어도, 부모 레이아웃이 바뀌어도 움직인다
    }
}

struct CurveCatalog: View {
    @State private var on = false

    var body: some View {
        VStack(spacing: 12) {
            Circle().frame(width: on ? 120 : 40)
            Button("타이밍 커브") { withAnimation(.easeInOut(duration: 0.3)) { on.toggle() } }
            Button("스프링 프리셋") { withAnimation(.snappy) { on.toggle() } }
            Button("스프링 직접") { withAnimation(.spring(duration: 0.5, bounce: 0.3)) { on.toggle() } }
            Button("지연") { withAnimation(.smooth.delay(0.2)) { on.toggle() } }
            Button("끝나면 알림") {
                withAnimation(.bouncy) {
                    on.toggle()
                } completion: {
                    print("애니메이션 끝")      // iOS 17
                }
            }
        }
    }
}

struct CountingNumber: View, Animatable {
    var value: Double

    // 이 값을 프레임마다 보간해 body를 다시 부른다
    // (Xcode 16+ · Swift 6 모드에서는 앞에 nonisolated를 붙인다 — View가 MainActor라서)
    var animatableData: Double {
        get { value }
        set { value = newValue }
    }

    var body: some View {
        Text("\(Int(value))")
            .font(.largeTitle.monospacedDigit())
    }
}

struct ScoreView: View {
    @State private var score = 0.0
    var body: some View {
        CountingNumber(value: score)
            .animation(.smooth(duration: 1), value: score)
            .onTapGesture { score += 100 }
    }
}

struct StatusDotBranch: View {
    var isOn: Bool
    var body: some View {
        if isOn {
            Circle().fill(.green).frame(width: 24, height: 24)
        } else {
            Circle().fill(.gray).frame(width: 24, height: 24)
        }
    }
}

struct StatusDot: View {
    var isOn: Bool
    var body: some View {
        Circle()
            .fill(isOn ? Color.green : Color.gray)
            .frame(width: 24, height: 24)
    }
}

struct ToastDemo: View {
    @State private var showsToast = false

    var body: some View {
        VStack {
            if showsToast {
                Text("저장했다")
                    .padding()
                    .background(.thinMaterial, in: Capsule())
                    .transition(.move(edge: .top).combined(with: .opacity))
            }
            Spacer()
            Button("저장") { showsToast.toggle() }
        }
        .animation(.snappy, value: showsToast)   // 넣고 빼는 변화를 애니메이션 트랜잭션으로
    }
}

struct HeroDemo: View {
    @Namespace private var namespace
    @State private var expanded = false

    var body: some View {
        VStack {
            if expanded {
                RoundedRectangle(cornerRadius: 24)
                    .fill(.orange)
                    .frame(height: 300)
                    .matchedGeometryEffect(id: "card", in: namespace)
            } else {
                RoundedRectangle(cornerRadius: 12)
                    .fill(.orange)
                    .frame(width: 80, height: 80)
                    .matchedGeometryEffect(id: "card", in: namespace)
            }
            Spacer()
        }
        .padding()
        .onTapGesture {
            withAnimation(.smooth) { expanded.toggle() }
        }
    }
}

struct OverdueBadge: View {
    var body: some View {
        Label("식사 시간 지남", systemImage: "fork.knife")
            .font(.headline)
            .phaseAnimator([false, true]) { content, highlighted in
                content.foregroundStyle(highlighted ? Color.red : Color.primary)
            } animation: { _ in
                .easeInOut(duration: 1.0)       // 기본은 스프링, 은은한 반복엔 느린 커브
            }
    }
}

enum ReactionPhase: CaseIterable {
    case initial, move, scale

    var verticalOffset: Double {
        switch self {
        case .initial: 0
        case .move, .scale: -40
        }
    }
    var scale: Double { self == .scale ? 1.4 : 1.0 }
}

struct ReactionButton: View {
    @State private var likes = 0

    var body: some View {
        Button {
            likes += 1
        } label: {
            Label("\(likes)", systemImage: "heart.fill")
                .phaseAnimator(ReactionPhase.allCases, trigger: likes) { content, phase in
                    content
                        .scaleEffect(phase.scale)
                        .offset(y: phase.verticalOffset)
                } animation: { phase in
                    switch phase {
                    case .initial: .smooth
                    case .move: .spring(bounce: 0.5)
                    case .scale: .snappy
                    }
                }
        }
    }
}

struct HeartValues {
    var scale = 1.0
    var verticalStretch = 1.0
    var verticalTranslation = 0.0
    var angle = Angle.zero
}

struct KudosHeart: View {
    @State private var kudos = 0

    var body: some View {
        Image(systemName: "heart.fill")
            .font(.system(size: 60))
            .foregroundStyle(.pink)
            .keyframeAnimator(initialValue: HeartValues(), trigger: kudos) { content, value in
                content
                    .rotationEffect(value.angle)
                    .scaleEffect(value.scale)
                    .scaleEffect(y: value.verticalStretch)
                    .offset(y: value.verticalTranslation)
            } keyframes: { _ in
                KeyframeTrack(\.scale) {
                    LinearKeyframe(1.0, duration: 0.36)             // 잠깐 멈춤
                    SpringKeyframe(1.5, duration: 0.8, spring: .bouncy)
                    SpringKeyframe(1.0, spring: .bouncy)
                }
                KeyframeTrack(\.verticalTranslation) {
                    LinearKeyframe(0.0, duration: 0.1)
                    SpringKeyframe(20.0, duration: 0.15, spring: .bouncy)  // 뛰기 전 움츠림
                    SpringKeyframe(-60.0, duration: 1.0, spring: .bouncy)
                    SpringKeyframe(0.0, spring: .bouncy)
                }
                KeyframeTrack(\.verticalStretch) {
                    CubicKeyframe(1.0, duration: 0.1)
                    CubicKeyframe(0.6, duration: 0.15)
                    CubicKeyframe(1.5, duration: 0.1)
                    CubicKeyframe(1.0, duration: 0.3)
                }
                KeyframeTrack(\.angle) {
                    CubicKeyframe(.zero, duration: 0.58)
                    CubicKeyframe(.degrees(16), duration: 0.125)
                    CubicKeyframe(.degrees(-16), duration: 0.125)
                    CubicKeyframe(.zero, duration: 0.125)
                }
            }
            .onTapGesture { kudos += 1 }
    }
}