[iOS] Autolayout으로 제약조건을 걸었을때 Animation 방법

Autolayout을 이용한 animation 방법에 대해 알아 보도록 하겠습니다.

제약 조건이 걸렸을때의 애니미에션을 어떻게 처리하는지에 대해 간단히 알아보기위해

 

아래와 같은 스토리보드 화면의 X,Y가 Center잡혀 있고, 크기가 50으로 제약이 걸려있습니다.

view의 사이즈가 증가하는 간단한 애니메이션으로 확인 해보겠습니다.

 

 

 

iOS Animation 방법(UIView.animate)

iOS Animation 방법(UIView.animateKeyframes)

기존에 위의 포스트 방식대로 frame의 애니메이션을 구현하는 방식대로 해보도록 하겠습니다.

 

• view의 사이즈를 200만큼 증가

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

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

기존에 하던 방식대로 애니메이션을 주었지만 걸리지 않는다!!!!!!!

 

 

💡 frame이 아닌 오토레이아웃의 제약으로 걸었다면 다른 방식으로 애니메이션을 업데이트 해야됩니다.

1. UIView.animate 바깥쪽에 원하는 애니메이션 조건을 적는다.
2. UIView.ainmate안에 self.view.layoutIfNeeded()를 호출해서 즉시 업데이트를 시킨다.

  @IBAction func animate(_ sender: Any) {

    //1
    widthConstraint.constant = 200
    heightConstraint.constant = 200

    UIView.animate(withDuration: 0.3) {
      //2
      self.view.layoutIfNeeded()
    }

  }

 

 

 

 

간혹 제약의 의도한대로 업데이트가 되지 않는 경우가 있습니다!

그럴땐 애니메이션을 원하는 객체에 제약 업데이트(setNeedsUpdateConstraints())를 추가해주면 됩니다 :)

 

💡 setNeedsUpdateConstraints()

https://developer.apple.com/documentation/uikit/uiview/1622450-setneedsupdateconstraints
제약 조건이 필요하기 직전에 한 번에 업데이트하면 레이아웃 간에 view를 여러 번 변경할 때 제약 조건을 불필요하게 재계산하지 않아도 된다.

 

  @IBAction func animate(_ sender: Any) {

    widthConstraint.constant = 200
    heightConstraint.constant = 200
    objectView.setNeedsUpdateConstraints() // setNeedsUpdateConstraints()추가

    UIView.animate(withDuration: 0.3) {
      self.view.layoutIfNeeded()
    }

  }