[UIView] 애니메이션효과 주기

2012. 4. 5. 20:04제2외국어/iOS

Document에 있는 UIView관련 문서를 통해 UIView를 이리저리 다루어보겠습니다.

xCode에서 [option키]를 누른 상태에서 UIView를 클릭하시고,
레퍼런스를 누르셔서 살펴보실수 있습니다,


UIView를 살펴보시면 대강 저 저정도의 위치에 있고, 인터페이스빌드 또는 스토리보드에서
사용하는 대부분의 클래스의 부모입니다.


그럼 UIView에서 기본적으로 사용하는 애니메이션 효과를 살펴보겠습니다.


1. Alpha를 이용한, UIView 서서히 나타나거나 사라지는 효과.

[UIView animateWithDuration:1.0                 // 1.0초 동안
     animations:^{view.alpha = 0.0;}             // 애니메이션 투명도 0.0으로 만들기
     completion:^(BOOL finished){ [view removeFromSuperview]; }];
// completion을 통해 애니메이션이 끝나는 시점을 통해 +@를 할 수 있습니다.

: 간편하게 자주 이용되는 효과입니다. 예를 들어 버튼을 눌렀을 때, 또는 뷰가 로드될 때
이미지를 잠깐 보여줬다가 숨기거나, 뷰를 나타낼 수 있습니다


- 간단한 사용법
[UIView animateWithDuration:1.0 animations:^{
            otherView.alpha = 0.0; }];


- 응용하기

[UIView animateWithDuration:1.0
                          delay: 0.0
                        options: UIViewAnimationOptionCurveEaseIn
                     animations:^{
                         otherView.alpha = 0.0;
                     }
                     completion:^(BOOL finished){
                         // Wait one second and then fade in the view
                         [UIView animateWithDuration:1.0
                                               delay: 1.0
                                             options:UIViewAnimationOptionCurveEaseOut
                                          animations:^{
                                              otherView.alpha = 1.0;
                                          }
                                          completion:nil];
                     }];

: 1.0초 동안 otherView를 사라지게 한다음, 다 사라지고 난 후 다시 해당 뷰를 나타나게하는 방법입니다.



2. Frame를 이용한, UIView 움직이는 효과.

[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:0.5];
otherView.frame = CGRectMake(20,100, 280, 227);
[UIView commitAnimations];

: otherView의 처음 위치에서 CGRectMake(20,100, 280, 227) 까지 움직이는 효과를 구현한 소스입니다. 움직이는 속도는 setAnimationDuration의 시간을 조절해 주시면 되겠죠?

- 꼭 UIView뿐만 아니라 UIView의 하위 클래스들도 가능합니다.



3. 페이지넘어가는효과와 같은 여러 옵션들.

[UIView transitionWithView:self.view
                      duration:1.0
                       options:UIViewAnimationOptionTransitionCurlDown
                    animations:^{
                        subView.hidden = YES;
                        otherView.hidden = NO;
                    }

                        completion:^(BOOL finished){
                        // Save the old text and then swap the views.
                        // 스왑을 통해 이동한 뷰나 교체한 뷰를 표시합니다.
                        UIView*    temp = subView;
                        subView = otherView;
                        otherView = temp;
 ];

: animateWithDuration 가 아닌 transitionWithView 을 사용하고 options을 이용하여 뷰에서 뷰로 이동하거나 바꿀 때 여러가지 효과를 줄 수 있습니다.

UIViewAnimationOptionTransitionCurlDown : 이름에서 알 수 있듯이 페이지를 위에서 아래로  넘기는 효과입니다,

옵션의 종류입니다.

enum {
    UIViewAnimationOptionLayoutSubviews            = 1 <<  0,
    UIViewAnimationOptionAllowUserInteraction      = 1 <<  1,
    UIViewAnimationOptionBeginFromCurrentState     = 1 <<  2,
    UIViewAnimationOptionRepeat                    = 1 <<  3,
    UIViewAnimationOptionAutoreverse               = 1 <<  4,
    UIViewAnimationOptionOverrideInheritedDuration = 1 <<  5,
    UIViewAnimationOptionOverrideInheritedCurve    = 1 <<  6,
    UIViewAnimationOptionAllowAnimatedContent      = 1 <<  7,
    UIViewAnimationOptionShowHideTransitionViews   = 1 <<  8,
 
    UIViewAnimationOptionCurveEaseInOut            = 0 << 16,
    UIViewAnimationOptionCurveEaseIn               = 1 << 16,
    UIViewAnimationOptionCurveEaseOut              = 2 << 16,
    UIViewAnimationOptionCurveLinear               = 3 << 16,
 
    UIViewAnimationOptionTransitionNone            = 0 << 20,
    UIViewAnimationOptionTransitionFlipFromLeft    = 1 << 20,
    UIViewAnimationOptionTransitionFlipFromRight   = 2 << 20,
    UIViewAnimationOptionTransitionCurlUp          = 3 << 20,
    UIViewAnimationOptionTransitionCurlDown        = 4 << 20,
    UIViewAnimationOptionTransitionCrossDissolve   = 5 << 20,
    UIViewAnimationOptionTransitionFlipFromTop     = 6 << 20,
    UIViewAnimationOptionTransitionFlipFromBottom  = 7 << 20,
};
typedef NSUInteger UIViewAnimationOptions;


더욱 자세한건 레퍼런스를 통해서 확인 하실 수 있습니다.
가시면 샘플 소스도 있습니다.