Swift 기초부터 차근차근! (10) - animation 사용해서 인사하기

오늘은 animation을 사용하여 화면을 풍부하게 꾸며보겠습니다.

일단 구상할 화면은 손 모양의 이모지를 Hello 버튼을 누르면 이모지가 움직이면서 손인사하는 그런 모습을 보여주려고 합니다.

일단 화면에 손모양의 이모지를 불러옵니다.

struct ContentView: View {

    var body: some View {

        Image(systemName: "hand.raised.fill")
            .resizable()
            .frame(width: 60, height: 100)
    }
}

그리고 이 밑에 Hello 버튼을 추가해줍니다.

struct ContentView: View {
   
    var body: some View {

        Image(systemName: "hand.raised.fill")
            .resizable()
            .frame(width: 60, height: 100)
           
        Button(action: {}){
            Text("Hello!!")
                .font(.largeTitle)
                .padding()
        }
    }
}

이러면 밑에 버튼이 생긴 것을 확인할 수 있습니다.
action에 아직 아무것도 선언한 것이 없어서 아직은 눌러도 아무런 반응이 없습니다.

이제 버튼을 누를 때마다 변경되는 이모지의 각도를 변수로 선언해줍니다.
그리고 Image에 rotationEffect을 주어 돌리는 에니메이션 효과를 줍니다.
degree를 사용하여 돌아가는 각도를 설정해줍니다.
초기 각도는 -45도로 설정해주었습니다.

@State private var degree : Double = -30;


 var body: some View {

        Image(systemName: "hand.raised.fill")
            .resizable()
            .frame(width: 60, height: 100)
            .rotationEffect(.degrees(degree))
            
            Button(action: {}){
            Text("Hello!!")
                .font(.largeTitle)
                .padding()
        }
}

그리고 버튼이 누르면 각도가 변하면서 rotationEffect가 실행되도록 action에 withAnimation을 이용하여 코드를 작성해줍니다.
withAnimation에는 Animation에서 제공하는

.liner : duration에 제공된 시간 동안일정한 속도로 에니메이션 실행
.easeOut : 빠른 속도로 시작하여 끝으로 갈수록 느려짐
.easeIn : .easeOut과 반대로 느리게 시작하여 점점 빨라짐
.easeInOut : 느린 속도로 시작하여 중간까지는 점점빨리지고 끝으로 갈 수록 느려짐

를 파라미터로 제공해야 한다.

struct ContentView: View {
   
    @State private var degree : Double = -45;

    var body: some View {

        Image(systemName: "hand.raised.fill")
            .resizable()
            .frame(width: 60, height: 100)
            .rotationEffect(.degrees(degree))
        
        Button(action: {
            withAnimation(.linear(duration : 1)){
                self.degree = self.degree < 45 ? self.degree + 90 : self.degree - 90
            }
        }){
            Text("Hello!!")
                .font(.largeTitle)
                .padding()
        }
    }
}

그러면 아래처럼 버튼을 누를때마다 각도가 변경되면서 animation이 실행되는 것을 볼 수 있습니다.
마치 와이퍼같다 ㅎㅎ

이번에는 자동으로 인사하도록 구현하겠습니다.

처음에는 똑같이 이미지를 불러옵니다.

struct ContentView: View {
      
    var body: some View {

        VStack{
            Image(systemName: "hand.raised.fill")
                .resizable()
                .frame(width: 60, height: 100)
                
        }
    }
}

그리고 이미지의 rotationEffect를 적용해줍니다.
이미지의 초기 각도는 -45도로 설정해줍니다.
하지만 아직까지는 움직임에 변화가 없습니다.

struct ContentView: View {
   
   
    var body: some View {

        VStack{
            Image(systemName: "hand.raised.fill")
                .resizable()
                .frame(width: 60, height: 100)
                .rotationEffect(.degrees(-45))
        }
    }
}

이제 View가 처음 나타날 때를 기점으로 각도의 값을 변경할 수 있도록 변수를 선언해줍니다.
onAppear을 사용하여 View가 처음 나타낼 때 변수의 값을 변경시키고 변수의 값에 따라 각도를 변경할 수 있도록 삼항연산자로 degree의 값을 변화시킵니다.
그리고 이번에는 .animation을 이용하여 animation의 설정을 지정해줍니다.

struct ContentView: View {
   
    @State private var view : Bool = true;
   
    var body: some View {

        VStack{
            Image(systemName: "hand.raised.fill")
                .resizable()
                .frame(width: 60, height: 100)
                .rotationEffect(.degrees(view ? -45 : 45))
                .animation(.linear(duration: 1).repeatForever(autoreverses : true))
        }
        .onAppear(){
            self.view.toggle()
        }
    }
}

repeatForever은 animation을 계속 반복해서 실행시킬 때 사용되는 메소드입니다.

autoreverses : false
animation이 끝나면 바로 초기값으로 돌아옴

autoreverses : true
animation이 끝나도 초기값으로 천천히 돌아옴

오늘은 여기까지!