[ios/tutorial] CABasicAnimation, CATransition, CAKeyframeAnimation, CALayer, CAAnimationGroup ( Core Animation )

[ios/tutorial] CABasicAnimation, CATransition, CAKeyframeAnimation, CALayer, CAAnimationGroup ( Core Animation )

http://warmz.tistory.com/entry/Core-Animation-CABasicAnimation-CAKeyframeAnimation-CATransition-CAAnimationGroup

-

위 블로그가 CoreAnimation 전체에 대해 잘 정리해놓았다.

아래 섹션은 각각의 Part 에 대해 조금 더 세세한 정보를 추가해 놓은 것.

CABasicAnimation

https://developer.apple.com/library/mac/documentation/GraphicsImaging/Reference/CABasicAnimation_class/

기본적인 single-keyframe animation 을 layer property 에 대해 제공한다.

animationWithKeyPath: 함수를 통해 CABasicAnimation 을 만들 수 있고, 이 녀석을 통해 animate 되었으면 하는 property 를 설정할 수 있다.

-

Interpolation Value 설정하기

     fromValue, byValue, toValue 를 설정할 수 있다. 이들 모두 optional 이지만, 2개 이상은 채워져야 한다.

     

     (non-nill)

     from, to = from -> to

     from, by = from -> (from + by)

     by, to = (to-by) -> to

ex)

CABasicAnimation* ani = [CABasicAnimation animationWithKeyPath:@“cornerRadius”]; // KVC

ani.fromValue = 0.0;

ani.toValue = 50.0;

ani.duration = 1.0;

ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

/// & more options

[[view layer] addAnimation:ani forKey:@“cornerRadius”]; // 여기서 key 값은 그냥 animtation 들 구분하는 key

-

설정할 수 있는 property option 은..

     duration

     repeatCount

     beginTime // CACurrentMediaTime() + 초

     timingFunction

     autoreverses

-

설정할 수 있는 keyPath 는...

     rotation.x // radian

     rotation.y

     rotation.z

     rotation

     scale.x

     scale.y

     scale.z

     scale

     translation.x

     translation.y

     translation.z

     translation

CATransition

https://developer.apple.com/library/mac/documentation/GraphicsImaging/Reference/CATransition_class/

-

CATransition 은 layer 에 transition animation 을 주기 위한 class 이다.

미리 정의된 transition 을 주거나, custom CIFilter 객체에 제공되는 것을 줄 수 있다.

( 보통 한 layer 가 다른 layer 로 변경될 때 주어지며, animation 은 parent layer 에 주어진다. )

-

startProgress, endProgress 값은 0~1 사이 값이고, 정의된 animation 의 상대적 시작, 끝 값을 의미한다.

-

type, subtype 은 transition type 을 의미한다.

default 는 kCATransitionFade 이며, filter 값이 설정된 경우에는 무시된다.

type 은 아래 4가지 값이 있다.

kCATransitionFade

kCATransitionMoveIn // 레이어가 미끄러지듯 나옴, subtype 도 함께 작동

kCATransitionPush // 내용물을 밀어내는 효과. subtype 도 함께 작동

kCATransitionReveal // 천천히 나옴. subtype 도 함께 작동

subType 은 아래 4가지 값이 있다.

kCATransitionFromRight

kCATransitionFromLeft

kCATransitionFromTop

kCATransitionFromBottom

-

filter 는 optional 한 Core Image filter 이다.

filter 는 kCIInputImageKey, kCIInputTargetImageKey 를 input key 로,

kCIOutputImageKey 를 output key 로 제공해야 한다.

kCIInputExtentKey 를 input key 로 추가로 제공할 수 있다. 이 녀석은 transition 이 작동하는 영역에 대한 rectangle 이다.

( !! 이 부분은 추가적인 학습이 필요 )

ex)

CATransition* ani = [CATransition animation];

ani.duration = 1.0;

ani.type = kCATransitionFade;

/// & more options

[view.layer addAnimation:ani forKey:@“changeTextTransition”];

CAKeyframeAnimation

-

ex)

CAKeyframeAnimation* keyframe = [CAKeyframeAnimation animationWithKeyPath:@“transform.scale.x”];

keyframe.values = @[@0.1, @1.0, @1.0, @7.0];

keyframe.keyTimes = @[@0.0, @0.25, @0.85, @1.0]; 

keyframe.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

keyframe.duration = 1.5f;

[CATransaction begin];

[CATransaction setCompletionBlock:^{

     NSLog(@“animation end.”);

}];

[animationView.layer addAnimation:keyframe forKey:@“transform.scale.x”];

[CATransaction commit];

-

CATransition 을 사용하지 않고 그냥 addAnimation 을 할 경우에는 애니메이션이 바로 시작하고, CATransition 을 사용한 경우에는 commit 을 한 순간 애니메이션이 수행된다.

-

CGMutablePathRef path1 = CGPathCreateMutable();

CGPathMoveToPoint(path1, NULL, layer1.position,x, layer1.position,y);

CGPathAddLineToPoint(path1, NULL, layer1.position.x, layer1.position.y + 200);

위와 같은 방식으로 path 를 지정할 수도 있다.

CAKeyframeAnimation* ani = [CAKeyframeAnimation animationWithKeyPath:@“position”]

ani.path = path1;

ani.rotationMode = kCAAnimationRotateAuto;

ani.duration = 5.0

[layer1 addAnimation:ani forKey:@“position”];

CAAnimationGrouop

-

ex)

CAKeyframeAnimation* ani1 = ….;

CABasicAnimation* ani2 = …;

CAAnimationGroup* groupAni = [CAAnimationGroup animation];

groupAni.animations = @[ani1, ani2];

groupAni.duration = 5.0;

