SwiftUI 기초 - State, onTabGesture, withAnimation

 

 

 

@State 키워드는 변수 앞에 사용할 수 있고, 해당 변수의 값이 변할 때 UI가 자동으로 업데이트 된다.

 

@onTabGesture는 Button이 아닌 다른 Component에 클릭 이벤트를 가능하게 한다.

 

@withAnimation으로 매우 간단하게 기본적인 애니메이션을 구현해 보자.

 

    @State var weight: Float = 30
    @State var circleToggle: Bool = false

    var body: some View {
        VStack {
            Image(systemName: "circle")
                .resizable()
                .foregroundColor(.yellow)
                .frame(width: CGFloat(weight), height: CGFloat(weight))

            HStack {
                Text("중량")
                    .padding()
                Slider(value: $weight, in: 0...100, step: 5)
                    .padding()
                Text(String(weight) + "kg")
                    .padding()
            }
                .padding(circleToggle ? 50.0 : 10.0)
                .background(circleToggle ? Color.pink : Color.yellow)
                .onTapGesture {
                    withAnimation {
                        self.circleToggle.toggle()
                    }
                }

            Button(action: {
                self.circleToggle.toggle()
            }) {
                Text("클릭 해보세요")
            }
	}
}

 

아래 동영상을 보면, 

Animation이 없는 버튼과  "withAnimation"  단 한 줄이 추가된 onTabGesture의 동작의 차이를 확인할 수 있다.

 

 

SwiftUI_State_Animation.mp4

0.84MB