facebook/popを使ったアニメーション

popは2014/4/28 にFacebookがOSSとして公開したアニメーションのライブラリです。
比較的簡単に多彩なアニメーションが実装出来るということで、試しに使ってみました。

インストール

CocoaPodsを使います。

githubからクローンして直接StaticLibraryとして組み込んでもいいのですが、設定がはるかに面倒だったので。

ただ、CocoaPodsは組み込まれる側のプロジェクトファイルの設定も変更してしまうので、既存のプロジェクトに導入する場合は直接設定した方がいいです。

CocoaPodsをインストールします。

 sudo gem install cocoapods

インストールが完了したら、ターミナルを再起動して下さい。
そのままだとPATHが反映されていないせいで、podコマンドが使えません。

プロジェクト作成

Xcodeで適当なプロジェクトを作ります。

今回はSingle View Applicationを選びましたが、任意のものでいいです。

プロジェクトが出来たら、プロジェクトのルートディレクトリに、Podfileという名前のテキストファイルを用意し、中身を以下のようにします。

pod 'pop', '~> 1.0'

Podfileの設置が出来たら、プロジェクトのルートディレクトリで以下のコマンドを実行します。

pod install

すると、popのライブラリが組み込まれたworkspaceファイルが出来ますので、
起動して、ビルド出来ることを確認します。
※エラーが出た場合はプロジェクトの設定をチェックして下さい。

popの使用

ビルドが無事成功したら、実際に使ってみましょう。
まずStoryboardを開いて、アニメーションさせるビューとトリガのボタンを設置します。

viewController.mにインポートを追加します。

  #import "POP/POP.h"

そして、viewController.mに以下の処理を記載し、ボタンのイベントハンドラに紐づけます。

-(IBAction)buttonDidPush:(id)sender{    
    POPSpringAnimation *animation = [POPSpringAnimation animation];
    animation.property = [POPAnimatableProperty propertyWithName:kPOPLayerSize];
    animation.toValue = [NSValue valueWithCGSize:CGSizeMake(100, 100)];
    
    animation.springBounciness = 24.0f;
    animation.springSpeed = 6.0f;
    
    [_testView pop_addAnimation:animation forKey:@"bound"];
}

実行してみると、トップの動画のような動きが確認出来るかと思います。

簡単ですねー。
CoreAnimationを使われたことのある方なら、より取っ付きやすいのではないでしょうか。

まとめ

個人的にアニメーションに必要なのは派手さでも滑らかさでもなく、連続性だと思っています。

デジタルなコンテンツやアプリをよりアナログ世界に溶け込ませるために、UIの連続性はもはや必須ですよね。

今回使用したのはほんの一部の機能だけですので、他にも様々なアニメーションが用意されています。

標準のCoreAnimationでイメージ通りの実装が難しい場合は、導入してみるといいかもしれません。