iPhone UIView 애니메이션 모범 사례


142

iPhone에서 뷰 전환에 애니메이션을 적용하는 가장 좋은 방법은 무엇입니까?

예를 들어 ViewTransitionsapple 의 샘플 프로젝트는 다음과 같은 코드를 사용합니다.

CATransition *applicationLoadViewIn = [CATransition animation];
[applicationLoadViewIn setDuration:1];
[applicationLoadViewIn setType:kCATransitionReveal];
[applicationLoadViewIn setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
[[myview layer] addAnimation:applicationLoadViewIn forKey:kCATransitionReveal];

그러나 다음과 같이 그물 주위에 떠 다니는 코드 스 니펫도 있습니다.

[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.75];
[UIView setAnimationDelegate:self];
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:myview cache:YES];
[myview removeFromSuperview];
[UIView commitAnimations];

가장 좋은 방법은 무엇입니까? 스 니펫을 제공 할 수 있다면 대단히 감사하겠습니다.

참고 : 두 번째 방법으로 올바르게 작동하지 못했습니다.

답변:


118

로부터 UIView의 참조 정보]의 섹션 beginAnimations:context:방법 :

iPhone OS 4.0 이상에서는이 방법을 사용하지 않는 것이 좋습니다. 대신 블록 기반 애니메이션 방법을 사용해야합니다.

Tom의 설명을 기반으로 한 블록 기반 애니메이션의 예

[UIView transitionWithView:mysuperview 
                  duration:0.75
                   options:UIViewAnimationTransitionFlipFromRight
                animations:^{ 
                    [myview removeFromSuperview]; 
                } 
                completion:nil];

4
명확하게 말하자면, 두 번째 방법이 아닌 첫 번째 방법 (CATransition)을 사용한다는 의미입니까?
Steve N

2
예, 첫 번째 접근 방식입니다 (CATransition).
NebulaFox

16
@Steven N, 아니요, UIView대신 블록 기반 애니메이션을 사용한다는 의미 입니다. 그들은 본질적으로 beginAnimations친구와 동일 하지만 블록 / 폐쇄 기능을 사용합니다.
Dan Rosenstark

36
예, 그렇습니다. 블록 애니메이션은 다음과 같습니다 [UIView transitionWithView:mysuperview duration:0.75 options:UIViewAnimationTransitionFlipFromRight animations:^{ [myview removeFromSuperview]; } completion:nil]. 자세한 내용은 UIView 설명서를 확인하십시오.
Tom van Zummeren

3
3.1.3 전화를 지원하려는 경우를 제외하고. 그런 다음 블록을 사용하지 마십시오.
ZaBlanc

69

나는 멋진 멋진 애니메이션을 위해 후자를 사용했습니다. 두 개의 뷰를 크로스 페이드로 사용하거나 다른 뷰를 페이드 아웃하거나 페이드 아웃 할 수 있습니다. 배너처럼 다른 화면을 통해 사진을 찍을 수 있고, 화면을 늘리거나 줄일 수 있습니다 . beginAnimation/ 에서 마일리지가 많이 발생합니다 commitAnimations.

당신이 할 수있는 모든 것이 있다고 생각하지 마십시오 :

[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight forView:myview cache:YES];

다음은 샘플입니다.

[UIView beginAnimations:nil context:NULL]; {
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
    [UIView setAnimationDuration:1.0];
    [UIView setAnimationDelegate:self];
    if (movingViewIn) {
// after the animation is over, call afterAnimationProceedWithGame
//  to start the game
        [UIView setAnimationDidStopSelector:@selector(afterAnimationProceedWithGame)];

//      [UIView setAnimationRepeatCount:5.0]; // don't forget you can repeat an animation
//      [UIView setAnimationDelay:0.50];
//      [UIView setAnimationRepeatAutoreverses:YES];

        gameView.alpha = 1.0;
        topGameView.alpha = 1.0;
        viewrect1.origin.y = selfrect.size.height - (viewrect1.size.height);
        viewrect2.origin.y = -20;

        topGameView.alpha = 1.0;
    }
    else {
    // call putBackStatusBar after animation to restore the state after this animation
        [UIView setAnimationDidStopSelector:@selector(putBackStatusBar)];
        gameView.alpha = 0.0;
        topGameView.alpha = 0.0;
    }
    [gameView setFrame:viewrect1];
    [topGameView setFrame:viewrect2];

} [UIView commitAnimations];

보시다시피 알파, 프레임 및보기 크기까지 재생할 수 있습니다. 놀아 당신은 그 기능에 놀랄 수 있습니다.


