UIViewanimateWithDurationで簡単なアニメーションを作成する

この記事を読むとわかること

簡単なUIViewanimateWithDurationの使い方。
テーブルビューでセル表示時にアニメーションする方法。

概要

Gプラスのタイムラインをまねた、
セルがふわっと出てくる感じをテーブルビューで再現します。

動いてる様子はこちら
http://www.youtube.com/embed/hkGl87HJAEc

ソースはこちら
https://github.com/y42sora/GPlusTimeline

前提として、アニメーションなしに普通にセルを表示できているとします。

アニメーションの位置

テーブルビューのセルは表示される前に、

• (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
  が呼ばれます。

そのため、このメソッドでまだ表示していないセルをアニメーションしてあげることで
Google Plusのように、タイムラインの各セルをアニメーションして表示させる事ができます。

セルのアニメーション

アニメーション自体はこのようになります。

:TimelineViewController.m

    // When a cell will appear, this method was called.
   
    // if already appeared, isn't animaiton.
    if ([[_cellFlagsobjectAtIndex:indexPath.row] boolValue])
        return;
   
    // set flag.
    [_cellFlagsreplaceObjectAtIndex:indexPath.rowwithObject:[NSNumbernumberWithBool:true]];
    cell.backgroundColor = [UIColorclearColor];

    // save correct cell point.
    CGRect nowFrame = cell.frame;
   
    // make animaiton.
    cell.alpha = 0.0f;
    cell.transform = CGAffineTransformMakeRotation(-2*M_PI*5/360.0);
       
    cell.frame = CGRectMake(nowFrame.origin.x - 20, nowFrame.origin.y + 40, nowFrame.size.width, nowFrame.size.height);
       
    [UIViewanimateWithDuration:0.7
                          delay:0
                        options:UIViewAnimationOptionAllowUserInteraction
                     animations:^{
                         cell.transform = CGAffineTransformMakeRotation(0.0);
                         cell.alpha = 1.0f;
                         cell.frame = nowFrame;
                         } completion:nil];

UIViewanimateWithDurationは、animationsに指定したブロックを実行し終わった状態に向けて、UIViewをアニメーションさせる命令です。
初期状態でアニメーション終了時の位置が保存されているので、
アニメーションの開始位置を設定して、初期位置までアニメーションさせています。