[ios] Animatable Properties

[ios] Animatable Properties

안녕하세요. 지난 포스팅에서 alpha의 값은 애니매이션 효과를 주기 위해서는 따로 layoutIfNeeded는 호출해주지 않아도 된다고 소개를 하였습니다. 그 이유로 alpha 속성은 built-in animation 속성 중 하나라고 했습니다. 오늘은 그 built-in animation과 관련한 Animatable Properties에 대해 공부해보는 시간을 갖도록 하겠습니다.

이번 포스팅은 공식 문서를 제가 이해한대로 번역하여 옮기는 방식으로 보다 자세한 내용은 공식 문서를 참고해주세요. Animations

오늘은 지난 포스팅에 연장선이기 때문에 반드시 해당 포스팅을 먼저 보시고 읽어주시기 바랍니다.

• [ios] setNeedsLayout vs layoutIfNeeded

---

Animations

iOS에서 애니매이션은 View의 위치, 사이즈를 바꾸거나 View의 계층에서 뺀다던지 숨긴다던지 하는 행위를 할 때 광범위하게 사용됩니다. 이를 통해 사용자에게 여러 시각적으로 흥미로운 효과를 제공할 수 있습니다.

iOS에서는 정교한 애니매이션을 구현하기 위해 많은 코드를 작성할 필요가 없습니다. Core Animation이 제공하는 built-in animation을 사용하면 복잡한 코드를 작성할 필요 없이 짧은 코드로 정교한 애니매이션을 구현할 수 있습니다. 그렇다면 무엇에 애니매이션 효과를 줄 수 있을까요?

What Can Be Animated?

UIKit과 Core Animation 둘 모두 애니매이션 효과를 지원하지만 지원하는 수준은 서로 다릅니다. UIKit에서는 UIView 의 객체를 활용하여 애니매이션을 구현할 수 있습니다. UIView 객체는 각각의 View의 property를 변경하거나 뷰를 다른 뷰로 교체하는 등의 간단하고 흔한 애니매이션 작업들은 지원합니다.

다음의 항목은 기본으로 애니매이션 효과가 내장되어 있는 UIView 클래스의 Animatable properties입니다. UIView의 속성이기 때문에 객체에서 바로 접근이 가능합니다.

• frame
• bounds
• center
• transform
• alpha
• backgroundColor
• contentStretch

Animatable의 의미는 자동으로 애니매이션 효과가 일어난다는 의미가 아닙니다. 기본적으로 위의 속성들에 새로운 값을 할당해주면 그 즉시 반영되고 애니매이션 효과는 나타나지 않습니다. 애니매이션 효과를 보기 위해서는 다음과 같이 animation 블록 안에서 값을 변경해주어야 합니다.

Core Animation은 UIView가 제공하지 않는 것들로 보다 복잡하고 정교한 애니매이션을 지원합니다.

오늘 글의 목적은 사실 지난 포스팅의 연장선입니다. 지난 시간에는 alpha 값의 변화에 애니매이션 효과를 주는 것과 Auto Layout의 Constraint 값을 변경하여 애니매이션 효과를 주는 방법에 대해 소개를 했습니다. alpha 값은 별다른 조작 없이 블록 안에 코드를 위치시키는 것만으로도 애니매이션 효과를 볼 수 있었는데 그 이유가 바로 위에서 언급한 것처럼 View의 alpha 속성은 Animatable한 built-in animation 속성이기 때문입니다.

반면 Auto Layout의 Constraint 속성은 Animatable한 built-in animation 속성이 아니기 때문에 layoutIfNeeded라는 메소드의 호출로 그 즉시 값을 반영하는 작업을 해주는 수동으로 해주어야 합니다. 이는 Auto Layout의 Constraint의 변경된 값이 실제로 View에 반영되려면 일련의 거쳐야 할 단계가 있기 때문입니다. 과정은 다음과 같습니다.

1. 변경될 값에 맞추어 시스템이 해당 Constraint를 포함하여 이와 연관되어 있는 Constrainte들의 모든 값을 재계산합니다.
2. layout 엔진이 재계산된 Constraint에 맞추어 연관되어 있는 모든 View들의 frame들의 값을 재계산하고 배치합니다.
3. 재계산되고 재배치된 frame을 실제 화면에 그립니다.

Auto Layout에는 이렇게 세 단계가 있기 때문에 단순히 값만 바꾸는 것만으로는 애니매이션 효과를 볼 수 없고 그 즉시 화면에 반영하는 layoutIfNeeded를 호출하여 애니매이션 효과를 만드는 것입니다.

---

마무리

저번 포스팅에 이어 오늘의 포스팅까지 한동안 제 머릿속에서 정리되지 않았던 개념을 명확하게 알게 된 과정과 그 내용을 정리해보는 시간을 가졌습니다. 한동안 여러 개념들이 난잡하게 위치하여 이들을 조합하지 못하였지만 Swift Korea 페이스북 그룹 고수분들의 도움으로 정리할 수 있게 되었습니다. 저도 이렇게 지식을 다른 분들에게 공유하여 그들에게 도움을 줄 수 있도록 더욱 실력 증진에 매진해야겠습니다. 감사합니다.

---

참고자료

1. Demystifying iOS Layout
2. Animations