Money in Mobile

12장 애니메이션

온라인주소: http://lingostar.co.kr/wp/archives/648

Animation , Dynamic UI

에니메이션은 UI적인 접근을 위한 것이다

에니메이션 오버뷰 / 잔상 효과,  

 - NSTimer / 초창기 사용
- NSAnimation / 10.4때 만들어졌다. 거창해 보이지만 그냥 NSTimer에 이지인, 이지아웃기능을 넣은 간단한 것이다.

• CoreAnimation / 에니메이션 엔진을 만들었다.
• 
  

Dynamic UI의 정수: 타임머신, 스페이시스, 아이툰즈의 커버플로우,
 - 반복적인 움직임.. 

View Animation을 몸풀기로 만들어 보자

 - 간단히 에니메이션을 얻어오는 것이다.
 - 비깅 컴인만 해 주면 에니메이션된다.

 - 만들자 MovingMoving

 1) UIView, Button을 넣는다.

 - 아웃렛, 액션 하나가 있어야 할 것이다

헤더파일

#import <UIKit/UIKit.h>

@interface MovingMovingAppDelegate : NSObject <UIApplicationDelegate> {

UIWindow *window;

UIView *movingView;

}

- (IBAction)move:(id)sender;

@property (nonatomic, retain) IBOutlet UIWindow *window;

@property (nonatomic, retain) IBOutlet UIView *movingView;

@end

임플리멘테이션파일

#import "MovingMovingAppDelegate.h"

@implementation MovingMovingAppDelegate

@synthesize window;

- (void)applicationDidFinishLaunching:(UIApplication *)application {    

// Override point for customization after application launch

    [windowmakeKeyAndVisible];

}

- (void)dealloc {

    [window release];

    [super dealloc];

}

- (IBAction)move:(id)sender

{

movingView.center = CGPointMake(240, 400);

movingView.backgroundColor = [UIColoryellowColor];

movingView.transform = CGAffineTransformMakeRotation(90);

}

@end

이제 에니메이션 주자.

- (IBAction)move:(id)sender
{

[UIViewbeginAnimations:@"Moving"context:nil];

[UIViewsetAnimationDuration:2];

movingView.center = CGPointMake(240, 400);

movingView.backgroundColor = [UIColoryellowColor];

movingView.transform = CGAffineTransformMakeRotation(90);

[UIViewcommitAnimations];

}

블럭이 천천히 음직이려면

[UIViewsetAnimationCurve:UIViewAnimationCurveEaseInOut];

여기서 보면 에니메이션의 시작과 종료의 기준은 아래 것이다.

[UIViewbeginAnimations:@"Moving"context:nil]; // 시작

[UIViewcommitAnimations];  // 종료

현재까지는 코어에니메이션을 사용한 것이다. 코어 그래픽스는 어제 한 것이다. 

코코아터치는 코어 에니메션에 떠받혀져 있다.

따라서 UIKit은 코어에니메이션을 잠간 빌려서 사용할 수 있다.
에니메이션을 동작을 잠간 고민해 보자

상기 에니메이션 불럭을 바깥으로  컬러변경코드를 옮겨 보자.

[UIViewbeginAnimations:@"Moving"context:nil];

[UIViewsetAnimationDuration:2];

[UIViewsetAnimationCurve:UIViewAnimationCurveEaseInOut];

movingView.center = CGPointMake(240, 400);

movingView.transform = CGAffineTransformMakeRotation(90);

[UIViewcommitAnimations];

movingView.backgroundColor = [UIColoryellowColor];

그럼 움직이기전에 컬러값이 변경된후 움직이게 된다.

이렇게 되는 이유는 왜 그런지를 생각해 보라..

1초 딜레이를 주고 변하는 코드는 다음과 같다

[movingViewperformSelector:@selector(setBackgroundColor:) withObject:[UIColoryellowColor]afterDelay:1];

여기까지가 12-2까지 이다 

12-3 ~ 4까지 읽어 보라
12-5를 실습하자.

