(cache) PinterestのiOSアプリUIアニメーションを再現するまでの道のりを赤裸々に話します。

どうも、2月からiOSエンジニアになりました。こじてぃです。今日は、PinterestのUIを再現してみる機会があったので、その過程を赤裸々にお話したいと思います。

今回、再現したいのはこれ

UICollectionView -> UICollectionView のNavigationControllerのpushアニメーションなのですが、拡大遷移というカスタムアニメーションをしています。他にもこだわったUIアニメーションが多くて実装はしたのですが、今回はこの部分だけに焦点を充てて話してみたいと思います。

はじめに

はじめに、どのような順で再現していったのかを目次にして記載します。詳細は以下で説明していきます。

とりあえず、ググる
Pinterest公式ブログを見てみる
WWDC2013 | iOS_CollectionViewTransitionを見る
GitHubなどでライブラリやSampleの検索をする
実際に実装してみて、カスタマイズしていく
所感・まとめ
わからなかったこと

とりあえず、ググる

今回に限らずほとんどのことにおいて、エゴサーチを最初に行います。理由は簡単で、世にどれくらいPinterestのUIを再現しようとしている人がいるのか肌感覚で知りたいからです。

「pinterest uicollectionview closeup animation」で検索

検索してみると、stackoverflowやpinterestのengineerブログがぱっと目につきました。なんとなく「再現しようとしている人がいる」ということがわかりますし、「Pinterestのブログ」に期待出来る部分もありそうなことがわかりますね。

Pinterest公式ブログを見てみる

[Making Pinterest — Behind the Pins: Building Pinterest 3.0 for iOS]

Pinterest-3.0でこのUIになったことがわかります。きっかけはWWDC2013みたいですね。（この時点でWWDC2013のSampleCodeを見ることが決定）

詳細までは書いてませんが、実装のアプローチ方法が記載されていました。（すでにこの時点で「なんとかなりそうだなぁ」と思ってました。）

どうやらiOS7のViewControllerTransitioning APIを利用して、グリッドにあるPinをタップすると拡大してクローズアップモードになる効果を実装しているみたいですね。さらにユーザーにわかりやすくするために、UINavigationControllerDelegateのanimationControllerForOperationを使ってトランジションするようにしているみたいです。※ちなみにiOS6はデフォルトのトランジションにしているみたい。コードも一部抜粋されていました。

- (id )navigationController:(UINavigationController *)navigationController
                                   animationControllerForOperation:(UINavigationControllerOperation)operation
                                                fromViewController:(UIViewController *)fromVC
                                                  toViewController:(UIViewController *)toVC {
    if (operation == UINavigationControllerOperationPush && [toVC isKindOfClass:[CBLPinViewController class]]) {
        return [[CBLPinViewTransition alloc] init];
    } else if (operation == UINavigationControllerOperationPop && [fromVC isKindOfClass:[CBLPinViewController class]]) {
        return [[CBLGridViewTransition alloc] init];
    }
    return nil;
}

- (id )navigationController:(UINavigationController *)navigationController

animationControllerForOperation:(UINavigationControllerOperation)operation

fromViewController:(UIViewController *)fromVC

toViewController:(UIViewController *)toVC {

if (operation == UINavigationControllerOperationPush && [toVC isKindOfClass:[CBLPinViewController class]]) {

return [[CBLPinViewTransition alloc] init];

} else if (operation == UINavigationControllerOperationPop && [fromVC isKindOfClass:[CBLPinViewController class]]) {

return [[CBLGridViewTransition alloc] init];

}

return nil;

}

WWDC2013 | iOS_CollectionViewTransitionを見る

Pinterestのブログをみて、iOS7のことを理解する必要がありそうだったので、WWDC2013のSampleCodeをダウンロードしてみます。

[WWDC 2013 - Downloads]

サンプルはこんなアニメーションでした。ちょっと再現したいアニメーションとは違いますがCollectionViewのアニメーション方法のサンプルとしては十分過ぎるくらいですね。

構成としては、

BaseになるCollectionViewControllerクラス
GridLayout用のCollectionViewControllerとStackLayout用のCollectionViewController
UIViewControllerInteractiveTransitioningとUIViewControllerAnimatedTransitioningを利用した TransitionControllerクラス
UICollectionViewTransitionLayoutをカスタマイズした TransitionLayoutクラス

というシンプルなものでした。さらっと読める量ですね。あとは気になる部分のAPIやDelegeteなどを読んで把握しておけば一旦はOKかと。

GitHubなどでライブラリやSampleの検索をする

ざっくり実装方法にあたりがついたので、すでに再現している人がいないか調べます。この時に以下のことを意識して探したりしてます。

どこらへんにハマリポイントがあるのか
ライブラリならどれくらいアクティブなのか人気があるのか
ライセンスなどはどうなっているか
頭の中でサンプリングして要件に合わせて設計していく
実際に試す必要がある場合や理解を深めたい場合は、その場で即試す

です。

で、数分探していると有りました。

[timarnold/UICollectionView-Transition-Demo]

※この時点では、ほとんどコード書いてないです。Androidアプリだとこうは行かない気がしますね。

実際に実装してみて、カスタマイズしていく

上記のソースでほとんど再現はできているものの調整が必要な部分があったり、実際にプロダクトとして利用するには足りないものがあったりするので、ここからが本領発揮だと思います。今回自分は以下のような実装作業を行いました。

GridView -> DetailView で別々のCollectionViewを利用する
拡大アニメーションをよりPinterest風にする
Cellの実装を行い、Cell内の拡大アニメーションの調整
etc…

所感・まとめ

これで実装まで完了しました。まとめるとこうなります。

所感・感想

iOS7でCollectionViewがこんなに便利になっていたとは・・・！
アニメーション部分は、結局プロダクトに最適化して調整すべき
アニメーションMockの作成などは、最低限もしくは最短で終わらせたい！

なんだかんだで結構時間かかりましたが、今回実装してみた所感ではiOS7で一番恩恵を受けているのって実はUICollectionViewなんじゃないか？と思ったくらい発見が多かったです。

まとめ

エゴサーチして実装ハードルなどの肌感覚を得る
公式の情報(WWDCやPinterest公式ブログ)を優先して読む
プラグインやライブラリなどのオープンソースで使えるものを探す
頭のなかで、設計したりサンプリングしたりする
Mockを作成したりして事前に判明しているハマリポイントを解消しておく
実際にプロダクトとして実装していく

実装までを赤裸々に語ってみましたがいかがでしたか？何かの参考になれば幸いです。

わからなかったこと

最後に唯一わからなかったことがあるので記載させてください。Pinterestのブログに掲載されていたソースコードなんですが…

return [[CBLPinViewTransition alloc] init];

の部分だけでどうやってあのアニメーションを表現しているのかがわかりませんでした。CBLPinViewTransitionの中身が想定できる人がいたらぜひ教えて欲しいです。

開発メンバーを募集しています！

nanapiではWebサービスやアプリ開発をはじめ、まだ見ぬサービスやイケてるプロダクトをつくってユーザーのニーズに応えていけるメンバーを募集しています！グローバル意識やパッションのある方は以下をチェキラですよ！！

[株式会社nanapi(ナナピ) | 募集職種]