코어 애니메이션 vs UIView 애니메이션
NSView와 그 계층구조의 애니메이션에서는 앱킷의 코어 애니메이션 통합을 사용할 수 있다. 즉 코코아의 NSView를 애니메이트하는 기술은 코어 애니메이션과 상당부분 결합되어 있다고 보면 된다. 이렇게 앱킷과 코어 애니메이션이 결합된 기술을 코코아 애니메이션으로 부른다. 스위치의 플립 효과와 같이 이미 애니메이션 효과를 지원하는 많은 컨트롤 들이 코코아 애니메이션을 통해서 코어 애니메이션을 사용하고 있다.
코코아 애니메이션
코어 애니메이션은 기존에 만들어진 UI를 쉽게 애니메이트하는 것을 1차적인 목표로 한다. 따라서 앱킷은 NSView의 계층구조에 대해 각각의 코어애니메이션 레이어(CALayer)를 그 이면에 가지고 있다. 이것이 활성화되면 뷰들은 컨텐츠를 자신의 그래픽 컨텍스트 대신에 대응되는 레이어에 그리게 된다.
코어애니메이션을 사용하기 위해서는 인터페이스빌더에서 원하는 뷰에 대해 애니매이션 옵션스위치를 켜기만 하면 된다. 이는 코드 상에서 [someView setWantsLayer:YES]; 라는 한 줄의 코드로 대체할 수 있다. 레이어가 뒤에 있는 뷰로 전환되면, 이 뷰의 애니메이션은 손쉽게 animator라는 프록시 객체를 통해 제어할 수 있게 된다.
애니메이터
레이어백 뷰는 모두 animator 프록시를 가지고 있고, 이 프록시를 통해서 뷰의 속성을 변경하면 즉시 애니메이션이 실행된다. 프록시와의 상호작용은 매우 단순하고 즉각적이다. 예를 들어 위치와 크기를 변경하기 위해서는 다음의 메시지만 보내면 된다.
[[myView animator] setFrame:newRect];
이런 코어 애니메이션이 없었을 때에에는 뷰에 대한 캐시를 만들고, 다른 쓰레드를 만들어서 애니메이션을 매 프레임마다 실행하도록 했어야 했다. 코어애니메이션은 이런 디테일을 모두 다룰 수 있다.
동시 다발 애니메이션
동시에 여러 애니메이션이 돌아가야 한다면 이를 간단히 그룹으로 묶어서 실행하면 된다. 애니메이션 그룹은 CGGraphincsContext와 유사한 개념의 NSAnimationContext를 사용하여 그룹핑하고, 또한 이를 통해 애니메이션을 조절할 수 있다. 예를 들어 2개 뷰의 위치와 크기, 투명도 등을 동시에 조절해야 한다면 다음과 같은 코드를 사용한다.
애니메이션 예제
-(void)moveView {
[NSAnimationContext beginGrouping];
CGRect newFrame1 = <# 새 프레임을 만든다 #>
CGRect newFrame2 = <# 새 프레임을 만든다 #>
[[self.myFirstView animator] setFrame:newFrame1];
[[self.mySecondView animtor] setFrame:newFrame2];
[NSAnimationContext endGrouping];
}
애니메이션은 그룹핑이 끝나는 [NSAnimationContext endGrouping]; 라인이 실행될 때 시작된다. 그룹으로 묶인 애니메이션들은 동시에 시작된다.
애니메이션 조절하기
애니메이션의 길이나 페이스(가속곡선)는 애니메이션 컨텍스트를 사용하여 조절할 수 있다. 각각의 스레드는 개별적으로 애니메이션 컨텍스트를 가지는데, 만약 애니메이션을 10초간 일어나도록 하려면 위 코드의 그룹핑 블럭 내에 다음 코드를 추가한다.
[[NSAnimationContext currentContext] setDuration:10.0];
애니메이션의 가속곡선은 CAMediaTimingFunction 클래스를 사용한다. 이 클래스는 애니메이션의 전체 시간 중에 각각의 키 프레임을 생성하는 방식을 알려주는 역할을 한다. 이 클래스는 QuartzCore 프레임워크에 정의되어 있으므로, 가속곡선을 조절하고자 한다면 이 프레임워크를 프로젝트에 추가해야 한다.
#import <QuartzCore/QuratzCore.h> 를 코드 위쪽에 추가해준 다음, 역시 위 예제 코드의 그룹핑 블럭에 다음 줄을 추가한다.
[[NSAnimationContext currentContext] setTimingFunction:
[CAMediaTimingFunction functinWithName:
kCAMediaTimingFunctinoEaseInEaseOut]];
Ease In – Ease Out 은 애니메이션이 점점 가속되었다가, 끝날 때 즈음해서 다시 감속하여 부드럽게 시작하고 끝나는 효과를 만들어낼 수 있다.
iOS의 UIViewAnimation
UIView의 애니메이션은 조금 다른데, UIView 클래스 자체에서 애니메이션을 위한 클래스 메소드를 이미 제공하고 있고, 이를 사용하면 된다. 여기에는 두 가지 방법이 있는데 하나는 +beginAnimations:context: ~ +commitAnimations 사이에 애니메이트하고자 하는 속성을 변경하는 방법이 있고, iOS4에서부터 제공되기 시작한 +animatteWithDuration: delay: animations: completion: 을 사용하는 방법이 있다. 특히 두 번째 방법은 연속적인 애니메이션을 만들기가 보다 쉬우므로 추천하고, 첫 번째 방법은 여러 애니메이션을 동시에 실행하고자 할 때 보다 쉬울 수 있다.
첫번째 방식의 예는 다음과 같다.
UIView 애니메이션 예제 – 1
-(void)move
{
[UIView beginAnimations:nil context:NULL]; {
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationDuration:10.0];
[UIView setAnimationDelegate:self];
[UIView setAnimationDidStopSelector:@selector(afterAnimationFinished)];
self.topView.alpah = 1.0;
self.bottomView.alpha = 0.0
self.anotherView.frame = newFrame; // 이미 따로 있는 값이라고 가정
} [UIView commitAnimations];
}
-(void)afterAnimationFinished
{
[self.bottomView removeFromSuperView];
}
두 번째 방식은 다음과 같다. 특히 애니메이션 완료 후에 실행할 코드를 블럭으로 넘길 수 있어서 매우 편리하며, 일단 코드 양에서부터 차이가 나고 가독성 또한 월등히 좋다.
UIView Animation 예제 – 2
-(void)moveView
{
[UIView animateWithDuration:10.0
delay:1.0
options:UIViewAnimationCurveEaseInOut
animations:^{
self.imageView.frame = newFrame;
self.topView.opacity = 0.0;
self.bottomView.opacity = 1.0;
self.anotherView.frame = newFrame2;
}
completion:^(BOOL finished) {
[self.topView removeFromSuperView];
};
];
}
UIView 애니메이션에서 직접 CALayer를 다루는 방식의 코어애니메이션은 이보다 더 세세한 조정이 가능하다. 뷰 애니메이션은 한 번의 애니메이션에 대해 모든 속성들이 동시에 같은 duration을 가지고 진행되는데 비해, CALayer에 애니메이션 효과를 주는 방식은 뷰의 이동에 10초, 투명도 변화에 1초 등으로 세분화하는 것이 가능하다. 이 방식에 대해서는 다음 글에서 조금 더 다뤄 보도록 하겠다.
