LoginSignup
14
14

More than 5 years have passed since last update.

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

Posted at

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

簡単な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のように、タイムラインの各セルをアニメーションして表示させる事ができます。

セルのアニメーション

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

    // 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をアニメーションさせる命令です。
初期状態でアニメーション終了時の位置が保存されているので、
アニメーションの開始位置を設定して、初期位置までアニメーションさせています。

14
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
14