SwiftUI animations(애니메이션)

SwiftUI에서 animations에 대해서 공부해보고자 한다. 

 

animation(_:value:)

Applies the given animtaion to this view when the specified value changes.

animation 메소드를 통해 호출한 view와 하위 view에 animation을 적용할 수 있다.

뷰에 animation()을 추가하면 기본 시스템 애니메이션을 사용하여 해당 보기에 발생하는 모든 변경 사항을 자동으올 

애니메이션화 할 수 있다. 

 

애니메이션화를 한다는 것은 시작상태에서 종료상태로 해당 view의 상태를 변화시키는 것이다. 

이를 위해선 해당 view가 시작상태와 종료상태를 가지고 있어야 한다. 

 

 

.easeOut, .easeIn 등을 사용하여 애니메이션의 유형을 선택할 수 있다. 

.animation(.easeOut, valuse: animationAmount)

animation의 옵션은 3가지가 있다. 

• easeIn - 애니메이션의 시작 부분이 fade in된다.(점점 빨리지며 시작되는 효과)
• easeOut - 애니메이션의 끝 부분이 fade out된다.(점점 늦어지며 종료되는 효과)
• easeInOut - easeIn, easeOut 2가지 애니메이션이 모두 적용된 상태

예시

struct animationPractice: View {
    @State var ShapeColor: Color
    @State var ShapeOpacity: Double
    
    @State var isAnimating: Bool = false
    
    var body: some View {
        ZStack {
            Circle()
                .stroke(ShapeColor.opacity(ShapeOpacity), lineWidth: 40)
                .frame(width: 260, height: 260, alignment: .center)
                .offset(x: isAnimating ? 0 : UIScreen.main.bounds.size.width)
                .animation(.easeIn(duration: 1), value: isAnimating)
                
        } //: ZSTACk
        .onAppear(perform: {
            isAnimating = true
        })
    }
}

isAnimating 이라는 변수를 선언하고 onAppear을 통해서 해당 뷰가 Appear 됐을 때 false -> true로 바뀌며 애니메이션이 실행된다.

UIScreen.main.bounds.size.width

이 코드는 해당 디바이스의 너비 값을 나타낸다. 

따라서 offset을 통해 우측 끝에서 현재 위치(0)까지 1초 동안 움직이는 animation을 만들었다. 

 

반응형

.delay

애니메이션을 실행하기 전 delay 값만큼 기다린 후 실행

.animation(
    .easeInOut(duration: 2)
        .delay(1),
    value: animationAmount
)

예시

            Circle()
                .stroke(ShapeColor.opacity(ShapeOpacity), lineWidth: 80)
                .frame(width: 260, height: 260, alignment: .center)
                .offset(y : isAnimating ? 0 : -UIScreen.main.bounds.size.height)
                .animation(
                    .easeIn(duration: 1)
                        .delay(1) //1초 뒤 애니메이션 수행
                    , value: isAnimating)

 

.repeatForever()

animation이 계속 반복해 실행됨

 

예시

            Circle()
                .stroke(ShapeColor.opacity(ShapeOpacity), lineWidth: 100)
                .frame(width: 260, height: 260, alignment: .center)
                .offset(x : isAnimating ? 0 : -UIScreen.main.bounds.size.width)
                .animation(
                    .easeIn(duration: 1)
                        .repeatForever()
                    , value: isAnimating)

 

.repeatCount()

앞에서 본 repeatForever처럼 계속 반복해 실행하는 것이 아닌 count 횟수만큼만 반복함

 

예시

            Circle()
                .stroke(ShapeColor.opacity(ShapeOpacity), lineWidth: 60)
                .frame(width: 260, height: 260, alignment: .center)
                .offset(y: isAnimating ? 0 : UIScreen.main.bounds.size.height)
                .animation(.easeIn(duration: 1)
                            .repeatCount(4)
                           , value: isAnimating)

 

이처럼 다양하게 animation 효과를 줄 수 있다는 것을 알게 되었다. 

참고

https://developer.apple.com/documentation/swiftui/view/animation(_:)-7mq1i 

Apple Developer Documentation

https://www.hackingwithswift.com/books/ios-swiftui/customizing-animations-in-swiftui

Customizing animations in SwiftUI - a free Hacking with iOS: SwiftUI Edition tutorial

https://velog.io/@sjoonb/SwiftUI-Animation-View-Transition

SwiftUI - animation(_:)