본문 바로가기
프로그래밍 놀이터/iOS

[iOS Study] 애니메이션 제어

by 돼지왕 왕돼지 2016. 3. 6.
반응형


 [iOS Study] 애니메이션 제어


출처 : 아론 힐리가스의 iOS 프로그래밍


animateKeyframesWithDuration:delay:options:animations:completion:, animateWithDuration:animations:, animateWithDuration:delay:options:animations:completion:, animateWithDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion:, animation, animations, Apple, apple document, basic animation, bit mask, Completion, constant, Ease, easy-in, easy-in/easy-out, easy-out, example code, ios study, ios tutorial, keyframe animation, linear, Options, or, Sample Code, SDK, spring animations, spring damping, spring velocity, tkdtn, tutorial, UIView, UIView Class Reference, UIViewAnimationOptionAllowUserInteraction, UIViewAnimationOptionAutoReverse, UIViewAnimationOptionCurveEaseIn, UIViewAnimationOptionCurveEaseInOut, UIViewAnimationOptionCurveEaseOut, UIViewAnimationOptionCurveLinear, UIViewAnimationOptionRepeat, UIViewKeyframeAnimationOptions, [iOS Study] 애니메이션 제어, 기본 애니메이션, 물리 엔진, 반복, 블록, 비트 마스크, 상대 적 시작 시간, 상대적 지속시간, 실행, 아론 힐리가스, 애니메이션, 애니메이션 제어, 애플 문서, 에니메이션, 옵션, 완료 블록, 지연, 키프레임 애니메이션, 타이밍 함수


-

애플 문서는 언제나 iOS 기술을 배우기에 좋은 출발점이다.



-

기본 애니메이션(basic animation) 은 시작값과 끝값 사이를 애니메이션으로 만든다.



-

[UIView animateWithDuration:0.5 animtations:^{

     label.alpha = 1.0;

}];


animateWithDuration:animations:  메소드는 즉시 반환한다.

즉, 이 메소드는 애니메이션을 시작하지만 애니메이션이 완료되는 것을 기다리진 않는다.



-

UIView 에서 가장 간단한 블록 기반 애니메이션 메소드가 animateWithDuration:animations: 이다.

이 메소드는 애니메이션이 수행되는 시간과 애니메이션을 적용할 변화 블록을 받는다.

이 애니메이션은 easy-in/easy-out 애니메이션 곡선을 따른다.

이 곡선은 애니메이션을 천천히 시작하여 중간에서는 속도를 높이고 끝에서 다시 속도를 줄인다.



-

애니메이션의 가속은 타이밍 함수로 제어한다.

타이밍 함수는 linear, easy-in, easy-out 등이 있다.


다른 타이밍 함수를 사용하기 위해서는 animateWithDuration:delay:options:animations:completion: 메소드를 사용해야 한다.

이 메소드는 애니메이션의 대다수를 제어할 수 있다.

시간과 애니메이션 블록뿐만 아니라 에니메이션을 시작하기 전 얼마 동안 지연시키는지와 옵션 그리고 애니메이션 장면이 완료되면 호출될 완료 블록을 지정할 수 있다.


options 인자는 비트 마스크이다.

여러 값들을 비트 OR 연산할 수 있다.


UIViewAnimationOptionCurveEaseInOut

UIViewAnimationOptionCurveEaseOut

UIViewAnimationOptionCurveEaseIn

UIViewAnimationOptionCurveLinear


UIViewAnimationOptionAllowUserInteraction

     기본적으로 뷰가 움직일 때는 상호 작용할 수 없다.

     그러나 이 옵션을 지정하면 상호 작용을 허용한다.

     파동 뷰처럼 반복 애니메이션에 유용하다.


UIViewAnimationOptionRepeat

     애니메이션을 무한정 반복한다.

     UIViewAnimationOptionAuthReverse 옵션과 종종 함께 사용된다.


UIViewAnimationOptionAutoReverse

     애니메이션을 전방향으로 수행하고 다시 뒤로 되돌아오도록 한다.

뷰는 초기 상태로 돌아간다.


가능한 모든 옵션을 보려면 UIView Class Reference 의 Constants 섹션을 확인한다.







-

두 값 이상을 통해 뷰의 프로퍼티를 움직이려면 키프레임 애니메이션(keyframe animation)을 사용한다.

키프레임 애니메이션은 많은 개별 키프레임들로 구성할 수 있다.

키프레임 애니메이션은 복수의 기본 애니메이션으로 생각할 수 있다.



-

[UIView animateKeyframesWithDuration:1.0 delay:0.0 options:0 animations:^{

[UIView addKeyframeWithRelativeStartTime:0 relativeDuration:0.8 animations:^{

label.center = self.view.center;

}];


[UIView addKeyframeWithRelativeStartTime:0.8 relativeDuration:0.2 animations:^{

int x = arc4random() % width;

int y = arc4random() % height;

label.center = CGPointMake(x,y);

}];

} completion:NULL];


키프레임 애니메이션을 만들려면 UIView 의 animateKeyframesWithDuration:delay:options:animations:completion: 클래스 메소드를 사용한다.

이 메소드는 options 타입이 UIViewAnimationOptions 가 아닌 UIViewKeyframeAnimationOptions 인 것만 빼고 모든 것이 기본 애니메이션과 같다.


그리고 addKeyframeWithRelativeStartTime:relativeDuration:animations: 클래스 메소드를 사용하여 애니메이션 블록에 키프레임들을 추가한다.

첫번째 인자는 0과 1 사이의 값을 가지는 상대적 시작 시간이다.

두번째 인자는 전체 시간 중 퍼센트를 나타내는 상대적 지속시간으로 0과 1 사이의 값을 가진다.


애니메이션이 반복되면 반복할 때마다 완료 블록이 실행되지는 않고, 완료 블록은 맨 끝에 한 번만 실행된다.



-

iOS는 SDK 에 내장된 강력한 물리 엔진을 가지고 있다.

이 엔진을 사용하는 가장 쉬운 방법 중 하나는 새로운 스프링 애니메이션(spring animations) 을 사용하는 것이다.


animateWithDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion: 를 사용하면 된다.


[UIView animateWithDuration:2.0

delay:0.0

usingSpringWithDamping:0.25

initialSpringVelocity:0.0

options:0

animations:^{

CGRect frame = CGRectMake(40, 70, 240, 30);

self.text.frame = frame;

}

completion:NULL];


spring damping     0과 1 사이의 수로 0에 가까울수록 애니메이션은 더 진동한다.

spring velocity     애니메이션을 시작할 때 뷰의 상대적 속도.

options     UIViewAnimationsOptions, 다른 애니메이션과 동일

animations    하나 또는 여러 뷰에서 애니메이션하기 위한 변경 블록

completion    애니메이션이 끝날 때 실행되는 블록








반응형

댓글