[CoreAnimation] Ch7. Animating Constraints - (오토레이아웃으로 애니메이션하기)

7장 Animating Constraints

Intro

이전에는 alpha, frame등의 변경으로 애니메이션을 구현했지만, AutoLayout은 좀 다르다.

Constraint의 변경을 한 뒤, AutoLayout의 State변경을 통해 애니메이션을 구현한다.

Making the menu expand

NSLayoutConstraint도 UIView처럼 @IBOutlet으로 연결가능하다.

연결한 Constraint의 constant를 변경해보자.

뷰의 크기와 위치가 변하는걸 확인한다. 이제 애니메이션을 해보자.

Animating layout changes

Constraint의 constant를 변경하고 끝내면 애니메이션 없이 뷰가 변한다.

하지만 여기에 UIView.animate(.... view.layoutIfNeeded() …)를 호출하면 애니메이션이 된다.

-> Constraint의 constant를 수정하는 것만으로는 뷰가 바뀌지 않는다. view가 레이아웃을 새로고침하여야 비로소 변경 사항이 적용된다. 위에서 view.layoutIfNeeded()를 호출하지 않고 constant만 변경한 코드는 알아서 레이아웃 새로고침이 일어난 것이다. 아래 예제는 우리가 직접 레이아웃 새로고침을 하도록 한 것이다.(UIView.animate 안에서)

원문

In this case, you’ve already updated the constraint value, but iOS hasn’t had a chance to update the layout yet. By calling layoutIfNeeded() from within the animation closure, you set the center and bounds of every view involved in the layout. That’s it — there’s no magic happening in the background! 

If you hadn’t called layoutIfNeeded(), UIKit would have performed a layout anyway since you changed a constraint, which marked the layout as dirty. 

Inspecting and animating constraints

코드만으로 오토레이아웃을 표현하는 경우는 어떻게 할까?

우리는 런타임에 하나의 view에 연관된 모든 constraint를 알 수 있다. 바로 constraints라는 프로퍼티를 통해서다.

그 말은 우리가 수정하고자 하는 constraint를 런타임에 찾아서 수정할 수 있고, 애니메이션을 할 수 있다는 것!!

Animating UILabel constraints

런타임에 constraint의 firstItem, firstAttribute 등 서브 프로퍼티를 통해 우리가 찾는 constraint를 검출할 수 있다.

이렇게 검출한 constraint의 constant를 변경하면 애니메이션이 가능하다.

Animating by replacing constraints

위 챕터에서 우리는 constraint의 constant를 변경하여 애니메이션을 표현했다.

하지만 multiplier를 바꾸고 싶다면?

아니면 새로운 constant를 적용시키고 싶다면?

constant를 교체 해주면 된다.

NSLayoutConstraint에는 identifier라는 프로퍼티가 있다. UIView의 tag와 같다고 보면 될 듯하다.

따라서 view의 constraints프로퍼티에서 우리가 찾는 constraint를 찾을 때, identifier를 통해 검사하면 훨씬 수월해진다. firstItem, firstAttribute등을 검사하는 것보다 말이다.

Adding constraints programmatically

titleLabel의 centerY의 multiplier를 변경하기 위해 새로운 constraint를 생성한다.

이전에 있던 constraint의 isActive는 false로 변경한 뒤, 새로운 constraint를 추가해주면 중복 constraint도 없고 스무스하게 constraint의 변경이 이루어진다.

Adding menu content

didMoveToSuperview()를 override하여 부모뷰에 붙을 때, 등장 애니메이션을 정의할 수 있다.

Animating dynamically created views

런타임에 생성한 뷰를 가지고 애니메이션을 해보자.

NSLayoutAnchor를 통해서 constraint를 수월하게 작성할 수 있다.

Adding additional dynamic animations

아래 순서를 보자.

1. 동적으로 뷰를 생성하고 이에 constraint를 추가함

2. 1에서 생성한 constraint에 변경사항 적용

3. 레이아웃 새로고침

이렇게 하면 1에서 생성한 constraint가 무시된다. 왜냐하면 시스템에서 1에서 생성한 레이아웃을 적용할 시간이 없었기 때문이다.

그래서!! 위 순서는 아래와 같이 변경되어야 한다.

1. 동적으로 뷰를 생성하고 이에 constraint를 추가함

2. 레이아웃 새로고침

3. 애니메이션을 위한 constraint에 변경

4. 레이아웃 새로고침

Challenges

테이블뷰를 탭해서 올라오는 이미지뷰를 화면밖으로 사라지게 만들기.