필수 요소

삼항연산자를 활용해서 애니메이션을 만들기 위해서는 4가지 필수요소가 있습니다.

1. 애니메이션의 trigger 역할을 해줄 @State 변수
2. 애니메이션하고 싶은 view property (혹은 modifier)에 trigger 변수를 활용해서 3항 연산자로 정의
3. 애니메이션의 종류
4. 애니메이션을 시작하고자 하는 타이밍

예시

좌상단을 기준으로 30도씩 회전하고 투명도가 0 ~ 1로 변화하는 나뭇잎 모양의 이미지를 만들어 봅시다.

struct Animation: View {
    
		//1. 트리거 변수
    @State var rotateLeaf = false
    @State var transparency = false
    
    var body: some View {
        Image(systemName: "leaf")
            .font(.system(size: 100))
						//2. 3항연산자
            .rotationEffect(.degrees(rotateLeaf ? -15 : 15), anchor: .topLeading)
            .opacity(transparency ? 1 : 0)
						//3. 애니메이션의 종류
            .animation(.spring().repeatForever(autoreverses: true).speed(3.0))
						//4. 애니메이션 시작 타이밍
            .onAppear {
                transparency.toggle()
                rotateLeaf.toggle()
            }
    }
    
}

원리 설명

애니메이션의 대상은 “숫자"로 나타내는 property 이어야 합니다.

//🚫 이것은 string이기 때문에 animation의 대상이 되지 않음
Text(systemName: "leaf")

//✅ 각도와 투명도는 animation으로 숫자로 표현된 property이므로 애니메이션의 대상이 됩니다.
.rotationEffect(.degrees(rotateLeaf ? -15 : 15), anchor: .topLeading)
.opacity(transparency ? 1 : 0)

.animation을 적용하면 View에 property 변화가 있을 때 해당 정의된 애니메이션에 맞추어 property 변화가 보여집니다

//👉 property가 변화하면 spring 방식으로, 계속 반복하고, 속도는 3.0으로
.animation(.spring().repeatForever(autoreverses: true).speed(3.0))

onAppear에서 property를 변경하면 이미지가 화면에 뜨자마자 property의 변경이 있습니다. 따라서 바로 애니메이션이 실행됩니다.

.onAppear {
    transparency.toggle()
    rotateLeaf.toggle()
}