まだコードを書いてアプリのアニメーション作ってるの？誰でもサクッと設定だけでアニメーションさせるライブラリCanvas

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をくるむ

ということです。

普通に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)load時に

[self registerClass:self forAnimationType:アニメーションkey名];

をよび、あとは

• (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

アニメーションのkey名さえかぶらないようにすれば、簡単に拡張できるでしょう。

どうでしょう？

このように簡単に利用できるため、デモ用途や細かいUIパーツにも実装時間がかからないため、使用できる場面が結構あるのではないでしょうか？