아이폰에서는 애니메이션을 쉽게 구현할 수 있는 수단들을 제공한다

UIView의 위치 이동, 크기변경, 회전, 페이드인/아웃 등과 간단한 애니메이션은 UIView 애니메이션을

사용해서 구현할 수 있다. UIView 클래스에 애니메이션을 위한 메서드들이 존재하며, 

iOS 4.0 부터는 블럭방식의 애니메이션 메소드를 제공해서 코드단에서 편리하게 구현할 수 있다. 

CoreAnimation은 CALayer 단에 적용되며, UIView 애니메이션 효과를 구현할 수 있을 뿐만 아니라  

좀더 복잡하고 세밀한 애니메이션 효과를 줄 수 있다.  하지만 UIView 애니메이션보다는 코딩량이 좀더 많고 번거롭다 

간략히 UIView 애니메이션과 코어 애니메이션을 사용하는 방법에 대해서 알아보자

다음은 UIView를 사용하여 구현한 푸시 애니메이션(네비게이션 푸시가 아니라, 버튼이 움푹 눌리는 듯한 효과)과 

CoreAnimation을 사용하여 구현한 플립 애니메이션(y축을 기준으로 뒤집어 지는 듯한 효과)이다 

1. UIView 애니메이션을 사용한 푸시효과

구현방식은 터치가 발생하면 x, y축 스케일(scale)을 0.3초 동안 0.9로 축소하고

다시 0.3 초 동안 1.0으로 되돌아 오는 효과를 적용했다. UI 요소가 눌리는 듯한 효과를 줄 수 있으며, 인터렉티브한 

느낌을 줄 수 있어서 자주 사용하는 효과중에 하나이다. 

 [UIView animateWithDuration:0.3 animations:^(void) {
        self.transform = CGAffineTransformMakeScale(0.9, 0.9);
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:0.3 animations:^(void) {
            self.transform = CGAffineTransformIdentity;
        }];
    }];

animations 블럭에서 속성을 변경하는 코드가 비동기 방식으로 (메인쓰레드에서) 애니메이션되는 방식이다. 

위 코드는 가로, 세로 Scale을 각각 0.9로 변환하는 애니메이션을 0.3초 동안 수행하고, 

애니메이션이 완료(completion) 하면 원래 스케일로 복원하는 애니메이션을 다시 0.3초 동안 수행한다. 

CGAffineTransform 즉 아핀변환은 벡터에서 등장하는 용어로 변환을 행렬을 사용해서 나타낸 것이라는 정도만 알아두자.

2. CoreAnimation을 사용한 플립효과 

CoreAnimation 은 UIView가 아닌 CALayer에 적용되며, 애니메이션할 CALayer의 property를  지정하고 

애니메이션 상태를 좀더 세밀하게 제어할 수 있는 속성을 제공한다. 

플립 애니메이션을 구현하는 동안 주의할 점은  y축을 기준으로 회전을 하면 이미지가 좌우가 뒤집어 지는 

현상이 발생한다는 것이다.  레이어를 회전시켰기 때문에 뒤집어 지는 것이다. 

이문제는 먼저 90도를 회전 시키고, -90로 뒤집은 상태에서 다시 나머지 회전을 수행하는 방식을

사용하면 해결 할 수 있다. 

- (void)flip {
    // 90도 회전 
    CABasicAnimation *rotateY = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];
    rotateY.beginTime = 0.0;
    rotateY.toValue = [NSNumber numberWithFloat:radians(90)];
    rotateY.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    rotateY.autoreverses = NO;
    rotateY.repeatCount = 1;
    rotateY.removedOnCompletion = NO;
    rotateY.duration = 0.4;
    rotateY.fillMode = kCAFillModeForwards;
    
    // -90도로 뒤집은 상태에서 나머지 회전
    CABasicAnimation *rotateY2 = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];
    rotateY2.beginTime = 0.4;
    rotateY2.fromValue = [NSNumber numberWithFloat:radians(-90)];
    rotateY2.toValue = [NSNumber numberWithFloat:radians(0)];
    rotateY2.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    rotateY2.autoreverses = NO;
    rotateY2.repeatCount = 1;
    rotateY2.removedOnCompletion = NO;
    rotateY2.duration = 0.4;
    rotateY2.fillMode = kCAFillModeForwards;
    
    CAAnimationGroup *group = [CAAnimationGroup animation];
    group.animations = [NSArray arrayWithObjects:rotateY, rotateY2, nil];
    group.duration = 0.8;
    group.autoreverses = NO;
    group.repeatCount = 1;
    group.removedOnCompletion = NO;
    group.fillMode = kCAFillModeForwards;
    group.delegate = self;
    
    [self.layer addAnimation:group forKey:nil];   
}

CAAnimationGroup은 동시에 여러 애니메이션을 복합적으로 적용할 때 사용하며,  CABasicAnimation의  

beginTime 속성을 사용해서 애니메이션 시작 시점을 조정할 수 있다. 총 0.8초 동안의 시간동안 처음 0.4초 동안

90도 회전하고, 0.4초 후 -90도 뒤집어진 상태에서 0도로 0.4초 동안 회전시켜 마치 카드가 자연스럽게 

뒤집어 지는 듯한 플립효과를 구현하였다

거의 대부분의 애니메이션은 UIView 애니메이션으로 구현할 수 있지만 

UI/UX에 특화된 좀더 재미나고 멋진 효과를 가진 앱을 개발하고 싶다면 코어 애니메이션 사용을 주저하지 말자!

소스코드

AnimButtton_for_bloging.zip