안녕하세요:)
오늘은 UIView Animation에 대해서 알아보도록 하겠습니다..!
UIView 클래스는 Animation에서 사용되는 API를 타입메소드로 제공합니다.
이 메소드를 활용해서 비교적 단순한 코드로 고품질의 Animation을 구현할 수 있습니다.
UIView가 제공하는 속성중에서 애니메이션을 지원하는 속성은 다음과 같습니다.
기본적인 구현 방법은 아래와 같습니다.
UIView.animate(withDuration: TimeInterval, animations: () -> Void)
이 메소드를 사용하여 애니메이션을 적용할 수 있습니다.
@IBOutlet weak var myView: UIView!
@IBAction func reset(_ sender: Any) {
myView.backgroundColor = .orange
myView.alpha = 1.0
myView.frame = CGRect(x: 157, y: 77, width: 100, height: 100)
}
@IBAction func startAnimation(_ sender: Any) {
var frame = myView.frame
frame.origin = view.center
UIView.animate(withDuration: 2) {
self.myView.backgroundColor = .red
self.myView.alpha = 0.8
self.myView.frame = CGRect(x: 157, y: 398, width: 200, height: 200)
}
}
애니메이션이 실행된 후 다시 원래상태로 돌아가는 것에도 애니메이을 적용해 보도록 하겠습니다.
UIView.animate(withDuration: TimeInterval, animations: () -> Void, completion: ((Bool) -> Void)? )
UIview.animation 메소드를 보면 completion 파라미터를 받는 메소드가 있습니다. 이 메소드는 애니메이션 블록을 실행한다음 3번째 파라미터로 전달한 블록을 실행합니다.
UIView.animate(withDuration: 2) {
self.myView.backgroundColor = .red
self.myView.alpha = 0.8
self.myView.frame = CGRect(x: 157, y: 398, width: 200, height: 200)
} completion: { finished in
UIView.animate(withDuration: 2) {
self.reset(nil)
}
}
그런데 이렇게 하면 코드가 복잡해지는 단점이 있습니다. 코드가 복잡해지면 가독성이 떨어지게 됩니다. 이러한 부분은 Keyframe Animation을 사용하면 조금 더 깔끔해지는 장점이 있습니다.
애니메이션에서 중요한 요소중 하나는 애니메이션 curve 입니다.
앞에서 사용한 메소드는 .curveEaseInOut -> 천천히 시작했다가 점점 빨라지다가 다시 천천히 종료가 되는 커브입니다.
다른 애니메이션 커브를 사용하고 싶다면 애니메이션 Options을 지정해야 합니다.
애니메이션의 Options
는 하나만 줄 수도 있고, 배열로도 줄 수도 있습니다.
자세한 옵션 항목들은 AnimationOptions 에서 확인하시기 바랍니다.
UIView.animate(withDuration: 2, delay: 0.0, options: [.curveLinear, .repeat, .autoreverse], animations: {
self.myView.backgroundColor = .red
self.myView.alpha = 0.9
self.myView.frame = CGRect(x: 157, y: 398, width: 200, height: 200)
}, completion: nil)
감사합니다:)