CoreAnimation Role을 만들어보자. (12.4.3 설명)

CABasicAnimation, CAKeyframeAnimation만 사용할 수 있고 나머지는 직접적으로 사용할 수는 없다.

CAAnimationGroup: 

패스를 갖는(반복)은 CAKeyframeAnimation으로 만들어야 한다.

아래 두개는 서로 약간다르다.

CALayer, CGLayer: 

CALayer : 코어에니메이션의 오브젝트 GPU가속이 되는 오브젝트로 하드웨어 가속이 가능하다. 

   이차원, 삼차원정의를 갖는 이차원 평명

  콘테츠로는 

   Quartz image, Quartz drawing, CoreText(Mac), OpenGL, Quarz Composer, QuickTime..(Mac)

Keyframe Animation Code

-  패스를 따라서 움직일 것이다.

새로운 프로젝터:

1.Helicopter를 만든다.

2.리소스를 넣어준다.  (Copy items into destination group's forlder를 체크해 준다)

Heli_1, 2, 3을 복사한다.

책 350페이지를 보자.

에니메이션 3가지 종류

1)UIView

 시작과 끝을 정의해서 한것.. MovingMoving

2)ImageAnimation 

    사람이 걷는 경우 걷는 이미지가 여러장이 있다. 이것은 코어에니메이션과는 전혀 상관이 없다. / 아주 많이 사용하는 방식

   Helicopter프로젝터 방식읻.

3)

4.인터페이스 빌더에서 미디어에서 이미지르 끌어다 놓는다

   버턴 두개.

5.프레임웤 추가 QuartzCore framework추가 / 임포트 하구
6. 아웃렛와 액션을 만든다. / 저장하고

#import <UIKit/UIKit.h>

#import <QuartzCore/QuartzCore.h>

@interface HelicopterAppDelegate : NSObject <UIApplicationDelegate> {

UIWindow *window;

UIImageView *helicopterImageView;

}

- (IBAction)toggleFly:(id)sender;

- (IBAction)moveThroughPath:(id)sender;

@property (nonatomic, retain) IBOutlet UIWindow *window;

@property (nonatomic, retain) IBOutlet UIImageView *helicopterImageView;

@end

7.인터페이스빌더에서 상호 연결

8. 초기 정의와 액션을 코딩한다.

#import "HelicopterAppDelegate.h"

@implementation HelicopterAppDelegate

@synthesize window;

@synthesize helicopterImageView;

- (void)applicationDidFinishLaunching:(UIApplication *)application {

UIImage *heli1 = [UIImageimageNamed:@"Heli_1.png"];// 로컬의 이미지를 리소스를 읽어 오는 방법

UIImage *heli2 = [UIImage imageNamed:@"Heli_2.png"];

UIImage *heli3 = [UIImage imageNamed:@"Heli_3.png"];

NSArray *animationImageArray = [NSArray arrayWithObjects:heli1, heli2, heli3, nil];

helicopterImageView.animationImages = animationImageArray;

// Override point for customization after application launch

    [windowmakeKeyAndVisible];

}

- (void)dealloc {

    [window release];

    [super dealloc];

}

- (IBAction)toggleFly:(id)sender

{

if ([helicopterImageViewisAnimating]) {

[helicopterImageViewstopAnimating];

} else{

[helicopterImageViewstartAnimating];

}

}

- (IBAction)moveThroughPath:(id)sender

{

}

@end

9. KeyframAnimation을 만들어보자

- (IBAction)moveThroughPath:(id)sender

