How to create basic animations

 

Hacking with Swift 사이트의 강좌 번역본입니다.

 

[원문 : https://www.hackingwithswift.com/quick-start/swiftui/how-to-create-basic-animations]

 

How to create basic animations

 

SwiftUI는 animation() modifier으로 애니메이션을 기본적으로 지원합니다. 해당 modifier를 사용하기 위해서, 뷰의 다른 modifiers 뒤에 위치시키고, 원하는 종류의 애니메이션을 알려주면 됩니다.

 

예를들어, 다음 코드는 버튼을 누를때마다 확대(scale) 효과가 1씩 증가합니다.

struct ContentView: View {
    @State private var scale: CGFloat = 1

    var body: some View {
        Button(action: {
            self.scale += 1
        }) {
            Text("Tap here")
                .scaleEffect(scale)
                .animation(.linear)
        }
    }
}

 

원하는 경우 애니메이션에 정확한 시간을 지정할 수 있습니다. 예를들어, 다음은 2초동안 확대 효과를 애니메이션합니다.

Text("Tap here")
    .scaleEffect(scale)
    .animation(.linear(duration: 3))

 

간단한 linear animations 대신에, .easeIn, .easeOut, .easeInput를 지정할 수 있거나 .timingCurve을 사용해서 원하는 제어 포인트를 지정할 수 있습니다.

 

예를들어, 다음은 확대 효과를 시작은 느리고 빨라지게 애니메이션합니다.

Text("Tap here")
    .scaleEffect(scale)
    .animation(.easeIn)

 

2D와 3D 회전(rotation), 불투명도(opacity), 테두리(border), 등등과 같은 많은 다른 modifiers를 애니메이션 할 수 있습니다. 예를들어, 다음은 버튼을 누를때마다 회전하고 테두리가 증가하는 버튼을 만듭니다.

struct ContentView: View {
    @State private var angle: Double = 0
    @State private var borderThickness: CGFloat = 1

    var body: some View {
        Button(action: {
            self.angle += 45
            self.borderThickness += 1
        }) {
            Text("Tap here")
                .padding()
                .border(Color.red, width: borderThickness)
                .rotationEffect(.degrees(angle))
                .animation(.easeIn)
        }
    }
}