iOS autolayout 라이브러리인 Snapkit을 이용해서 Animation을 쉽게 구현할 수 있다.
사용방법은 간단하다.
먼저 기본화면을 구성한다.
import UIKit
import SnapKit
class ViewController: UIViewController {
let label: UILabel = {
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.textAlignment = .center
label.text = "Label"
label.backgroundColor = .blue
label.textColor = .white
return label
}()
override func viewDidLoad() {
super.viewDidLoad()
setLayout()
}
func setLayout() {
self.view.addSubview(label)
label.snp.makeConstraints { ( make ) in
make.width.equalTo(200)
make.height.equalTo(50)
make.centerX.equalTo(view.snp.centerX)
make.centerY.equalTo(view.snp.centerY)
}
}
}
Label을 움직이려면 View Controller의 LifeCycle를 알아야하는데 여기서 간단히 언급하고 가자면
init - > loadView -> viewDidLoad -> viewWillAppear -> viewDidAppear -> viewWillDisapper -> viewDidDisappear -> viewDidUnload
방대한 양이라 자세한 건 생락하겠지만, 보통 애니메이션에 대한 것은 viewDidAppear에서 선언한다고 보면 된다.
이제 Snapkit을 이용한 애니메이션을 구현해본다.
func updateView_() {
label.snp.remakeConstraints{ ( make ) in
make.width.equalTo(200)
make.height.equalTo(50)
make.top.equalTo(view.safeAreaLayoutGuide.snp.top).inset(15)
make.leading.equalTo(view.snp.leading).inset(20)
}
}
Label을 어떻게 업데이트할 지 코드를 작성한다. 이 때, remakeConstraints와 updateConstraints 가 있는데, updateConstaraints를 사용할 때, label에 처음 constarints 건 것만을 사용해야한다.
예를 들면, setLayout()에서 width, height, centerX,centerY에 constaraints를 걸었는데
아래 코드처럼 updateConstraints() 사용하게 된다면
func updateView_() {
label.snp.updateConstraints{ ( make ) in
make.width.equalTo(200)
make.height.equalTo(50)
make.top.equalTo(view.safeAreaLayoutGuide.snp.top).inset(15)
make.leading.equalTo(view.snp.leading).inset(20)
}
}
다음과 같은 Error를 발생시킨다.
그래서 remakeConstaraint()를 사용하고, 아래 코드를 추가하자
func startAnimation(){
updateView_()
UIView.animate(withDuration: 3, delay: 1, options:.curveEaseOut, animations: {
self.view.layoutIfNeeded()
}, completion: nil)
}
startAnimation()은 updateView()를 통해, (결과) 뷰가 이렇게 바뀔거에요. 라고 말해주고,
UIView.animate()를 통해 애니메이션을 진행한다.
이 때 animation안에 self.view.layoutIfNeeded()를 선언 해줘야한다.
self.view.layoutIfNeeded()는 constraints의 변경을 self.view에서 업데이트 해주는 것이다.
마지막으로 다음과 같이 코드를 작성해주면 완성
override func viewDidAppear(_ animated: Bool) {
startAnimation()
}