[SwiftUI] Animating Views and Transitions

원문: 튜토리얼 페이지

Animating Views and Transitions

코드로 만들어보는 애니메이션! storyboard로 만들 때는 view를 애니메이션 할 일이 많이 없어서 간단한 애니메이션만 추가해봤었다.

여기서는 어떤 Animation과 Transition을 사용할까?

Add Hiking Data to the App

1. animation을 추가하기 전에 animation을 적용할 데이터를 먼저 추가해준다.

튜토리얼 페이지의 프로젝트를 다운받아 Resource 폴더에 있는 hikeData.json 파일을 옮겨준다.

json 파일 속에 여러 값들이 들어있다. (name, id, distance, difficulty 등등)

1. json 데이터를 파싱할 Hike.swift 파일을 생성한다.

Landmark 처럼 Codable을 채택할건데 Hike도 Landmark와 마찬가지로 key 값이 매칭되어야 한다.

struct Hike: Codable, Hashable, Identifiable {
    var id: Int
    var name: String
    var distance: Double
    var difficulty: Int
    var observations: [Observation]

    static var formatter = LengthFormatter()

    var distanceText: String {
        Hike.formatter
            .string(fromValue: distance, unit: .kilometer)
    }

    struct Observation: Codable, Hashable {
        var distanceFromStart: Double

        var elevation: Range<Double>
        var pace: Range<Double>
        var heartRate: Range<Double>
    }
}

observations의 내부에 elevation, pace, heartRate가 들어있기 때문에 Observation은 별도의 struct로 생성했다.

1. ModelData에서 Hide 데이터 로드

landmarks와 다르게 hide 데이터는 로드된 이후 값이 변경될 일이 없으므로 @Published를 사용하지 않는다.

1. Hike 폴더 옮기기

다운로드 받은 프로젝트의 Resource 파일 내부에 있는 Hike 폴더를 가져온다.

Animation을 구현하기 위해 애플에서 미리 만들어준 그래프 코드.

HikeView 파일을 열어 preview를 실행시켜보면 그래프가 잘 나오는 걸 확인할 수 있다.

Add Animations to Individual Views

animation(_:) , animation(_:value:) 사용하기

1. Button Rotation

HikeView에서 DetailView를 노출하기 위해 사용한 버튼(>)을 눌렀을 때 회전하는 애니메이션이 보이도록 수정한다.

• .animation(.easeInOut, value: showDetail) 추가하면 아래처럼 변경된다.

As Is	To Be

회전이 되는 게 보인다..!!!

.easeInOut 대신 .spring()을 사용할 수도 있다.

• .scaleEffect(showDetail ? 1.5 : 1)를 추가하면 detail 그래프가 나올 때 버튼이 커진다. (1.5배)

Animate the Effects of State Changes

여기서는 withAnimation 이라는 친구를 사용한다.

요렇게 button의 toggle 메서드를 withAnimation으로 감싸주면

굉장히 detail 그래프가 스무스하게 열린다.

withAnimation에도 .easyOut 같은 값을 사용할 수 있다. animation이 완료되는 데 걸리는 시간도 설정할 수 있는데, 위 코드의 withAnimation을 withAnimation(.easeInOut(duration: 4)) 으로 변경하면 된다.

Customize View Transitions

transition(_:) 사용하기

detail 화면을 노출할 때 transition에 slide 값을 주면

굉장히 느리게… 그래프가 밀려들어온다.

View의 Transition을 커스텀할 때 AnyTransition 에 값을 추가하고 관리할 수 있다. 아래와 같이 extension에 moveAndFade를 추가하면

extension AnyTransition {
    static var moveAndFade: AnyTransition {
        AnyTransition.slide
    }
}

동일한 코드를 이렇게 호출할 수 있기 때문에 지금은 간단한 transition이지만 후에 복잡한 transition을 만들어 여러 뷰에서 사용할 수 있게 된다. (아주 좋은데..?)

Compose Animations for Complex Effects

1. canvas 핀고정

다른 파일로 넘어갔을 때도 프리뷰를 확인할 수 있도록 canvas를 고정한다. + showDetail을 true로 설정한다.

1. Animation에 ripple() 추가

extension Animation {
    static func ripple() -> Animation {
        Animation.default
    }
}

GraphCapsule에 .animation(.ripple())까지 적용하면 그래프에 animation이 적용된다.

1. Animation.default 대신 spring 적용

static func ripple() -> Animation {
        Animation.spring(dampingFraction: 0.5)
            .speed(2)
    }

아까 버튼에 적용할 땐 몰랐는데 그래프가 확실히 튀는 게 보인다.

1. 최종 애니메이션

static func ripple(index: Int) -> Animation {
        Animation.spring(dampingFraction: 0.5)
            .speed(2)
            .delay(0.03 * Double(index))
    }

그래프의 각 index별로 딜레이를 주도록 하면 완성.

번외

• moveAndFade 코드 변경

  .asymmetric(
            insertion: .move(edge: .trailing).combined(with: .opacity),
            removal: .scale.combined(with: .opacity)
        )
  

마무리

transition이나 animation을 만질 일이 잘 없었는데, 이렇게 커스텀도 하고 extension으로 관리도 하니까 꽤 좋아보인다. 나중에 따로 앱 만들 때 사용해보면 좋을 것 같다. (물론 삽질을 많이 하겠지만…)