SwiftUI - 애니메이션

 애니메이션은 그것이 발생하는 어떤 계기가 있기 전의 상태, 동작 중인 상태, 동작이 끝난 상태 3가지로 구분해서 생각할 수 있다. 즉, 시작과 끝 사이의 변화값이 있다는 것으로 중간값이 없는 Bool값으로는 애니메이션을 사용할 수 없다. 

 

 

animation 함수

 struct Example: View {
    @State private var blur: Bool = false
    @State private var reduction: Bool = false
    
    var body: some View {
      Image("Life")
        .blur(radius: blur ? 10 : 0)
        .animation(nil)		// 이전의 함수들에는 애니메이션을 적용하지 않고
        .scaleEffect(reduction ? 0.2 : 1)
        .animation(.default)		// scaleEffect에만 애니메이션을 적용한다.
        .onTapGesture {
          self.blur.toggle()
          self.reduction.toggle()
      }
    }
  }

SwiftUI에서는 애니메이션 기능을 비교적 쉽고 깔끔하게 구현할 수 있다. animation 함수는 특정 뷰에 애니메이션을 사용하겠다고 명시하는 방법이다. animation 함수는 이전에 위치한 애니메이션이 가능한 함수들에 반영된 수식어를 적용한다. 다음과 같은 방법으로 특정한 함수들에만 애니메이션을 적용할 수도 있다. 

 

 

 

 

 

 

 

withAnimation 함수

 

 struct Example: View {
    @State private var blur: Bool = false
    @State private var reduction: Bool = false
    
    var body: some View {
      Image("life")
        .blur(radius: blur ? 10 : 0)
        .scaleEffect(reduction ? 0.5 : 1)
        .onTapGesture {
          withAnimation {
            self.reduction.toggle()		// reduction이 바뀌면 애니메이션 적용
          }
          self.blur.toggle()		// blur에는 적용 안한다
      }
    }
  }

 

 withAnimation을 사용하면 특정 값이 변화할 때에 값이 포함된 모든 뷰에 동작한다. 즉, 함수가 아니라 값을 지정한다. 이에 animation 함수는 암시적 애니메이션,withAnimation을 명시적 애니메이션이라고도 표현한다고 한다.  

 

 

 

 

 

 

애니메이션 타이밍

애니메이션 함수들에는 매개변수로 애니메이션 속도를 조절할 수 있는 옵션들을 줄 수 있다. 다음의 옵션들은 시작부터 끝까지 이동하는 지점과 시점이 고정된다. 

타입	특징
.default	매개변수 생략시 적용되는 기본값, 현재는 easeInOut으로 사용된다함
.linear(duration: (Double))	처음부터 일정한 속도로 진행한다. 실제로는 조금 부자연스럽게 느껴지기 때문에 반복되는 애니메이션이 아닌 이상 자주 쓰이지는 않는다.
.easeIn	linear와 비교해 처음에는 느리게 시작했다가 점점 빠르게 움직인다. 갑작스럽게 끝내는 느낌을 줄 수 있어 화면 내보다 화변 밖 사라지는 뷰에 사용하기 적당하다.
.easeOut	빠르게 시작하여 즉각적인 반응을 하는 느낌을 주고, 끝에서는 천천히 진행되어 자연스러운 감속 효과를 준다.
.easeInOut	easeIn과 easeOut의 결합.  일반적으로 가장 많이 사용하게 되는 유형이다.
.timingCurve((x0:(Double), y0:(Double)),  (x1:(Double), y1:(double)))	매개변수로 두개의 좌푯값 ((x0, y0), (x1, y1)) 을 줌으로써 타이밍을 설정할 수도 있다.

 

 .animation(Animation.default.speed(2).repeatCount(5, autoreverses: true))

 

다음과 같이 타이밍과 관련하여 추가로 4가지 인스턴스 메서드를 사용할 수 있다. 

 

이름	특징
.delay(_ delay: Double)	해당 시간만큼 애니메이션을 지연시킨 후 수행
.speed(_ speed: Double)	지정 배율만큰 곱한 속도로 애니메이션을 진행
.repeatCount(_ repeatCount: Int,_ autoreverse: Bool)	일정횟수만큼만 반복, autoreverses를 true로 하면 수행되기 전과 후의 오가는 모습을 볼 수 있다.
.repeatForever(_ autoreverses: Bool)	무한 반복

 

 

 

 

스프링 애니메이션 

// 스프링 애니메이션
.animation(.spring(response: 0.24, dampingFraction: 0.615, blendDuration: 0))

Spring()

스프링 애니메이션을 이용하면 목적 지점에서 진동 효과를 효과를 주어 좀 더 동적인 애니메이션을 연출할 수 있다. 매개변수는 다음과 같다.

 

response 

애니메이션 지속 시간에 대한 근사치를 나타낸다. 스프링의 강성에도 관계가 있으며 0에 가까우면 완전 단단한 스프링으로 대화형 애니메이션에 사용하기 적합하다. 강성과 관계가 있으므로 dampingFraction과도 연관이 있다. 

기본값은 0.55라고 한다

 

dampingFraction 

스프링 애니메이션의 진동 수준을 결정짓는 값. 1이면 진동하지 않으면서 response값에 그대로 멈추고, 1보다 작으면 진동이 생기며 0에 가까울수록 진동이 커진다. 0을 넣으면 진동 애니메이션이 무한히 지속된다. -를 넣으면 진동이 점점 심해진다.  1보다 크면 도착시간도 길어지고 진동도 하지 않는다. 

기본 값은 0.825라고 한다. 

 

blendDuration

dampingFraction에 원하는 response값이 안나올 때에 이를 보간하기 위해 사용한다는데 실제로 활용되지는 않는다고 한다. 

 

 

 

.interactiveSpring()

spling()과 동일하지만 기본 옵션이 다르다. response값이 0.15로 대화형 애니메이션에 적합하게 정의해둔 것 뿐이다.

 

 

interplatingSpring()

interpolatingSpring은 물리 모델링에 기반한 값을 더욱 세밀하게 다룰 수 있도록 만들어진 옵션이다.

mass 

 현실의 무거운 용수철, 가벼운 용수철의 차이를 떠올리면 좋을것 같다. 작을수록 빠르게 움직이지만 반동이 약하고, 클수록 느리지만 반동이 커진다.

기본값은 1이다.

 

 

stiffness

탄성이 부족한 용수철, 탄탄한 용수철을 떠올리면 좋을 것 같다. 값이 작으면 탄성이 부족한 늘어진 용수철, 크면 탄성이 큰 빠르게 요동치는 용수철이라 생각하면 된다. 

 

 

dampling 

마찰력. 값이 작을수록 진동이 심하고, 클수록 약해진다. spring()의 damplingFraction과 같지만 0 이하 값을 허용하지 않는다. 

 

 

initialVelocity 

애니메이션 시작할 때 초기에 가해지는 속도.