21. Animation

Animation

---

Apple Developer Documentation

struct AnimationView: 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(.easeIn)

           Spacer()

           Button(action: {
              self.position = self.position == .zero ? CGPoint(x: 300, y: 300) : .zero
           }, label: {
              Text("Play")
           })
           .padding()
        }
    }
}

Animation을 적용할 View에 'animation' modifier를 추가하고 원하는 Animation 방식을 전달하면 된다.
왼쪽이 Animation을 적용하기 전, 오른쪽이 Animation을 적용한 이후다.
기호에 따라 지연이나 속도를 변경해야 할 경우가 있는데 방식은 다음과 같다.

struct AnimationView: 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(.easeIn(duration: 3).repeatCount(3).speed(3))

           Spacer()

           Button(action: {
              self.position = self.position == .zero ? CGPoint(x: 300, y: 300) : .zero
           }, label: {
              Text("Play")
           })
           .padding()
        }
    }
}

이 경우 modifier가 아니므로 삽입 위치에 주의해야 한다.
View의 modifier가 아닌 animation의 메서드로 체이닝 해 사용한다.
사용 가능한 속성은 다음과 같다.

• delay
  지연 시간을 추가한다.
• repeatCount
  반복 횟수를 추가한다.
• repeatForever
  영원히 반복한다.
  autoreverse  파라미터를 추가해 시작했던 지점으로 되감기 할지를 선택할 수 있다.
• speed
  animation의 재생 속도를 결정한다.

 

Explict Animation

Apple Developer Documentation

struct AnimationView: 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)

          Spacer()

          HStack {
             Button(action: {
                 withAnimation() {
                     self.position = self.position == .zero ? CGPoint(x: 300, y: 400) : .zero
                 }
             }, label: {
                Text("Animate")
             })
             .padding()

             Button(action: {
                self.position = self.position == .zero ? CGPoint(x: 300, y: 400) : .zero
             }, label: {
                Text("Update")
             })
             .padding()
          }
       }
    }
}

Animation은 기본적으로 적용된 View에 변화가 생기는 경우,
이 변화를 표현하는 방식에 Animation을 적용하게 된다.

하지만 모든 변화가 아닌 특정 변화에 대해 Animation을 적용하고자 한다면,
withAnimation 메서드의 closure에 이를 전달해 해당 동작과 함께 Animation을 적용하는 것이 가능하다.
Animate 버튼과 Update 버튼은 똑같이 원의 위치를 변경하지만,
withAnimation을 사용해 변경한 경우에만 animation이 적용된 것을 확인할 수 있다.

Spring Animation

Apple Developer Documentation

struct AnimationView: View {
    @State private var position = CGPoint.zero

    var spring: Animation {
        Animation.spring(dampingFraction: 0.5)
    }

    var body: some View {
       VStack {
          Circle()
             .foregroundColor(.blue)
             .frame(width: 50, height: 50)
             .position(position)
             .offset(x: 50, y: 50)

          Spacer()

          HStack {
             Button(action: {
                 withAnimation() {
                     self.position = self.position == .zero ? CGPoint(x: 300, y: 400) : .zero
                 }
             }, label: {
                Text("Animate")
             })
             .padding()

             Button(action: {
                 withAnimation(spring) {
                     self.position = self.position == .zero ? CGPoint(x: 300, y: 400) : .zero
                 }
             }, label: {
                Text("Update")
             })
             .padding()
          }
       }
    }
}

springAnimation은 animation 끝에 반동을 줄 수 있다.
사용하는 생성자 파라미터는 다음과 같다.

• response
  반응 속도
• dampingFriction
  제동력
• blendDuration
  두 개 이상의 SpringAnimation을 적용했을 때의 혼합 정도

파라미터를 사용해 Animation을 조작할 수 있지만 이를 자연스럽게 조절하는 것이 힘들기 때문에 주로 기본값으로 사용한다.

비슷한 이름의 interactiveSpring은 조금 더 딱딱한 SpringAnimation을 구현하며,
interpolationSpring은 물리 모델을 적용한 SpringAnimation을 구현할 수 있다.