SwiftUI

SwiftUI Animation

Daesiker 2021. 2. 23. 14:03
반응형

withAnimation

swiftUI에서 기본적인 애니메이션 요소는 ease-in, ease-out이다.

 

Example1

import SwiftUI

struct ContentView: View {
    @State private var isButtonVisible = true
    
    var body: some View {
        VStack {
            Button(action: {
                withAnimation {
                    self.isButtonVisible.toggle()
                }
            }) {
                Text("Press Me")
            }
            
            if isButtonVisible {
                Button(action:{}) {
                    Text("Hidden Button")
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Button 컴포넌트에서 action 파라미터안에 withAnimation 속성을 활성화 시켜서 Boolean 값인 isButtonVisible의 값을 변경할 때마다 애니메이션이 생기게 만들었다. @State속성으로 바인딩되어 선언된 isButtonVIsible 변수는 true일 때 숨겨진 버튼이 나타나게 보여진다.

기본적으로 swiftUI의 애니메이션은 애니메이션 옵션을 지정하지 않으면 fade-in, fade-out 형식으로 애니메이션을 나타낸다.

 

 

Example2

import SwiftUI

struct ContentView : View {
    @State private var isButtonVisible = true

    var body: some View {
        VStack {
            Button(action: {
                self.isButtonVisible.toggle()
            }) {
                Text("Press me")
            }

            if isButtonVisible {
                Button(action: {}) {
                    Text("Hidden Button")
                }.animation(.easeInOut, value: isButtonVisible)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

animation 속성안에 어떤 애니메이션을 줄지 지정을 하면 원하는 형식대로 애니메이션 지정이 가능하다.

 

Animation()

바인딩된 변수안에는 animation이라는 메서드가 선언되어있는데 이것은 바인딩된 변수가 변경되어 View가 바뀌는 시점에 애니메이션을 적용하게 도와준다.

Example1

import SwiftUI

struct ContentView : View {
    @State private var isButtonVisible = true

    var body: some View {
        VStack {
            Toggle(isOn: $isButtonVisible.animation()) {
                Text("Show/Hide button")
            }

            if isButtonVisible {
                Button(action: {}) {
                    Text("Hidden Button")
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

바인딩된 변수에 animation() 옵션을 사용하여 애니메이션 값을 줄 수도 있다. animation() 메서드는 바인딩된 변수를 통한 View의 모든 변경사항에 대해 애니메이션을 적용시켜준다. 앞에 코드는 isButtonVisible에 값에 의해 버튼이 생성되는 코드가 있는데 버튼이 생성되고 사라지는 시점에 애니메이션을 적용시켜준다.

 

Example2

import SwiftUI

struct ContentView : View {
    @State private var isButtonVisible = true

    var body: some View {
        VStack {
            Toggle(isOn: $isButtonVisible.animation()) {
                Text("Show/Hide button")
            }

            if isButtonVisible {
                Button(action: {}) {
                    Text("Hidden Button")
                }.transition(.move(edge: .trailing))
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

transition() 메서드를 통해 애니메이션의 움직이는 방향, 크기 등을 조정할 수 있다. transition 메서드 안에는 AnyTransition 구조체를 파라미터로 받는다. move는 어느 방향으로 움직일지를 정해주며 Edge enum으로 지정 가능하다.

 

AnyTransition

한 장면에서 다른 장면으로 바뀌는 애니메이션을 수행할 때, 또는 다른 기능의 실행 시 사용하는 장면 전환 기술을 정의하는 구조체이다.

 

Instance Methods

— animation(Animation?) : transition에 직접적으로 애니메이션을 적용하는 함수이다.

— combined(with: AnyTransition) : 2가지 이상의 transition을 함께 사용할 수 있도록 도와주는 함수이다.

 

Props

— opacity : 투명도를 전환하는 효과이다.

— slide : 앞쪽 가장자리에서 이동하여 삽입하고 뒤쪽 가장자리 쪽으로 이동하여 제거하는 전환효과이다.

— scale : 확대 혹은 축소되어 전환하는 효과이다.

 

Type Methods

— move(edge: Edge) : 뷰의 지정된 가장자리쪽으로 이동하면서 전환하게 해주는 메서드이다.

— offset(CGSize) : 원하는 포인트까지 이동하면서 전환하는 메서드이다. 1개의 파라미터로 인자를 받는 경우와 x축과 y축의 파라미터를 받는 경우가 있다.

 

Example

import SwiftUI

extension AnyTransition {
    static func moveAndScale(edge: Edge) -> AnyTransition {
        AnyTransition.move(edge: edge).combined(with: .scale(scale: 10))
    }
}

struct ContentView : View {
    @State private var isButtonVisible = true

    var body: some View {
        VStack {
            Toggle(isOn: $isButtonVisible.animation()) {
                Text("Show/Hide button")
            }

            if isButtonVisible {
                Button(action: {}) {
                    Text("Hidden Button")
                }.transition(.moveAndScale(edge: .trailing))
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

extension 키워드를 통해 AnyTransition 구조체의 새로운 함수를 채택하여 edge 포인트로 이동하면서 확대되어 사라지는 애니메이션 함수 moveAndScale를 정의하였다.

 

 

 

Uploaded by Notion2Tistory v1.1.0

반응형