読者です 読者をやめる 読者になる 読者になる

sakaharaのブログ

アプリ開発に関する話や日々の出来事など

ソースコードを一切書かなくてもアニメーション処理ができるCanvasがおもしろい

f:id:sakahara:20140405233909p:plain

概要

ソースコードを一切書かな くてもアニメーションのエフェクトをUIViewに設定できるライブラリです。ちょっとしたアニメーションさせたい時などに使えそうです。

http://canvaspod.io/

種類はまだ多くないですが、アニメーション処理をUIViewControllerから完全に分離できるのでコンセプトはとてもよいと思います。 現在サポートしているアニメーションの種類については上記サイトで確認できます。

導入手順

CocoaPodsでインストールできるのでPodfileを作成します。

platform :ios, '7.0'
 
pod 'Canvas', '~> 0.1'

次にインストールです。

pod install

導入は以上でオッケーです。

アニメーション設定手順

アニメーションに関する設定はInterface Builderで行うので、その設定方法を紹介します。 まず下記の項目を設定します。

Key Path Type 説明
type Number アニメーションの種類
duration Number アニメーションを実行する時間
delay Number 設定した時間経過後にアニメーションを実行
pauseAnimationOnAwake Boolean チェックすると初期表示時にアニメーションを実行しない

アニメーションを実行したいUIViewのクラスをCSAnimationViewに変更します。 設定内容は下記を参考にしてください。

f:id:sakahara:20140405233258p:plain

アニメーション実行手順

CSAnimationViewを設定したUIView、またはその親となるUIViewのstartCanvasAnimationメソッドを実行することでアニメーションさせることができます。

[self.animationView startCanvasAnimation];

このメソッドは指定したUIViewのSubview中でCSAnimationViewが設定されているものがあれば全て実行してくれます。 下記を参照してもらえばstartCanvasAnimationメソッドが実行されているのが確認できるので興味がある方は見てみてください。

https://github.com/CanvasPod/Canvas/blob/master/CanvasLibrary/CSAnimationView.m

実際に使用するアニメーションタイプはこちらのソースコードを参照してください。

https://github.com/CanvasPod/Canvas/blob/master/CanvasLibrary/CSAnimation.h

またアニメーションの実装はCSAnimationに定義してあるので、どのような処理をしてるかはここを見れば確認できます。

https://github.com/CanvasPod/Canvas/blob/master/CanvasLibrary/CSAnimation.m

まとめ

アニメーション処理とUIViewControllerを完全に分離できるのでメリットは大きいと思います。 課題としてはアニメーションの種類が少ない点と独自で作ったアニメーションをこのライブラリに手をいれずに 追加する方法が公式に用意されていない点が上げられます。(この部分はCAAnimationクラスを継承するなどで対応できるかもしれません) この辺は今後のアップデートに期待するか、独自で作ってみてもよいと思います。