1. UIView Transition 관련 Method 소개
 

 1.1 [UIView transitionFromView:toView:duration:options:completion:]

duration 동안  
FromView에서 toView로 장면 전환을 하며 options에서 적용한대로 트랜지션애니메이션이 불리며 끝난 후 completion 블록이 호출된다.
또한 fromView는 removeFromSuperview가 호출되고 toView는 addSubview가 알아서 호출된다.

[UIView transitionFromView:self.view1Controller.view 
                    toView:self.view2Controller.view duration:0.7 
                    options:UIViewAnimationOptionTransitionCurlUp 
                completion:^(BOOL finished){    
                    }];


 1.2 [UIView transitionWithView:duration:options:animations:completion:]


duration동안 transition이 일어날 containerView는  options에서 적용한 트랜지션애니메이션이 불리며 불리는 동안 block-based animation을 수행하고 completion 블록이 호출된다. 

 


[UIView transitionWithView:containerView
           duration:0.2
           options:UIViewAnimationOptionTransitionFlipFromLeft
           animations:^{ [fromView removeFromSuperview]; [containerView addSubview:toView]; }
           completion:^(BOOL finished){ // do something}];


 

 1.3 둘 간의 차이점.
    + transitionWithView의 경우는 AddSubview를 쓰든 view.hidden = YES를 주던 CAAnimation을 추가하던 block-based animation에서 다양한 상황을 제어/추가 할 수 있다.  

    + transitionFromView는 option을 주는 것외에는 화면 전환 애니메이션이 끝날 때까지는 다른 행동을 추가 하지 못한다.

 

1.4 트랜지션 옵션 (UIViewAnimationOptions)

UIViewAnimationOptionTransitionNone
No transition is specified.
Available in iOS 4.0 and later.
Declared in UIView.h.
 
UIViewAnimationOptionTransitionFlipFromLeft
A transition that flips a view around its vertical axis from left to right. The left side of the view moves toward the front and right side toward the back.
Available in iOS 4.0 and later.
Declared in UIView.h.

UIViewAnimationOptionTransitionFlipFromRight
A transition that flips a view around its vertical axis from right to left. The right side of the view moves toward the front and left side toward the back.
Available in iOS 4.0 and later.
Declared in UIView.h.

UIViewAnimationOptionTransitionCurlUp
A transition that curls a view up from the bottom.
Available in iOS 4.0 and later.
Declared in UIView.h.

UIViewAnimationOptionTransitionCurlDown
A transition that curls a view down from the top.
Available in iOS 4.0 and later.
Declared in UIView.h.

-------------------------- iOS5 and later only

UIViewAnimationOptionTransitionCrossDissolve
A transition that dissolves from one view to the next.
Available in iOS 5.0 and later.
Declared in UIView.h.
UIViewAnimationOptionTransitionFlipFromTop
A transition that flips a view around its horizontal axis from top to bottom. The top side of the view moves toward the front and the bottom side toward the back.
Available in iOS 5.0 and later.
Declared in UIView.h.
UIViewAnimationOptionTransitionFlipFromBottom
A transition that flips a view around its horizontal axis from bottom to top. The bottom side of the view moves toward the front and the top side toward the back.
Available in iOS 5.0 and later.
Declared in UIView.h.

2. iOS 4.x 에서 CrossFade 화면 전환은 어떻게 해야 할까? 
   
UIViewAnimationOptionTransitionCrossDissolve는 iOS 5.0 이상에서만 지원된다. 따라서 CAAnimation을 이용해야 한다.

 1.우선 CAAnimation 사용을 위해 QuartzCore.framework을 BuildPhases -> Link Binary With Libraries에 추가한다.
 2. CATransition 코드를 사용하기 위하여 헤더를 임포트 한다 #import <QuartzCore/CAAnimation.h>
 
<예제 1> 아래 예제는 TopView위에 curController.view가 올라가 있는 상황에서 TopView로 화면을 전환하는 상황이다.
 

     [UIView animateWithDuration:0.7 delay:0 options: UIViewAnimationOptionCurveEaseInOut  animations:^{ 
        
            CATransition *animation = [CATransition animation];
            [animation setDuration:0.7];
            [animation setType:kCATransitionFade];
            [topViewController.view.layer addAnimation:animation forKey:nil];            
            
        } completion:^(BOOL finished) {
            [curController.view removeFromSuperview];
            [curController release];
            menuController = nil;
        }];


<예제 2>  아래 예제는 TopView에 curController.view를 넣는 CrossFade 상황이다. 

[UIView animateWithDuration:1.0 delay:0 options: UIViewAnimationOptionCurveEaseInOut  animations:^{ 
        
    CATransition *animation = [CATransition animation];
    [animation setDuration:1.0];
    [animation setType:kCATransitionFade];
    [self.viewController.view.layer addAnimation:animation forKey:nil];                 
    } completion:^(BOOL finished) {
        [topViewController.view addSubview:curController.view];
}];


3. 예제  


위내용들을 포함한 예제를 공개합니다.

ViewController ___ view1stController
                    |___ view2ndController

위 구조에서 화면 전환 효과를 보여줍니다.
 
** 참고

iOS 4.xx의 경우는 nested ViewController를 지원 하지 않기 때문에
viewDidApper / viewDidDisappear 등이 호출 되지 않습니다.
 

다음 2/2에서는 UINavigationController에서 transition animation을 적용하는 법을 설명하겠습니다. 
저작자 표시 비영리 변경 금지
신고


티스토리 툴바