by @mixiappwchr



아래의 기사 중에서도 깜짝 소개한 간단하게 애니메이션을 구현할 수 있는 라이브러리도 제대로 소개하고 싶습니다.

매우 쉽게 애니메이션을 만들 수 있습니다.

DeNA의 사람들이 사례에서 말하는 애니메이션과 디자인 앱을 효율적으로 개발하기위한 Tips

실제 현장에서는 이렇게 사용하면 좋다는 점도 소개합니다.

설치

Canvas

cocoapods 대응하고 있기 때문에

pod 'Canvas'

단발 설치군요.

기본 사용법

UIView를 View에 배치하고 Class에 CSAnimationView를 지정합니다.
↓
User Defined Runtime Attirubtes를 사용하여 애니메이션의 속성에 값을 type,duration,delay 값으로 설정



이것만으로 지정된 View를 애니메이션으로 만들 수 있습니다. 위는 fadeIn의 지정이 됩니다.

하지만 CSAnimationView 클래스만 설정할 수 있습니다.

그럼 다른 View라든지 애니메이션을 만들고 싶다면 어떻게 할까?

라고 말했을 경우는, 이하의 방법을 취합니다.

실제 현장에서 사용하는 방법

예를 들어, 이런 식으로 UIImageView를 배치하여이 View를 애니메이션으로 만들고 싶습니다.
UIImageView 자체는 이전처럼 속성을 설정하고 애니메이션을 만들 수 없습니다.

그렇다면 어떻게해야합니까?

CSAnimationView에서 대상 뷰를 올립니다.

라는 것입니다.



보통 View를 배치하고, 수동으로 UIImageView를 넣어도 OK입니다만, 여기에서는 Canvas의 메뉴얼에도 쓰고 있는 Editor → Embed In를 사용하면 간단하게 지정의 View를 중첩할 수가 있습니다.



그리고는 똑같이 프로퍼티를 세트하면 완료입니다.

프로그램에서 호출.

storyboard나 xib에서 밖에 사용할 수 없는가 하면 그렇지 않고, 프로그램으로부터도 호출할 수 있습니다.

 CSAnimationView *animationView = [[CSAnimationView alloc]  initWithFrame:CGRectMake(0, 0, 100, 100)];

 animationView.backgroundColor = [UIColor blackColor];

 animationView.duration = 0.5;
 animationView.delay    = 0;
 animationView.type     = CSAnimationTypeMorph;

 [self.view addSubview:animationView];
 // Kick start the animation immediately
 [animationView startCanvasAnimation];

이런 식으로 보통 View를 만들고 startCanvasAnimation을 호출하면 애니메이션을 만들 수 있습니다.
타이밍을 조정하고 싶을 때는 이쪽의 인터페이스를 사용하면 좋을 것입니다.

애니메이션 확장

기본 애니메이션도 적당히 있지만, 자신만의 애니메이션으로 만들고 싶지만, 간단합니다.

CSAnimation 클래스 구현 을 읽으면, 일목요연하지만,

CSAnimation을 상속한 클래스 만들기

+ (void)로드시

[self registerClass:self forAnimationType: 애니메이션 키 이름];

그리고 나중에

(void)performAnimationOnView:(UIView *)view duration:(NSTimeInterval)duration delay:(NSTimeInterval)delay;

에서 실제 애니메이션을 구현하기만 하면 됩니다.

아래 샘플이지만 fadeIn의 구현입니다.

@interface CSFadeIn : CSAnimation
@end
@implementation CSFadeIn
+ (void)load {
    [self registerClass:self forAnimationType:CSAnimationTypeFadeIn];
}
+ (void)performAnimationOnView:(UIView *)view duration:(NSTimeInterval)duration delay:(NSTimeInterval)delay {
    // Start
    view.alpha = 0;
    [UIView animateKeyframesWithDuration:duration delay:delay options:0 animations:^{
        // End
        view.alpha = 1;
    } completion:^(BOOL finished) { }];
}
@end

애니메이션의 키 이름조차 쓰지 않도록 하면 쉽게 확장할 수 있습니다.

어때?

이렇게 간단하게 이용할 수 있기 때문에 데모 용도나 세세한 UI 파트에도 구현 시간이 걸리지 않기 때문에, 사용할 수 있는 장면이 상당히 있는 것은 아닐까요?