{

// Create path

CGPoint currCenter = helicopterImageView.center;  // 시작포인터가된다.

// S자곡선을 3가지콘트롤포인터가생긴다.

CGMutablePathRef aniPath = CGPathCreateMutable();

CGAffineTransform xform = CGAffineTransformIdentity;

CGPoint dest1 = CGPointMake(160, 200);

CGPoint dest2 = CGPointMake(160, 400);

// 이후패스를넣어준다. 콘트롤두개인베젤코드

CGPathMoveToPoint(aniPath, &xform, currCenter.x, currCenter.y);

CGPathAddCurveToPoint(aniPath, &xform, 0, 50, 0, 50, dest1.x, dest1.y);

CGPathAddCurveToPoint(aniPath, &xform, 310, 350, 310, 350, dest2.x, dest2.y);

// Create Animation Object 에니메이션을 설계하는 것이다.

CAKeyframeAnimation *keyAni = [CAKeyframeAnimationanimation];

keyAni.duration = 4.0;

keyAni.path = aniPath;

// Apply Animation  ㅊCALayer에 패스를 넘기겨 주는 것이다

// 뷰뒤에레이어가다숨어있다고보면이해가편해진다.

[helicopterImageView.layeraddAnimation:keyAni forKey:@"position"];//이순간 GPU에올라간다.

}

베젤 곡선을 코드 한줄로 변경해 보자.

//CGPathAddCurveToPoint(aniPath, &xform, 0, 50, 0, 50, dest1.x, dest1.y);

//CGPathAddCurveToPoint(aniPath, &xform, 310, 350, 310, 350, dest2.x, dest2.y);

CGPathAddCurveToPoint(aniPath, &xform, -200, 50, 500, 350, dest2.x, dest2.y);

결과는 다음과 같다.

에니메이션의 설계......음직임의 설계는 동일하며 내용만 달라진다... 애플도 이런 효고를 많이 사용한다.

추가로 하자.

버턴도 패스에 따라서 에니메이션 된다.

215페이지에 보면 UIView의 하부 것들은 모두 에니메이션 처리가 가능하다.

뷰에니메이션을 쌓주면 가능하다. 모든 프로퍼티가 다 에니메이션이 되는 것은 아니다. 

뷰의 프로퍼티가 되는 것은 에니메이션이된다.

모델과 프린젠테이션이 나누어져 있다.
에니메이션되는 것은 프리젠테이션이 되는 것이고 모델은 그대로 있다.

그래서 버턴이 움직일때 모델은 그대로 그 위치에 있어서 터치시 이벤트를 받고

움직이는 버턴을 클릭했을때는 반응이 없는 것이다

12.5.7
게임을 위한 확장

 중간에 장애물이 있을때에 대한 처리.. NSTimer를 사용해서 충돌 체크해 주는 것이다.
 360페이지 CGRectIntersectsRect이 중요한 함수 일 것이다

12.6.0 

코어에니메이션에 대해서 조금더 볼 것이다.

코아슬라이드라는 맥용 어플리케이션이 있다.

큰이미지는 UIView로는 할 수 없구. 타일드해야 해야 하는데 CALayer의 타일링 레이어를 사용해야 하다.

      큰PDF 파일을 헨들링

불꽃예제.. 2개의 큐뷰가 돌면서 전체를 큐뷰로해서 다시 돌리는 것 등이 가능하다.
레이어를 여러개 두어서.. 움직이게 된다. 

레이어로 모든 뷰를 바꿀수 있다.
단지 에니메이션되는 것이 아니라 GPU를 사용해서 콤포지트하기 위해서 가장 좋다.

모든 시작적인 미디어들을 레이어를 사용하는 것이 확장성과 빠르게 동작한다.

레이어를 서브클래서해서 사용할 수 있는 것은 더욱 많이 있다.
예제와 함께 어드벤스드하게 강의을 준비할 것이다. 

코어 에니메이션 책이 있다. 그런데 좀 부실하다. 애플의 가이드를 보고 하는 것이 좋다.

12.6 예제는 심화.. 뷰 트렌지션이다. 17.게임킷은 심화에서 하자.

Save - 아카이빙.. 

큰개념만 설명하고 18장으로 넘어가자..

380
과제 1.  <<  시도해 봐라..  헬리곱터가 심플스케치에서 손가락으로 움직인 경로로 헬리곱터가 움직이면 제미 있을 것이다.
과제2