iOS animation 빠르게 살펴보기. #animate() #PropertyAnimation

animation의 변천사

1. (iOS 2) beginAnimations, commitAnimations
2. (iOS 4) closure 형태인 animate 메서드
3. (iOS 10) UIViewPropertyAmimation

1번은 현재 deprecated 되었습니다. 2번이 많이 쓰이고 있는데, 애플에서는 3번 방법의 사용을 권장하고 있습니다.

그럼 2번, 3번 방법에 대해서 알아보겠습니다,

 

 

 

Animate

• animate(withDuration: animations:)

  → duration(시간), animation(변화될 특성) 을 파라미터로 받습니다.

• animate(withDuration: animations: completion:)

  → 위 파라미터에 더해. 애니메이션 완료시 동작하는 completion을 추가할 수 있습니다.

  → 이를 통해서 한 애니메이션 이후에 연속적으로 동작하는 다른 애니메이션을 추가할 수도 있고 다양한 작업이 가능합니다.

*animation과 completion은 클로저 형태이기 때문에 코드 작성시 후행 클로저 형태로 작업할 수 있습니다.

//기본 사용 - 시간 & 변경될 사항
UIView.animate(withDuration: 0.5) {
    myView.backgroundColor = .white
}

//두개의 애니메이션 순차 사용
UIView.animate(withDuration: 2.0, animations: {
    myView.backgroundColor = .white
}) { (_) in
    UIView.animate(withDuration: 2.0, animations: {
        myView.frame = CGRect(x: 100, y: 100, width: 200, height: 200)
    })
}

 

스프링 애니메이션

animate 함수는 다양한 옵션을 가지고 있습니다.

이를 활용하여 스프링처럼 튕기는 애니메이션 구현도 가능합니다.

UIView.animate(withDuration: 2.0, delay: 0, usingSpringWithDamping: 0.2, initialSpringVelocity: 0.2, options: .curveEaseIn, animations: {
   myView.frame = CGRect(x: 100, y: 100, width: 200, height: 200)
})

 

options

위에 스프링 애니메이션 코드를 보면 options라는 파라미터가 있는데요. 이는 배열로 여러 특성을 받아 동시에 적용 가능합니다.

애니메이션을 무한으로 반복시키는 repeat, 애니메이션을 반대로도 실행할 수 있게 해주는 autoreverse 와 같은 특성도 줄 수 있습니다.

UIView.animate(withDuration: 2.0, delay: 0, usingSpringWithDamping: 0.2, initialSpringVelocity: 0.2, options: [.curveEaseIn, .repeat, .autoreverse], animations: {
           myView.frame = CGRect(x: 100, y: 100, width: 200, height: 200)
        })

 

 

 

 

 

UIViewPropertyAnimator

UIView.animate() 코드와 UIViewPropertyAnimator 코드를 비교해보겠습니다.

 

UIView.animate(withDuration: duration, delay: 0, options: [.curveLinear], animations: {
  self.redSquare.backgroundColor = .green
})

UIViewPropertyAnimator.runningPropertyAnimator(withDuration: duration, delay: 0, options: [.curveLinear], animations: {
  self.redSquare.backgroundColor = .green
})

 

이름만 바뀌었지 큰 차이가 없습니다.

하지만 UIViewPeropertyAnimator는 이름에서 유추할 수 있듯이 Peoperty처럼 쓸 수 있습니다.

let animator = UIViewPropertyAnimator(duration: duration, curve: .linear) {
  self.redSquare.backgroundColor = .green
}
animator.startAnimation(afterDelay: 3.0)

위 처럼 property로 선언하고 원할때 여러 메서드를 붙여주어 상태를 제어할 수 있습니다. start 뿐만 아니라 pause, stop, finish 등의 제어가 가능합니다.

 

 

Completion Handler 추가하기

아래와 같이 completion 핸들러를 추가할 수 있습니다.

기존 UIView.animte는 클로저가 중첩되는 구조여서 깔끔한 관리가 힘들었었는데, 보다 깔끔한 관리가 가능하게 되었습니다.

또, animation 상태(.start .end .current)에 따라 completion 추가 시점을 결정할 수 있습니다.

animator.addCompletion { position in
  if position == .end {
    print("First completion")
  }
}

 

Animation 추가하기

아래와 같이 추가해줌으로써 색상 변경과 함께 테두리도 변경할 수 있습니다.

animator.addAnimations {
	self.redSquare.layer.cornerRadius = 50
}

 

 

 

*참고

https://jinnify.tistory.com/66

https://useyourloaf.com/blog/quick-guide-to-property-animators/