UITableView のカスタムアニメーション

これはいい。

Applidium — Lively UITableView

テーブルを上下にスクロールした時のアニメーションで、隠れていたセルの現れるアニメーションをカスタマイズできる。これはビデオを見たほうがわかりやすい。


アニメーションは他に数種類あってシンプルだけれど、どれも見た目のインパクトはある。


GitHubで公開されていてライセンスは BSD

applidium/ADLivelyTableView

実はソースコードはとても短くて .m ファイルはコメントを入れても 166行しかない。CoreAnimation を上手く使いこなしていてアイディア（アルゴリズム）の勝利といえる。各アニメーションは Blocksとして定義されていて、実行時にこれらの Blocksを呼び分けることで表現を切り替えている。ソースコードが洗練されてるな。

ADLivelyTransform ADLivelyTransformCurl = ^(CALayer * layer, float speed){
    CATransform3D transform = CATransform3DIdentity;
    transform.m34 = 1.0 / -500;
    transform = CATransform3DTranslate(transform, -layer.bounds.size.width/2.0f, 0.0f, 0.0f);
    transform = CATransform3DRotate(transform, M_PI/2, 0.0f, 1.0f, 0.0f);
    layer.transform = CATransform3DTranslate(transform, layer.bounds.size.width/2.0f, 0.0f, 0.0f);
    return ADLivelyDefaultDuration;
};
  :

ヘッダファイル。シンプル。

extern NSTimeInterval ADLivelyDefaultDuration;
typedef NSTimeInterval (^ADLivelyTransform)(CALayer * layer, float speed);

extern ADLivelyTransform ADLivelyTransformCurl;
extern ADLivelyTransform ADLivelyTransformFade;
extern ADLivelyTransform ADLivelyTransformFan;
extern ADLivelyTransform ADLivelyTransformFlip;
extern ADLivelyTransform ADLivelyTransformHelix;
extern ADLivelyTransform ADLivelyTransformTilt;
extern ADLivelyTransform ADLivelyTransformWave;

@interface ADLivelyTableView : UITableView  {
    id   _preLivelyDelegate;
    CGPoint _lastScrollPosition;
    CGPoint _currentScrollPosition;
    ADLivelyTransform _transformBlock;
}
- (CGPoint)scrollSpeed;
- (void)setInitialCellTransformBlock:(ADLivelyTransform)block;
@end

UITableView のサブクラスとして実装されているので、既存アプリで使う場合はクラスを差し替えるだけで使える。以下は設定コード。

- (void)viewDidLoad {
    [super viewDidLoad];
     :
    ADLivelyTableView * livelyTableView = (ADLivelyTableView *)self.tableView;
    livelyTableView.initialCellTransformBlock = ADLivelyTransformFan;
    [transitionButton release];
}

アニメーションを表す Blocksを指定するだけ。

気に入ったので試しに自作アプリに組み込んでみた。組み込みは５分とかからない。 .m/.h ファイルをプロジェクトへコピーして、既存の UITableViewを差し替え、アニメーション（Blocks）を指定するコードを１行追加するだけ。
こんな感じ。

おー面白い。いいなこれ。
：
：
でも、
ちょっと微妙。というかウザい。。。

理由は多分、このアプリの場合自分が作成したデータで、かつデータ量が少ないからだと思う。アニメーション範囲が大きい為、スクロール中に画面がチラチラして目的の行を見つけるのに落ち着かないというか、場合によってはイラッとするかも。
RSSリーダーや検索結果を表示するなど、どちらかといえばデータ量が多く表示を主とするケースが向いていそう。気に入っただけに残念（自作アプリへの導入はやめた）。

なおテーブルが画面全体ではない場合（上記アプリのようなケース）は IBなどで Clip Subviews を入れておく。