SwiftUI : Animation #2

Animation #1강

Animation #2

animation stack 컨트롤

다음 예제는 클릭시 clipShape를 통해 배경색과 버튼 모양들이 변하는 코드를 작성하도록 하겠습니다.

 

우선 @State 에 bool 값을 할당해 준 후, 버튼 액션을 toggle로 설정해줍니다.

struct ContentView: View {
    
    @State private var animationAmount = false

    var body: some View {
        Button("Tap Me") {
            self.animationAmount.toggle()
        }
        //background 보다 frame이 먼저 와야 한다.
        .frame(width: 200, height: 200)
        .background(Color.blue)
        .foregroundColor(.white)
    }
}

이제 background 와 foregroundColor에 삼항연산자를 넣어줘야 하는데 이 연산자로 인해서 버튼을 클릭할 때, animationAmount가 true이면 '초록색'  false 이면 '노란색' 이 되로록 만들어 보겠습니다. 글씨색 또한 같은 방법으로 수정해주시고, 밑에 Animation 효과를 부여해주세요.

        Button("Tap Me") {
            self.animationAmount.toggle()
        }
        .frame(width: 200, height: 200)
        .background(.animationAmount ? Color.green : Color.yellow)
        .foregroundColor(.animationAmount ? Color.white : Color.black)
        //Mark: 애니메이션 효과
        .animation(.default)
    }
}

이제 색만 변하게 하는게 심심하니 clipShape 를 추가해줘서 모양까지 바뀌게 하고싶은데 이것도 삼항연산자 사용해보겠습니다.

TIP

 

 

주의
animation 앞에 추가해야합니다! (이미지 참조)

이제 재미있는 부분입니다. 여러 animation() 수정자를 적용하면 각 수정자가 다음 Animation까지 모든 것을 제어합니다.

 

이를 통해 모든 속성에 대해 균일하지 않고 모든 종류의 다른 방식으로 상태 변경을 Animation 할 수 있습니다.

 

예를 들어, 기본 Animation으로 색상을 변경할 수 있지만, 클립 모양에 보간 스프링을 사용할 수 있습니다.

struct ContentView: View {
    @State private var animationAmount: Bool = false
    
    var body: some View {
        Button("Tap Me") {
            self.animationAmount.toggle()
        }
        .frame(width: 200, height: 200, alignment: .center)
        .background(animationAmount ? Color.green : Color.yellow)
        .foregroundColor(animationAmount ? Color.white : Color.black )
        .animation(.default)
        .clipShape(RoundedRectangle(cornerRadius: animationAmount ? 60 : 0))
        /* 위에 이미 애니메이션 효과를 줬지만, 애니메이션 효과를 한번 더 주면서 
                                       클릭시 덤핑 하는 효과를 한번 더 준다 */
        .animation(.interpolatingSpring(stiffness: 50, damping: 1))
    }
}

만약, 버튼을 클릭하여 Animation이 적용되고 있는 도중 버튼을 한번더 클릭해서 취소 시키고 싶다고 버튼을 클릭하면,

.animation(.default) 값은 취소될 때에도 에니메이션 효과를 주면서 바뀌지만,  .animation(nil) 값을 주면 바로 중단됩니다.

.animation(nil)

뷰가 표시되고 숨겨지는 효과 만들기 (IF 문)

SwiftUI의 가장 강력한 기능 중 하나는 뷰가 표시되고 숨겨지는 방식을 사용자 지정하는 기능입니다. 이것은 If문을 활용하여 Animation효과를 보여줄 수 있습니다. 우선 해볼것은 버튼을 누를때 빨간색 사각형이 보이게 화면 코드를 작성해야합니다.

struct ContentView: View {                       
   @State private var isShowingRed = false
    var body: some View {
        
        VStack {
            Button("Tap Me!") {
                self.isShowingRed.toggle()
            }
            //만약 isShowingRed 일 때, 빨간색 사각형
            if isShowingRed {
                Rectangle()
                    .fill(Color.red)
                    .frame(width: 200, height: 200)
            }
        }
    }
}

이렇게만 작성하면 "Tap Me!" 를 눌렀을때 빨간상자가 나타나게 됩니다. 여기서 버튼에 애니메Animation withAnimation 효과를 추가해봅시다.

VStack {
            Button("Tap Me!") {
                withAnimation {
                    self.isShowingRed.toggle()
                }

자, 약간의 Animation 효과를 받을 수 있지만, .transition(.scale) 을 if문 frame 밑에 추가한다면 각각 다른  화면을 확인할 수 있습니다.

if isShowingRed {
                Rectangle()
                    .fill(Color.red)
                    .frame(width: 200, height: 200)
                    .transition(.scale)

왼: 아무효과를 안준 상태  /  가운데: withAnimation()효과  /  오: .transtition(.scale)효과

 

전체코드

struct ContentView: View {
    
    @State private var isShowingRed = false
    
    var body: some View {
        
        VStack {
            Button("Tap Me!") {
                withAnimation {
                    self.isShowingRed.toggle()
                }
            }
            if isShowingRed {
                Rectangle()
                    .fill(Color.red)
                    .frame(width: 200, height: 200)
                    .transition(.scale)
            }
        }
    }
}

 

읽어주셔서 감사합니다🤟

 

이 글도 읽어보세요

SwiftUI : Animation #3