[SwiftUI] InteractiveUI (Gesture, Animation, Transition)

안녕하십니까, 민트입니다. 😈

스터디 중 SwiftUI의 InteractiveUI들에 대해 정리해 보았습니다.

1. Gesture

@GestureState

• 제스처가 진행 중일 때만 임시적으로 상태를 유지
• 제스처가 끝나면 자동으로 초기값으로 되돌아가는 상태 래퍼 (일시적)
• 상태에 따라 뷰 속성을 실시간으로 변화시킴
• @State 처럼 지속적인 변화가 아닌, 임시 상태 용도
• 제스쳐 추적하는 동안 콜백을 통해 상태를 직접 갱신
  • updating: 제스쳐가 변경되는 순간, 일시적인 UI 상태
  • onChanged: 제스쳐를 사용하는 동안의 UI 상태, 종료 후 재설정 X
  • onEnded: 종료 후 상태 재설정

Gesture Composition Type

• Simultaneous
  • 여러 제스쳐를 합쳐서 한 번에 인식
• Sequenced
  • 여러 제스쳐 상태를 순서대로 적용 가능
• Exclusive
  • 여러 제스쳐 중 처음 시도한 하나의 제스쳐만 활성화

예시 코드

import SwiftUI

struct GestureView: View {
    @GestureState private var isPressed = false
    @State private var offset = CGSize.zero

    var body: some View {
        Circle()
            .fill(isPressed ? Color.blue : Color.red)
            .frame(width: 100, height: 100)
            .offset(offset)
            .gesture(
                LongPressGesture(minimumDuration: 0.5)
                    .sequenced(before: DragGesture())
                    .updating($isPressed) { value, state, _ in
                        if case .first(true) = value {
                            state = true
                        }
                    }
                    .onEnded { value in
                        if case .second(true, let drag?) = value {
                            offset = drag.translation
                        }
                    }
            )
    }
}

2. Animation

• Apple이 SwiftUI를 만들게 된 중요한 계기 중 하나
• State의 변화를 기반으로 동작

명시적 vs 암묵적

• 명시적
  • 개발자가 직접 withAnimation 블록 안에서 상태 변경 트리거
  • 제어 수준 높음 (정확한 위치에 애니메이션 적용)
  • 선언적이나 의도 명확
  • 사용자가 제어해야 할 상호작용, 전환에 적합
• 암시적
  • 뷰에 .animation modifier를 지정하면 특정 상태값의 변화에 따라 자동으로 적용
  • 제어 수준 낮음 (전체 뷰에 애니메이션 적용됨)
  • 선언적으로 간단하나 예측이 어려울 수도 있음.
  • 단순한 UI 상태 변화

matchedGeometryEffect

• 두 개의 뷰가 서로 다른 위치나 크기라도 시스템이 이들을 동일한 뷰로 인식하게 해주는 기능
• 뷰 간 전환 시 위치, 크기, 모양 등을 자연스럽게 애니메이션으로 연결할 수 있게 만들어줌.
• 작은 뷰와 큰 뷰는 전혀 다른 뷰이지만, 하나의 뷰처럼 애니메이션이 이어진다.

@Namespace

@Namespace private var animation

• matchedGeometryEffect가 어떤 뷰들이 같은 뷰인지 인식할 수 있도록 공감(namespace)를 공유하는 변수
• 뷰 간의 연결 고리
• id: 연결을 위한 키값
• animation: 같은 공간 안에 있다는 표시

프로젝트 별 선택 기준

• animation
  • 단순 상태 변화
• withAnimation
  • 사용자 액션에 따라 명확히 제어해야 할 때
• matchedGeometryEffect + @Namespace
  • View 간에 자연스러운 전환이 필요할 때

명시적, 암시적

예제 코드

//명시적
struct AnimationView: View {
    @Namespace private var animation
    @State private var isExpanded = false

    var body: some View {
        VStack {
            if isExpanded {
                RoundedRectangle(cornerRadius: 25)
                    .fill(Color.green)
                    .matchedGeometryEffect(id: "card", in: animation)
                    .frame(width: 300, height: 300)
                    .onTapGesture {
                        withAnimation(.spring()) {
                            isExpanded.toggle()
                        }
                    }
            } else {
                RoundedRectangle(cornerRadius: 25)
                    .fill(Color.green)
                    .matchedGeometryEffect(id: "card", in: animation)
                    .frame(width: 100, height: 100)
                    .onTapGesture {
                        withAnimation(.spring()) {
                            isExpanded.toggle()
                        }
                    }
            }
        }
    }
}

//암묵적
struct ImplicitAnimationView: View {
    @State private var isOn = false

    var body: some View {
        Circle()
            .fill(isOn ? Color.green : Color.red)
            .frame(width: isOn ? 200 : 100, height: isOn ? 200 : 100)
            .onTapGesture {
                isOn.toggle()
            }
            .animation(.easeInOut, value: isOn)
    }
}

3. Transition

• insertion과 removal에 서로 다른 효과 적용 가능
• 각각 별개의 identity를 적용 시키기에 가능

AnyTransition.modifier

• 커스텀 전환 효과를 구현할 때 사용하는 고급 도구
• 기본 효과 외에 직접 만든 시각 효과를 사용하고 싶을 때 유용
  • .opacity, .slide, .scale
• 뷰가 삽입되거나 제거될 때, 원하는 방식으로 뷰를 수정해서 전환 애니메이션을 만들 수 있게 해주는 transition 생성자

AnyTransition.modifier(
    active: ViewModifier,   // 전환 중에 적용될 상태
    identity: ViewModifier  // 평소 상태
)

 

예시 코드

//Modifier 정의
struct BlurModifier: ViewModifier {
    let amount: CGFloat

    func body(content: Content) -> some View {
        content
            .blur(radius: amount)
            .opacity(1 - Double(amount / 10))
    }
}

//Transition 정의
extension AnyTransition {
    static var blurFade: AnyTransition {
        .modifier(
            active: BlurModifier(amount: 10),
            identity: BlurModifier(amount: 0)
        )
    }
}

struct TransitionView: View {
    @State private var show = false

    var body: some View {
        VStack(spacing: 20) {
            Button("Toggle Box") {
                withAnimation {
                    show.toggle()
                }
            }

            if show {
                RoundedRectangle(cornerRadius: 20)
                    .fill(Color.purple)
                    .frame(width: 200, height: 200)
                    .transition(.blurFade)
            }
        }
    }
}

 

https://github.com/prography/10th-iOS-Study/tree/main/%EC%8B%AC%ED%99%94/3.%20%EA%B3%A0%EA%B8%89%20%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98%20%EC%A0%84%ED%99%98%20%EB%B0%8F%20%EC%A0%9C%EC%8A%A4%EC%B3%90%20%ED%99%9C%EC%9A%A9

10th-iOS-Study/심화/3. 고급 애니메이션 전환 및 제스쳐 활용 at main · prography/10th-iOS-Study