[layer addAnimation:group forKey:@“groupAni”];

CALayer

http://www.raywenderlich.com/2502/calayers-tutorial-for-ios-introduction-to-calayers-tutorial

-

CALayer 는 간단히 이이기하면면, 화면에서 visual content 를 나타내는 사각형이다.

UIView 는 root layer 와 layer tree 를 가지고 있어 이 녀석들을 이용해서 화면에 실제 그리는 것이다.

view.layer; // 이와 같은 코드로 layer 에 접근할 수 있다.

-

CALayer 를 기능적으로 이야기하면 랜더링, 레이아웃, 애니메이션을 관리하는 코어 애니메이션 클래스이다.

size, position, background color, contents of layer(image 나 CoreGraphics 로 그리는 내용물), corner ( color, rounded ), shadow, edge stroke 등등 속성을 가지고 있다.

그리고 이 속성들은 대부분 animation 가능하다.

-

Subclass 로 CAGradientLayer, CATextLayer, CAShapeLayer,  등등이 있다.

UIView 가 가지고 있는 layer 는 plain CALayer 이다.

-

CALayer 를 사용할 때는 QuartzCore.framework 를 추가해주어야 한다.

#import <QuartzCore/QuartzCore.h>

-

CALayer 에는 contents 프로퍼티가 있으며 이 속성에 CGImage 나 NSImage 를 할당하여 이미지를 표시할 수 있다.

-

CALayer 역시 UIView 처럼 Sublayer 를 가질 수 있다.

Sublayer 를 만들 때, 다른 속성들은 제쳐두고 CALayer 의 frame 은 꼭 지정해야 한다.

ex)

CALayer* sublayer = [CALayer layer];

sublayer.frame = CGRectMake(30, 30, 128, 192); // relative to the rootLayer

[rootLayer addSublayer:sublayer];

Summary

-

CALayer는 보여지는 사각형.

CALayer 에 있는 여러가지 속성을 갖고 그림을 그리는 녀석이며, 이 속성들을 기반으로 animation 가능하다.

UIView 는 그리는 부분에 대해 CALayer 를 wrapping 해 놓은 녀석이라고 보면 된다.

CALayer 는 UIView 처럼 hierarchy 를 이룰 수 있다.

cf) #import <QuartzCore/QuartzCore.h> 를 통해 import 해주어야 사용 가능하다.

-

CABasicAnimation 은 fromValue, byValue, toValue 를 설정하여 property 값 변경을 animation 할 수 있다.

animationWithKeyPath: 를 통해 CABasicAnimation instance 를 만들며, KeyPath 는 KVC 로 매핑되는 CALayer 에 있는 property 이다.

CABasicAnimation 은 다음의 property 들을 갖는다 : duration, repeatCount, beginTime, timingFunction, autoreverses

-

CATransition 은 이동에 대한 Animation 에 특화된 녀석으로, type, subtype 을 지정해주면 해당 animation 으로 이동을 시켜준다.

animation 메시지를 통해 instance 를 생성한다.

type 은 다음 값이 가능하다. : kCATransitionFade, kCATransitionMoveIn, kCATransitionPush, kCATransitionReveal

subType 은 다음 값이 가능하다. : kCATransitionFromRight, kCATransitionFromLeft, kCATransitionFromTop, kCATransitionFromBottom

startProgress, endProgress 를 통해 해당 animation 의 상대적 시작 시점과 끝 시점을 설정할 수 있다.

-

CAKeyframeAnimation 은 배열 형태로 key frame 에 해당하는 특정 값과 타이밍을 지정해주는 animation 방식이다.

animationWithKeyPath: 를 통해 instance 를 얻으며, KVC 가 CALayer 의 property 에 적용된다.

Path 를 지정해줄 수도 있는데, 정형적이지 않은 animation 에 적용하기 좋다.

values, keyTimes 에 array 형태로 key frame 에 해당하는 값을 assign 하면 된다.

-

CAAnimationGroup 은 여러개의 Animation 을 한번에 수행하기 위해 사용한다.

animations 에 한번에 수행하기 위한 배열을 전달하면 된다.

CAAnimationGroup 대신 [CATransaction begin], [CATransaction commit] 을 통해,

그 사이에 animation 들을 추가하여 한번에 수행되도록도 할 수 있다.

addanimation, addSublayer, animation, animationwithkeypath, autoreverses, background color, Begin, begintime, byvalue, CAAnimationGroup, CAAnimationGroup ( Core Animation ), cabasicanimation, CAGradientLayer, cakeyframeanimation, calayer, calyer, CAMediaTimingFunction, CAShapeLayer, CATextLayer, catransaction, CATransition, cgimage, CGMutablePathRef, CGPathAddLineToPoint, CGPathCreateMutable, CGPathMoveToPoint, COMMIT, core animation, core image filter, Corner, custom CIFilter, default, Duration, endprogress, Framework, fromvalue, functionWithName, interpolation value, kCAAnimationRotateAuto, kCAMediaTimingFunctionEaseInEaseOut, kCATransitionFade, kCATransitionFromBottom, kCATransitionFromLeft, kCATransitionFromRight, kCATransitionFromTop, kCATransitionMoveIn, kCATransitionPush, kCATransitionReveal, kCIInputExtentKey, kCIInputImageKey, kCIInputTargetImageKey, kCIOutputImageKey, keytimes, Layer, layer property, layer tree, nsimage, Position, quartzCore, repeatcount, root layer, Rotation, rotation.x, rotationMode, Scale, setcompletionblock, single keyframe animation, Size, startpro\gress, subclass, subLayer, SubType, timingFunction, tovalue, transition animtation, Translation, type, UIView, values, [ios/tutorial] CABasicAnimation, 레이아웃, 렌더링, 애니메이션