Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save skyofdwarf/f2c2a137497a3da3f9fa3b02d24b60d0 to your computer and use it in GitHub Desktop.
Save skyofdwarf/f2c2a137497a3da3f9fa3b02d24b60d0 to your computer and use it in GitHub Desktop.
AutoLayout Animation이 특정 서브뷰까지 애니메이션 시킬 때

AutoLayout Animation이 특정 서브뷰까지 애니메이션 시킬 때

가끔씩 에니메이션을 할 때 원하지 않는 서브뷰 까지 같이 애니메이션이 되어 버리는 경우가 있다. 예를 들어, 아래 코드와 같이 애니메이션 호출 전 버튼의 selected값이 바꾸는 코드가 있다고 하자.

self.someButton.selected = false;
UIView.animate(withDuration: 1) {
  ...
  self.view.layoutIfNeeded()
}
  1. 버튼에 설정된 normal/selected 텍스트 길이가 다르고
  2. 고정 너비 제약이 없다면

버튼의 텍스트가 바뀔 때 텍스트 너비 때문에 frame이 바뀌고 이게 애니메이션이 되면서 텍스트가 늘어지는걸 보게 된다.

애니메이션을 위한 뷰구성이 분리되지 않았다면 위 코드처럼 뷰컨트롤러의 view.layoutIfNeeded() 를 호출하는 코드를 자주 보는데, 이 때 의도하지 않게 subview중에서 animatable 프로퍼티가 변경된게 있다면 같이 애니메이션이 발생하게 되는 것이다.

이것을 방지하기 위해 애니메이션을 위한 컨테이너뷰를 구성하면 좋겠지만, 그럴 수 없는 상황이라면 해당 subview의 속성 변경을 -[UIView animate...] 호출 이후에 변경하고 바로 -[layoutIfNeeded] 를 호출해주면 된다.

UIView.animate(withDuration: 1) {
  ...
  self.view.layoutIfNeeded()
}
self.someButton.selected = false;
self.someButton.layoutIfNeeded()
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment