[옛 글] [iPhone] 페이지 넘김 효과 구현

최초 작성일 : 2011/08/18 13:42 

import해야 할 Framework : <QuartzCore/QuartzCore.h>

* layer와 CATransaction 사용을 위해 QuartzCore Framework를 import 해야 함.

*CATransaction은 다중의 layer 계층에서 발생하는 변경사항을 일괄처리하는 Core Animation 메카니즘으로 layer 계층에서 발생하는 모든 변경사항을 감지하여 처리한다.

*CATransition은 layer가 다른 상태로 이행하는 Animation의 처리를 담당하는 클래스다.

*예제코드

// 트랜잭션 시작을 알림

[CATransaction begin];

// 속성 지정 (자세한 내용은 API 문서 참조...^^;;;)

[CATransaction setValue:[NSNumber numberWithBool:YES]                              forKey:kCATransactionDisableActions];

[CATransaction setValue:[NSNumber numberWithFloat:0.5f]                            forKey:kCATransactionAnimationDuration];

    

// 애니메이션 설정

CATransition *push = [CATransition animation];

[push setType:@"pageCurl"];    

push.subtype = kCATransitionFromLeft;    

/*

애니메이션 타입은 새로운 뷰가 나타나면서 보여지는 주된 효과를 의미한다.

이 효과들은 API에 명시되어있지 않지만 리젝 사유가 되지는 않는다.

Common Transition Types은 뷰가 새롭게 나타나거나 사라질 때의 효과를 의미한다. 실제로 API 문서상에 나와있는 것은 이 4가지가 전부이다.

Common Transition Subtypes는 애니메이션일어나는 방향을 의미한다. 

 Animation type List

 

 - pageCurl            다음 장으로 페이지를 넘기는 효과

 - pageUnCurl          이전 장으로 페이지를 넘기는 효과

 - suckEffect

 - spewEffect

 - cameraIris

 - cameraIrisHollowOpen

 - unGenieEffect

 - cameraIrisHollowClose

 - genieEffect

 - rippleEffect

 - twist

 - tubey

 - swirl

 - charminUltra

 - zoomIn

 - zoomOut

 - oglFlip

 - Common Transition Types

 NSString * const kCATransitionFade;

 NSString * const kCATransitionMoveIn;

 NSString * const kCATransitionPush;

 NSString * const kCATransitionReveal;

 

 -Common Transition Subtypes

 NSString * const kCATransitionFromRight;

 NSString * const kCATransitionFromLeft;

 NSString * const kCATransitionFromTop;

 NSString * const kCATransitionFromBottom;

*/

// 생성된 CATransition의 인스턴스를 애니메이션의 효과가 보여질 뷰의

// layer에 할당한다. 따라서 이 부분을 잘못 설정하면 어뚱한 뷰에서 애니메이션이

// 일어나게 되므로 잘 확인을 해야 한다.

[paperBG.layer addAnimation:push forKey:kCATransition];

    

// 뷰의 제거나 생성 후 붙이는 작업을 처리한다.

[mutableGrid removeFromSuperview];

[mutableGrid release];

    

mutableGrid = [[CPMutableGridView alloc] initWithFrame:CGRectMake(7.0f, 10.0f,233.0f, 352.0f)];

mutableGrid.showsVerticalScrollIndicator = NO;

mutableGrid.delegate = self;

[mutableGrid setDatasource:self];

   

[paperBG addSubview:mutableGrid];

    

// 애니메이션 종료를 알림

[CATransaction commit];

어려운 내용은 없지만 막상 필요할 때 이것저것 찾아봐야 하는 내용이라

정리를 해보았다. 특히나 pageCurl의 경우 사람들이 선호하는 애니메이션이라서

자주 사용을 하게 되는데 pageCurl과 pageUnCurl 그리고 kCATransitionFromRight, kCATransitionFromLeft의 조합을 잘 해야

자연스러운 페이지 넘김 효과가 보여진다.

예를들어 디자인상으로 책의 왼쪽 페이지가 화면에 보여지는 상태라면

Common Transition Subtype은 kCATransitionFromLeft으로 고정을 하고

이전 페이지로 가는 효과는 pageUnCurl로 이후 페이지로 가는 효과는 pageCurl로

주면 된다.

이거 조합하느라고 꽤나 삽질했다...ㅠ.ㅠ