animation(_:)

Applies the given animation to all animatable values within this view.

definition of animation from Apple.

animation(_:) 메소드를 호출한 view 를 포함한 모든 하위 view 에 주어진 animation 을 적용한다.

Declaration

func animation(_ animation: Animation?) -> some View

Discussion

animating 을 한다는 것은, 시작상태에서 종료상태로 해당 View 의 상태를 변화시키는 것이다. 이를 위해선 해당 View 가 시작상태와 종료상태를 가지고 있어야 한다. numeric value를 가지고 있는 대부분의 property들은 애니메이션으로 활용 가능하다.

ex) size, postion, rotation, color 등

활용 방법

easeIn, easeOut and easeInOut

struct ContentView: View {
   @State private var isTabbed = false
   
   var body: some View {
       VStack {
           Spacer()
           Text("Hello, world!")
               .font(.largeTitle)
               .fontWeight(.heavy)
               .padding()
               .rotationEffect(.degrees(isTabbed ? 360 : 0))
               .animation(.easeIn(duration: 1))
           Spacer()
           Text("Hello, world!")
               .font(.largeTitle)
               .fontWeight(.heavy)
               .padding()
               .rotationEffect(.degrees(isTabbed ? 360 : 0))
               .animation(.easeOut(duration: 1))
           Spacer()
           Text("Hello, world!")
               .font(.largeTitle)
               .fontWeight(.heavy)
               .padding()
               .rotationEffect(.degrees(isTabbed ? 360 : 0))
               .animation(.easeInOut(duration: 1))
           Spacer()
       }
       .onTapGesture {
           self.isTabbed.toggle()
       }
   }
}

위에서부터 차례대로 easeIn, easeOut, easeInOut 옵션이 적용되어 있다.

• easeIn - 애니메이션의 시작 부분이 fade in 된다. 즉, 위에 예시에서는 애니메이션 시작 무렵 회전의 양이 점점 커진다. (점점 빨라지며 시작되는 효과)
  duration: Double - (animation 이 진행되는 시간 (초))
• easeOut - 애니메이션의 끝 부분이 fade out 된다. 즉, 위에 예시에서는 애니메이션의 마지막 무렵 회전의 양이 점점 줄어든다. (점점 늦어지며 종료되는 효과)
  duration: Double
• easeInOut - easeIn, easeOut 2가지 에니메이션이 모두 적용된 상태이다.
  duration: Double

spring 및 상위뷰의 animation 과 별개로 뷰의 animation 을 설정하기 (덮어 쓰기)

struct ContentView: View {
   @State private var isTabbed = false
   
   var body: some View {
       VStack {
           Spacer()
           Text("Hello, world!")
               .font(.largeTitle)
               .fontWeight(.heavy)
               .padding()
               .rotationEffect(.degrees(isTabbed ? 360 : 0))
               .animation(.spring(response: 1, dampingFraction: 0.5))
           Spacer()
           Text("Hello, world!")
               .font(.largeTitle)
               .fontWeight(.heavy)
               .padding()
               .rotationEffect(.degrees(isTabbed ? 360 : 0))
               .animation(.none)
           Spacer()
           Text("Hello, world!")
               .font(.largeTitle)
               .fontWeight(.heavy)
               .padding()
               .rotationEffect(.degrees(isTabbed ? 360 : 0))
               .animation(.easeOut(duration: 1))
           Spacer()
       }
       .animation(.easeInOut(duration: 1))
       .onTapGesture {
           self.isTabbed.toggle()
       }
   }
}

세가지의 Text 의 상위뷰인 VStack 에 easeInOut animation 이 적용되어 있지만, easeInOut animation 이 아닌, 하위뷰에 각각 적용되어 있는 animation 이 실행되는 것을 확인할 수 있다.

상위뷰 보다는 하위뷰에, 하위뷰에서도 더 먼저 선언된 애니메이션이 적용이 된다. 안쪽에서 바깥쪽으로의 방향의 순서로 우선순위가 적용이 되는 것이라고 볼 수 있을 것 같다.

• none - 아무런 애니메이션도 실행하지 않는다.
• spring - 스프링 효과
  response: Double - 빳빳함(?)의 정도, 약 한번 튕기고 완료된 상태로 돌아오는데 까지 걸리는 시간 (초)
  dampingFractoin: Double - 튕기는 정도, 0~1 사이의 값 입력