Autolayout Animation

AutoLayout을 이용한, AutoLayout에 제약 조건이 걸려 있을 때 애니메이션을 어떻게 줄 수 있을지 알아보도록 하겠습니다. 

 

예를 들어서, 화면의 X/Y의 center에 크기가 50인 사각형이 있다고 가정해보겠습니다.

(제약 조건은 위에서 말한 조건이 될 것입니다.)

그리고 해당 view에 대해서 크기가 증가하는 애니메이션을 구현하겠습니다.

 

@IBOutlet weak var view: UIView!
@IBOutlet weak var widthConstraint: NSLayoutConstraint!
@IBOutlet weak var heightConstraint: NSLayoutConstraint!

@IBAction func animate(_ sender: Any) {
	UIView.animate(withDuration: 0.5) {
    	self.widthConstraint.constant = 200
        self.heightConstraint.constant = 200
    }
}

위의 코드를 실행하면, 애니메이션이 작동하지 않는 것을 확인할 수 있습니다.

 

📌 frame이 아닌 AutoLayout으로 제약을 걸었다면, 다른 방식으로 애니메이션을 주어야 합니다.

어떻게 애니메이션을 구현해야 할까요? 아래의 두 단계를 거쳐야 합니다.

1. UIView.animate 외부에 원하는 애니메이션 조건을 작성합니다.
2. UIView.animate 내부에 self.layoutIfNeeded()를 호출해서 즉시 애니메이션을 업데이트 합니다.

 

코드로 보면 아래와 같습니다. ⬇️

@IBAction func animate(_ sender: Any) {
	
    // 1. 원하는 제약 조건
    widthConstraint.constant = 200
    heightConstraint.constant = 200
    
    // 2. 업데이트
    UIView.animate(withDuration: 0.5) {
    	self.view.layoutIfNeeded()
    }
}

 

만약, 위의 코드로 작성해도 애니메이션이 적용되지 않는다면?

✅ 애니메이션을 업데이트 하길 원하는 객체에 setNeedsUpdateConstraints()를 추가해야 합니다.

 

🧐 setNeedsUpdateConstraints()

제약 조건이 필요하기 직전, 한 번에 업데이트를 하면 레이아웃 간 view를 여러 번 업데이트 할 때 제약 조건을 불필요하게 재계산 할 필요가 없습니다. 

 

코드로 보면 아래와 같습니다. ⬇️

@IBAction func animate(_ sender: Any) {
	
    widthConstraints.constant = 200
    heightConstraints.constant = 200   
    view.setNeedsUpdateConstraints()
    
    UIView.animate(withDuration: 0.5) {
    	self.view.layoutIfNeeded()
    }
}