CLOSE SEARCH

UIKit Dynamics #4 – UIAttachmentBehavior. for Bouncy UI

iOS 7의 메시지 앱을 보면, 이전 버전과는 달리 스크롤 속도에 따라서 버블의 위치가 유기적으로 변하는 것을 볼 수 있습니다. 마치 버블들이 스프링으로 연결된 것처럼 보이기도 합니다. UIKit Dynamics의 UIAttachmentBehavior는 Ease In, Ease Out과 같은 단조로운 애니메이션을 넘어서, 현실세계의 스프링 효과를 애니메이션으로 구현할 수 있도록 도와줍니다. 가장 기본적인 역할은 Dynamic Item과 특정 위치의 앵커를 연결하거나 Dynamic Item끼리 연결하여 상호작용하도록 하는 것입니다. 여기에 damping, frequency, length 속성을 통해 두 객체사이에 탄성을 추가할 수 있습니다.

 

Attachment Type

UIAttachmentBehavior는 두가지 연결 방식을 제공합니다. attachedBehaviorType 속성을 통해 현재 설정된 연결 방식을 확인할 수 있지만, 읽기전용 속성이므로 직접 수정할 수는 없습니다. 연결 방식은 UIAttachmentBehavior 객체를 생성할 때 사용한 초기화 메소드에 의해 결정됩니다.

Dynamic Item 사이를 연결할 때는 initWithItem:attachedToItem: 또는 initWithItem:point:attachedToItem:point: 메소드를 사용합니다. 전자의 경우 두 아이템의 연결점은 모두 center 좌표가 되지만, 후자의 경우 직접 원하는 연결점을 지정할 수 있습니다. 이 경우 attachedBehaviorType 속성의 값은 UIAttachmentBehaviorTypeItems가 됩니다.

Dynamic Item과 앵커를 연결할 때는 initWithItem:attachedToAnchor: 또는 initWithItem:point:attachedToAnchor: 메소드를 사용합니다. 앞에서 설명한 것과 동일하게, 전자는 연결점이 center 좌표이고, 후자는 원하는 연결점을 지정할 수 있습니다. 이 경우 attachedBehaviorType 속성의 값은 UIAttachmentBehaviorTypeAnchor가 됩니다.

 

Damping

Damping은 진동을 흡수하여 억제시키는 방식 또는 진동을 줄이는 장치를 의미합니다. damping 속성을 통해 0.0~1.0 사이의 값을 설정할 수 있고, 값이 클수록 진동효과가 억제됩니다.

[one_half]

Damping 0.2

[/one_half]

[one_half_last]

Damping 0.8

[/one_half_last]

Frequency

Frequency는 진동의 빈도를 나타냅니다. frequency 속성을 통해 0.0~1.0 사이의 값을 설정할 수 있고, 값이 클수록 강한 용수철을 연결했다고 생각하면 이해하기 쉽습니다.

[one_half]

Frequency 0.4

[/one_half]

[one_half_last]

Frequency 1.0

[/one_half_last]

Length

두 연결지점 사이의 거리를 나타냅니다. length 속성을 통해 초기화 시점에 거리를 설정하거나, 그 이후 원하는 시점에 거리를 변경할 수도 있습니다. 초기화 시점에 거리를 설정하지 않은 경우에는 iOS가 연결 방식에 따라 적절한 기본 거리를 설정해 줍니다.

 

Sample : Drop box with Spring

sample_drop_box_with_spring

이 예제는 파란색 박스의 가운데 좌표와 빨간색 박스의 가운데 좌표를 연결하고, damping, frequency, length 속성 값에 따라 UIAttachmentBehavior가 동작하는 모습을 보여줍니다. 오른쪽에 있는 각 슬라이더로 속성 값을 변경할 수 있고, Drop!! 버튼을 누르면 UIGravityBehavior가 적용된 빨간색 박스가 아래쪽으로 떨어집니다. 빨간색 박스는 앵커(파란색 박스의 center 좌표)와 연결되어 있기 때문에 무한정 떨어지지 않고 임의의 지점에서 멈추게 됩니다. 두 지점사이를 줄이나 스프링으로 연결해 두었다고 생각하면 이해하기 쉽습니다.

Code1 에서는 기본적인 초기화 작업을 수행합니다. 1번 라인에서는 현재 뷰 컨트롤러의 뷰를 레퍼런스 뷰로 설정하여 UIDynamicAnimator를 생성합니다. 2번 라인에서는 빨간색 박스(self.redBox)와 파란색 박스(self.baseBox)의 가운데 좌표를 연결하는 UIAttachmentBehavior 객체를 생성합니다. 그리고 3~5번 라인에서 진동효과를 추가하기 위해 기본적인 속성값을 설정합니다. 7번 라인에서는 Drop!! 버튼을 눌렀을 때, 빨간색 박스가 아래쪽으로 떨어지도록 UIGravityBehavior 객체를 생성합니다. 이 시점에서 두 개의 Dynamic Behavior는 아직 Dynamic Animator에 추가되지 않았기 때문에 화면에는 아무런 변화가 없습니다.

Code2 에서는 Drop!! 버튼과 Reset 버튼의 동작을 처리하는 코드를 구현합니다. Drop!! 버튼과 연결된 onDrop: 메소드에서는 애니메이션이 실행되도록 UIAttachmentBehavior와 UIGravityBehavior를 Dynamic Animator에 추가해줍니다. Reset 버튼과 연결된 onReset: 메소드에서는 removeAllBehaviors 메소드를 통해 Dynamic Behavior를 모두 제거하고 진행중인 애니메이션이 즉시 중지되도록 합니다.

Code3 에서는 각 슬라이더의 값이 변경될 때마다 연관된 속성값을 변경합니다. 변경된 값은 실시간으로 적용되기 때문에 애니메이션이 진행중인 동안에도 언제든지 새로운 값이 적용된 애니메이션이 바로 실행됩니다.

Filed under: Apple WWDC 2013, iOS