SwiftUI 애니메이션

2021년 8월 14일 수정

≡ 목차 (Table of Contents)

animation 속성 메서드 활용

간단하게는 아래와 같은 식이다.

SomeView
  .rotationEffect(.degrees(90))
  .animation(.spring())

멀티 애니메이션도 가능하다.

SomeView
  .rotationEffect(.degrees(90))
  .animation(nil)
  .scaleEffect(1.5)
  .animation(.spring())

물론 위의 애니메이션은 순차가 아니라 동시에 발동한다.

withAnimation의 클로저 활용

기존 UIKit 등에서 쓰던 뷰 애니메이션과 비슷한 용도다.

withAnimation {
    someSwitch.toggle()
}

알고리즘도 바꿀 수 있다.

withAnimation(.spring()) {
    someSwitch.toggle()
}

아래는 버튼과 섞은 좀 더 복잡한 예제다.

Button("Animate..!") {
     withAnimation {
         self.degrees += 360
     }
}
.padding(20)
.background(Color.blue.opacity(0.8))
.foregroundColor(Color.white)
.rotation3DEffect(.degrees(degrees), axis: (x: 1, y: 1, z: 1))

transition

트랜지션 전용 메서드도 있다.

SomeView.transition(.move(edge: .top))

조합의 경우는 아래와 같은 식으로 할 수 있다.

SomeView.transition(
    AnyTransition
        .move(edge: .top)
        .combined(with: .opacity)
)

등장과 퇴장 애니메이션을 별도로 구현할 수도 있다.

extension AnyTransition {
    static var someTransitionName: AnyTransition {
        return .asymmetric(
            insertion:
                AnyTransition
                    .move(edge: .top)
                    .combined(with: .opacity)
            removal:
                AnyTransition
                    .scale
                    .combined(with: .opacity)
        )
    }
}

이 글을 링크하는 글들

❏ SwiftUI

SwiftUI의 소개와 관련된 글 정리 Updated on 2022년 11월 2일