코코아 뷰 애니메이션 구현하기
코코아 애니메이션 가이드에서는 뷰를 Layer-Backed 뷰로 만든다음, 뷰의 레이어(CALayer)의 속성을 변경하면, CALayer에 의해서 암시적으로 해당 속성이 변경되는 동작이 애니메이팅된다고 한다. 하지만 실제로 이를 써보면 안된다. 그래서 조금 찾아보았더니 두 가지 문제가 있었다.
결론적으로 레이어-백 뷰의 레이어는 암묵적인 애니메이션을 기본적으로 허용하지 않으며, 이 제한을 돌아간다 하더라도 레이어 자체의 프로퍼티를 직접 건드리는 것이 권장되지 않는다. 우선 코코아 애니메이션 가이드에서는 다음과 같은 내용을 찾을 수 있다.
OSX의 레이어 조정에 관한 규칙
OSX에서 레이어-백 뷰의 변경을 애니메이팅하려면 뷰 자체의 인터페이스를 사용하는 것이 가장 좋습니다. 레이어-백 NSView 객체에 붙어있는 레이어를 직접 수정하는 것은 매우 드문 케이스가 될 것입니다. 이러한 레이어를 생성하고 관리하는 일은 앱킷이 수행합니다. 따라서 레이어를 직접 수정하는 것은 뷰 객체와의 동기화를 흐트러지게 하고 예기치 못한 동작을 수행하게 될 수 있습니다. 레이어-백 뷰에 대해 다음 속성들은 절대 코드를 통해 건드리면 안됩니다.
- anchorPoint
- bounds
- compositingFilter
- filters
- frame
- geometryFlipped
- hidden
- posision
- shadowColor
- shadowOffset
- shadowOpacity
- shadowRadius
- transform
이러한 제한은 레이어-호스팅 뷰에 대해서는 적용되지 않습니다. 레이어 호스팅 뷰의 레이어는 프로그래머가 직접 생성하며, 그 관리 책임 또한 프로그래머가 져야 합니다.
그리고 앱킷은 레이어-백 뷰에 대해서는 암시적인 애니메이팅을 비활성화하는 것을 기본값으로 합니다. 뷰의 애니메이터 프록시가 이러한 암시적인 애니메이팅을 자동으로 활성화하게 됩니다. 물론 레이어의 속성을 직접 건드려서 그것을 애니메이션으로 보이게하고 싶다면 NSAnimationContext의 allowImplicitAnimation 프로퍼티값을 YES로 변경하면 됩니다. 하지만 이 경우에서도 위에 리스팅된 프로퍼티들에 대해서는 코드를 통해 조정해서는 안됩니다.
이 말인 즉슨, 레이어-백 뷰에 대해서는 layer? 속성을 통한 애니메이션을 하지 말라는 이야기이다. 배경색이라든지 opacity 같은 속성에 대해서는 가능은 하겠지만, NSAnimationContext의 allowImplicitAnimation 프로퍼티값은 앱킷에 의해 반복적으로 false로 되돌아가기 때문에 엄청나게 귀찮다.
따라서 정확히는 레이어-백 뷰가 아니라 레이어 호스팅 뷰로 만들고, 이때 레이어 속성에 대해서 프로퍼티를 변경하는 것이 코어 애니메이션 API를 사용하는 바른 방법이 될 것 같다.
하지만 보다 간단한 방법은 애니메이터 프록시를 사용하는 것이다. 애니메이터 프록시를 사용하는 방법은 간단히 animator()를 호출하여 리턴되는 프록시를 얻고, 이 프록시 객체가 마치 NSView 객체인양 여러 속성값을 변경해주기만 하면 모든 변경이 애니메이션 된다. 프록시를 통해 변경이 발생하면 애니메이터 프록시는 내부적으로 코어 애니메이션을 통해서 애니메이션을 시작하게 된다.
간단한 예제를 통해서 확인해보자. 다음은 루트 뷰 내부에 간단한 뷰를 하나 추가하고 버튼을 누를때마다 왼쪽,오른쪽으로 이동하게 하는 것이다. subviewIsAtLeft 값은 서브뷰가 왼쪽에 있는지 오른쪽에 있는지를 결정하는 Bool 타입 값으로 위치를 변경할때마다 토글링된다.
@IBAction func moveSubView(_ sender: Any?) {
let animator = subView.animator()
let newPosition: CGPoint = {
if subviewIsAtLeft {
return CGPoint(x: bounds.width - subview.bounds.width - 20,
y: subview.frame.minY)
}
return CGPoint(x: 20, y: subview.frame.minY)
}()
animator.setFrameOrigin(newPosition)
subviewIsAtLeft = !subviewIsAtLeft
}정리
코코아 뷰, 아니 NSView에서 애니메이션 효과를 주고 싶다면 상황에 맞게 다음의 전략을 사용하면 된다.
- 기본적으로 NSView의 API를 사용하여 변경할 수 있는 외관 및 기하학적 속성에 대해서 애니메이트 하고 싶다면 animator()를 최우선적으로 고려할 것. 특히 이동이나 크기 변환, 알파 등의 애니메이션은 이 방법이 가장 쉽다.
- 코어 애니메이션 API를 사용하고 싶다면 레이어-호스팅 뷰를 만들어야 한다. 레이어 호스팅 뷰를 만드는 방법은 CALayer 객체를 생성해서 뷰의 layer 프로퍼티에 할당하고, 다시 뷰의 wantsLayer 프로퍼티를 true로 지정한다. (이 순서가 매우 중요하다.) 이후 레이어의 속성을 조작하여 암시적 애니메이션을 사용하거나, CAAnimation 객체를 만들어서 애니메이션 할 수 있다.
그외에 NSAnimation, NSAnimationContext 등의 장치들이 있지만, 어차피 위 두가지 테크닉의 다른 표현일 뿐인 것으로 보인다. (게다가 API들이 생긴게 썩 마음에 들지 않는다.) 어차피 코코아 앱에서 엄청 화려한 효과를 넣을게 아니라면 이정도로 충분하지 않겠는가 하는 생각이 든다.
