100 days of SwiftUI - Day32

이번 공부는 애니메이션 이다. 

공부하다보니 옛날 플래쉬가 생각난다.

역시 알고리즘 보다는 움직이는거 짜는게 더 재밌다 크크크

 

애니메이션은 암시적(implicit), 명시적(explicit)  선언 방법이 있다.

명시적인거는 WithAnimation 키워드를 쓰는거고, 이외는 몽땅 암시적이라고 보면 된다.

암시적인 방법을 이용하는거는 modifier를 쓰거나, State변수를 바인딩해서 쓰는 방법이 있다.

 

멋찐? 애니메이션과 함께 명시적, 암시적 선언도 같이 봐보자!

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

    var body: some View {
        Button("Tap Me") {
            animationAmount += 1
        }
        .padding(50)
        .background(.red)
        .foregroundStyle(.white)
        .clipShape(.circle)
        .scaleEffect(animationAmount)
        .animation(.default, value: animationAmount) //암시적, 기본 애니메이션 적용 스프링임 멋짐..
    }
}


.blur(radius: (animationAmount - 1) * 3) //점점 투명해지는거 추가

.animation(.spring(duration: 1, bounce: 0.9), value: animationAmount) //디폴트 애니메이션하고 비슷 값은 조정 필요

.animation(.easeInOut(duration: 2), value: animationAmount) //커졌다 작아졌다

.animation(
    .easeInOut(duration: 2)
        .delay(1),  //1초 딜레이 후 커졌다 작아졌다
    value: animationAmount
)

.animation(
    .easeInOut(duration: 1)
        .repeatCount(3, autoreverses: true),  //3번반복 뒤로감아졌다가 도 포함
    value: animationAmount
)

.animation(
    .easeInOut(duration: 1)
        .repeatForever(autoreverses: true), //무한 반복
    value: animationAmount
)

// 어디선가 본듯한 버튼에서 물결파동 1라인이 나오듯이 통통거리는 애니메이션
// onAppear 로 로딩되면 바로 애니메이션 시작!
Button("Tap Me") {
    // animationAmount += 1
}
.padding(50)
.background(.red)
.foregroundStyle(.white)
.clipShape(.circle)
.overlay(
    Circle()
        .stroke(.red)
        .scaleEffect(animationAmount)
        .opacity(2 - animationAmount)
        .animation(
            .easeInOut(duration: 1)
                .repeatForever(autoreverses: false),
            value: animationAmount
        )
)
.onAppear {
    animationAmount = 2
}

// 아래같이 다른 컴포넌트인 Stepper의 바인딩변수에 animation함수를 호출해서 버튼 View에 애니메이션을 줄수도 있다.
// 이건좀 신기...
struct ContentView: View {
    @State private var animationAmount = 1.0

    var body: some View {
        VStack {
            Stepper("Scale amount", value: $animationAmount.animation(), in: 1...10)

            Spacer()

            Button("Tap Me") {
                animationAmount += 1
            }
            .padding(40)
            .background(.red)
            .foregroundStyle(.white)
            .clipShape(.circle)
            .scaleEffect(animationAmount)
        }
    }
}

//스테퍼를 아래 같이 해서 추가적으로 애니메이션을 줄수 있따.
Stepper("Scale amount", value: $animationAmount.animation(
    .easeInOut(duration: 1)
        .repeatCount(3, autoreverses: true)
), in: 1...10)

//명시적인 animation 선언 방법
struct ContentView: View {   
	@State private var animationAmount = 0.0
    var body: some View {
        Button("Tap Me") {
            withAnimation(.spring(duration: 1, bounce: 0.5)) { //추가 애니메이션인 이자리에!
    			animationAmount += 360 //돌리는거니까 360 주는거!
			}
        }
        .padding(50)
        .background(.red)
        .foregroundStyle(.white)
        .clipShape(.circle)
        .rotation3DEffect(.degrees(animationAmount), axis: (x: 0, y: 1, z: 0)) //돌리기!
    }
}

 창의력이 부족하니 그냥 남들이 쓰는거 배껴쓸 예정 ㅡㅠㅡ