[SwiftUI] Animation

• animation 모디파이어 사용

struct AnimationBasics: View {
    @State private var position = CGPoint.zero
    
    var body: some View {
        VStack {
            Circle()
                .foregroundColor(.blue)
                .frame(width: 50, height: 50)
                .position(position)
                .offset(x: 50, y: 50)
                .animation(.default, value: position) //value값의 변화에 따라
            
            Spacer()
            
            Button("Animate") {
                position = position == .zero ? CGPoint(x: 300, y: 500) : .zero
            }
            .padding()
        }
    }
}

애니메이션 타입

• 보통은 easeInOut 많이 사용
• 애니메이션 실행 시간을 직접 지정하고 싶다면 easeInOut(duration:) 사용
  • duration 전에 다른 애니메이션을 실행하면 기존 애니메이션 실행 도중 위치에서 시작됨

.animation(.easeInOut(duration: 3), value: position)

애니메이션 커스터마이징

• 모디파이어를 뷰가 아닌 애니메이션에 추가해야 함

지연 시간

• .delay: 애니메이션 시작 시점 지연

실행 시간

.animation(.easeInOut(duration: 3).speed(2), value: position)

• 애니메이션이 3/2인 1.5초동안 실행됨
  • 즉, 상대적인 실행 속도 조정

Explicit Animation

• 속성이 바뀌는 시점마다 항상 애니메이션이 실행되는데, 원하는 시점에 제한적으로 실행을 원하는 경우 사용
• 특정 시점이나 원하는 조건에 따라서 애니메이션 추가 가능

withAnimation 메소드 사용

Button("Animate") {
                    withAnimation(.linear){
                        position = position == .zero ? CGPoint(x: 300, y: 500) : .zero
                    }
                }

Repeat Animation

• 애니메이션을 반복적으로 실행
• repeatCount 모디파이어 사용 시 유한적 횟수만큼 애니메이션 반복
• repeatForever 모디파이어 사용 시 무한히 애니메이션 반복

@State private var animating = false

var finiteRepeat: Animation {
        .linear(duration: 1)
        .repeatCount(3, autoreverses: false)//autoreverse 기본값 true
    }
    
 var infiniteRepeat: Animation {
        .linear(duration: 1)
        .repeatForever(autoreverses: false)
    }   
    
 var body: some View {
        VStack {
            Image(systemName: "arrow.2.circlepath")
                .resizable()
                .foregroundColor(.blue)
                .aspectRatio(contentMode: .fit)
                .frame(width: 200, height: 200)
                .rotationEffect(.degrees(animating ? 360 : 0))
                .animation(finiteRepeat, value: animating)
            
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .onAppear {
            animating = true            
        }
    }

• autoreverse: true 의 경우(기본값)
  

• autoreverse: false의 경우
  

Spring Animation

Circle()
                .foregroundColor(.blue)
                .frame(width: 50, height: 50)
                .position(position)
                .offset(x: 50, y: 50)
                .animation(.spring(response: 0.3, dampingFraction: 0.3, blendDuration: 0))

• 마지막에 살짝 튕겨오르는 애니메이션
• spring 모디파이어 사용
• response 값이 작을수록 짧은 시간내에 damping
• damping 값이 작을수록 멈추지 않고, 클수록 스프링 효과 없이 최종 위치에서 바로 끝남(0~1)
• blendDuration: 두 개 이상의 스프링 애니메이션을 동시에 추가했을 때 사용(기본값 0)
  
• 사용성이 과해 보통 이렇게까지 사용하지 않는다.

interpolatingSpring

• 물리 모델을 이용하여 스프링 효과 사용 가능
• 자주 사용하진 않음