코코아 뷰 애니메이션 구현하기

코코아 애니메이션 가이드에서는 뷰를 Layer-Backed 뷰로 만든다음, 뷰의 레이어(CALayer)의 속성을 변경하면, CALayer에 의해서 암시적으로 해당 속성이 변경되는 동작이 애니메이팅된다고 한다. 하지만 실제로 이를 써보면 안된다. 그래서 조금 찾아보았더니 두 가지 문제가 있었다.

코코아 뷰 애니메이션 구현하기 더보기

[iOS/OSX] 코어애니메이션 기본 개념

코어 애니메이션의 레이어

레이어 객체는 3차원 공간에 구성된 2차원 평면으로, 코어 애니메이션의 핵심이 되는 개념이다. 뷰와 비슷하게 레이어는 2차원 면의 기하학적 좌표정보, 콘텐츠, 시각적 속성등을 관리하게 된다. 하지만 뷰와는 달리 레이어는 그 스스로의 외양에 대해서는 정의하지 않는다. 레이어는 단지 비트맵을 둘러싸고 있는 상태 정보만을 관리한다. 이 비트맵은 뷰의 그려진 결과물이거나 지정한 비트맵 파일의 내용일 수 있다. 따라서 앱에서 사용하는 메인 레이어는 일종의 데이터 모델로 취급할 수 있으며 이러한 점은 애니메이션에 영향을 주는 것이므로 기억하고 넘어가야 한다.

[iOS/OSX] 코어애니메이션 기본 개념 더보기

코어 애니메이션 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초 등으로 세분화하는 것이 가능하다. 이 방식에 대해서는 다음 글에서 조금 더 다뤄 보도록 하겠다.

코어애니메이션 시작하기

코어 애니메이션은 뷰의 콘텐츠의 기하학적 특성등을 이동, 확대/축소, 회전 등을 결합하여 변형하며 애니메이팅하는데 적합하다.

아래와 같이 궤도를 도는 원의 주위를 도는 더 작은 원과, 다시 그 작은 원 주위를 도는 가장 작은 원의 움직임을 코어 애니메이션으로 묘사해보자. 이 때 그려지는 이미지는 CAShapeLayer를 사용해서 패스를 통해 그릴 수도 있겠지만, 간단한 원이기 때문에 레이어의 모서리를 둥글려서 표현할 것이다.

그려지는 모든 궤도는 테두리로 그려지는 원과 원 위의 작은 원으로 구성된다. 그러한 궤도를 CALayer로 만들어주는 함수 orbit(with: color:)를 다음과 같이 작성할 수 있다. 기본적으로 궤도를 표현하는 레이어가 있고, 다시 궤도 위의 위성을 표현하는 레이어를 만든 다음, 위성 레이어를 궤도 레이어에 서브 레이어로 추가해주면 된다.

func orbit(with diameter: CGFloat, color: NSColor) -> CALayer {

    // 궤도를 표현하는 원
    let _orbit = CALayer()
    _orbit.bounds = CGRect(x: 0, y: 0, width: diameter, height: diameter)
    _orbit.cornerRadius = diameter / 2
    _orbit.borderColor = color.cgColor
    _orbit.borderWidth = 1.5
    
    // 궤도 상의 위성을 표현하는 원
    let planet = CALayer()
    let r = diameter / 10
    planet.bounds = CGRect(x: 0, y: 0, width: r, height: r)
    planet.borderWidth = 1.5
    planet.cornerRadius = r/2
    planet.backgroundColor = color.cgColor
    planet.borderColor = color.cgColor
    planet.borderWidth = 1.5
    planet.borderColor = color.cgColor
    // 상위 레이어의 원점을 기준으로
    // 6시 방향에 위치하도록
    // X는 중간, Y는 0 
    planet.position = CGPoint(x: diameter/2, y: 0)
    
    _orbit.addSublayer(planet)
    return _orbit
}

다음 코드는 애니메이션 객체를 만든다. 무한 회전을 반복하면 되며, 이 때 변할 수 있는 값은 회전속도 즉, 지속시간이다 한 바퀴 도는데 얼마나 걸리는지를 정해서 넘겨주면 그에 맞는 애니메이션을 생성하는 함수 animation(with:) 를 다음과 같이 작성할 수 있다.

회전하는 애니메이션은 CABasicAnimation으로 만들어지는데, 애니메이션이 추가될 레이어의 transform.rotation 키패스의 속성값을 조작하게 될 것이다.

참고로 회전하는 동작 자체에는 가속이나 감속이 적용되지 않을 예정이므로 애니메이션의 타이밍 함수를 선형으로 지정해줄 필요가 있다.

func animation(with duration: Double) -> CABasicAnimation {
    let anim = CABasicAnimation(keyPath: "transform.rotation")
    anim.timingFunction = CAMediaTimingFunction(name: .linear)
    anim.fromValue = 0
    anim.toValue = 2 * Double.pi // 2pi = 360'
    anim.duration = duration
    anim.repeatCount = HUGE
    return anim
}

이제 회전하는 레이어를 만드는 것은 간단하다. 레이어의 add(_:forKey:) 메소드를 호출하여 애니메이션을 추가한다. 이 때의 키는 애니메이션을 구분하기 위한 용도이며, 레이어의 특정한 키패스를 가리키는 항목이 아니다.

이제 세 개의 궤도를 만들고 각각을 연결한 후 애니메이션을 달아보자.

class ViewController: NSViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.wantsLayer = true
        view.layer?.backgroundColor = NSColor.white.cgColor
        
        let orbit1 = orbit(with: 200, color: .red)
        let orbit2 = orbit(with:120, color: .blue)
        let orbit3 = orbit(with:30, color: .green)
        orbit1.position = CGPoint(x:view.frame.midX, y: view.frame.midY)
        orbit2.position = CGPoint(x: 100, y:0)
        orbit3.position = CGPoint(x: 60, y: 0)
        
        orbit2.addSublayer(orbit3)
        orbit1.addSublayer(orbit2)
        
        orbit1.add(animation(with: 5.0), forKey: "orbit1")
        orbit2.add(animation(with: 3.5), forKey: "orbit2")
        orbit3.add(animation(with: 1.1), forKey: "orbit3")

        
        view.layer?.addSublayer(orbit1)
        
    }
}