52

차이점은 애니메이션에 필요한 제어량 인 것 같습니다.

CATransition접근 방식을 통해보다 많은 제어 기능을 제공 할 수 있습니다. 타이밍 기능. 객체이기 때문에 나중에 저장하고 리 팩터하여 모든 애니메이션이 객체를 가리 키도록하여 코드 복제 등을 줄일 수 있습니다.

UIView클래스 메소드는 일반적인 애니메이션 편리한 방법이지만,보다 더 제한됩니다 CATransition. 예를 들어 네 가지 가능한 전환 유형 (왼쪽으로 뒤집기, 오른쪽으로 뒤집기, 말림, 말림) 만 있습니다. 페이드 인을 원한다면 CATransition's페이드 전환으로 내려가 거나 UIView알파 의 명시적인 애니메이션을 설정해야합니다 .

참고 CATransitionMac에서 OS X 사용자가 임의 지정하게됩니다 CoreImage전환으로 사용하는 필터를하지만, 지금 서 당신이 부족 아이폰에이 작업을 수행 할 수 없습니다 CoreImage.


7
이것은 iOS 2.0 시대의 조언입니다. iOS 4.0 이상인 경우 블록 기반 방법에 대한 Rafael Vega의 답변을 참조하십시오.
Ryan McCuaig

CoreImage는 이제 iOS 5부터 사용할 수 있지만 그 기능 중 일부만 제공됩니다. 애니메이션에서 CoreImage 전환을 사용할 수 있다고 생각하지만 iOS에서 사용자 정의 CoreImage 필터를 만들 수는 없습니다 (5).
Aaron Ash

26

이 간단한 코드를 사용하여 iOS 5의 이미지에 애니메이션을 적용 할 수 있습니다.

CGRect imageFrame = imageView.frame;
imageFrame.origin.y = self.view.bounds.size.height;

[UIView animateWithDuration:0.5
    delay:1.0
    options: UIViewAnimationCurveEaseOut
    animations:^{
        imageView.frame = imageFrame;
    } 
    completion:^(BOOL finished){
        NSLog(@"Done!");
    }];

5
이것은 iOS 4에서도 사용 가능하며 "블록 기반"애니메이션이라고합니다. iOS 5 이상으로 제한되지 않습니다.
johnbakers

8

에서 UIView문서,이 기능에 대한 읽기를 ios4 +

+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^)(BOOL finished))completion

6

어쨌든 "블록"방법은 오늘날 선호됩니다. 아래 간단한 블록을 설명하겠습니다.

아래에서 도청을 고려하십시오. bug2와 bug 3은 imageViews입니다. 아래 애니메이션은 1 초 지연 후 1 초 지속되는 애니메이션을 설명합니다. bug3이 중심에서 bug2의 중심으로 이동되었습니다. 애니메이션이 완료되면 "Center Animation Done!"으로 기록됩니다.

-(void)centerAnimation:(id)sender
{
NSLog(@"Center animation triggered!");
CGPoint bug2Center = bug2.center;

[UIView animateWithDuration:1
                      delay:1.0
                    options: UIViewAnimationCurveEaseOut
                 animations:^{
                     bug3.center = bug2Center;
                 } 
                 completion:^(BOOL finished){
                     NSLog(@"Center Animation Done!");
                 }];
}

깨끗하길 바래!


2
CGPoint bug3.center를 bug3Center에 할당 한 후 CGPoint bug2.center를 동일한 변수 bug3Center에 할당합니다. 왜 그것을하고 있습니까 ?
pnizzle

죄송합니다 !! 그건 오타 친구들입니다. 지금 업데이트되었습니다.
Deepukjayan

2

부드러운 애니메이션을위한 코드는 다음과 같습니다. 많은 개발자에게 도움이 될 수 있습니다.
이 튜토리얼에서이 코드 스 니펫을 찾았습니다.

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
[animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
[animation setAutoreverses:YES];
[animation setFromValue:[NSNumber numberWithFloat:1.3f]];
[animation setToValue:[NSNumber numberWithFloat:1.f]];
[animation setDuration:2.f];
[animation setRemovedOnCompletion:NO];

[animation setFillMode:kCAFillModeForwards];
[[self.myView layer] addAnimation:animation forKey:@"scale"];/// add here any Controller that you want t put Smooth animation.

2

Swift 3를 사용 해보고 체크 아웃하십시오 ...

UIView.transition(with: mysuperview, duration: 0.75, options:UIViewAnimationOptions.transitionFlipFromRight , animations: {
    myview.removeFromSuperview()
}, completion: nil)
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.