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

by @mixiappwchr

![スクリーンショット 2014-06-04 0.09.05.png](https://qiita-image-store.s3.amazonaws.com/0/37731/b0721707-b835-c783-1bae-d7a0ce65a9f8.png)


下記の記事の中でもちらっと紹介した簡単にアニメーションを実装できるライブラリもちゃんと紹介したいと思います。

非常に簡単にアニメーション作成できます。


[DeNA中の人が事例で語る、アニメーションやデザインのアプリを効率よく開発するためのTips](https://codeiq.jp/magazine/2014/05/10760/)

実際の現場ではこう使うと良いよという点もご紹介します。

#インストール

[Canvas](http://canvaspod.io/)

cocoapods対応してるので

```ruby
pod 'Canvas'
```

一発インストールですね。

#基本的な使い方

![スクリーンショット 2014-06-03 23.32.56.png](https://qiita-image-store.s3.amazonaws.com/0/37731/7caae087-ba79-8036-8d70-a8c9c486500f.png)

UIViewをViewに配置して、ClassにCSAnimationViewを指定します。
↓
User Defined Runtime Attirubtesを使用してアニメーション用のプロパティに値をtype,duration,delayの値をセット

![スクリーンショット 2014-06-03 23.43.39.png](https://qiita-image-store.s3.amazonaws.com/0/37731/e8056993-b0f4-ae85-97cd-58a627f36041.png)

これだけで指定のViewをアニメーションさせることができます。上記はfadeInの指定になります。



ただし、設定できるのはCSAnimationViewクラスのみです。

じゃあほかのViewとかをアニメーションさせたい場合どうするの？

と言った場合は、下記の方法をとります。

#実際の現場での使い方

![スクリーンショット 2014-06-03 23.34.47.png](https://qiita-image-store.s3.amazonaws.com/0/37731/4abc06ef-b1ca-73b1-50db-cc5b56486dea.png)

例えばこのようにUIImageViewを配置して、このViewをアニメーションさせたいとします。
UIImageView自体は、先ほどのようにプロパティをセットしてアニメーションさせることはできません。

ではどうするかというと、

##CSAnimationViewで対象のViewをくるむ

ということです。

![スクリーンショット 2014-06-03 23.35.01.png](https://qiita-image-store.s3.amazonaws.com/0/37731/7965ab02-a6e0-24df-7375-5d6bc0106f6a.png)

普通にViewを配置して、手動でUIImageViewを入れてもOKですが、ここではCanvasのマニュアルにも書いてある Editor → Embed Inを使用すると簡単に指定のViewを入れ子にすることができます。


![スクリーンショット 2014-06-03 23.35.26.png](https://qiita-image-store.s3.amazonaws.com/0/37731/9bcd3048-ebc0-5fc2-f171-2c0fab2326db.png)

あとは同じようにプロパティをセットすれば完了です。

#プログラムからの呼び出し。
storyboardやxibからしか使えないかというとそうではなく、プログラムからも呼び出せます。

```objc
 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クラスの実装](https://github.com/CanvasPod/Canvas/blob/master/CanvasLibrary/CSAnimation.m)を読めば、一目瞭然ですが、

CSAnimationを継承したクラスを作り

+(void)load時に

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

をよび、あとは

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

で実際のアニメーションを実装するだけです。

下記サンプルですが、fadeInの実装です。

```objc

@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パーツにも実装時間がかからないため、使用できる場面が結構あるのではないでしょうか？