読者です 読者をやめる 読者になる 読者になる

恥知らずのウェブエンジニア -web engineer, shameless

これは一歩を踏み出すことができない者たちのブログ

ios table cellをアニメーションさせて表示する

開発しているiosアプリにテーブル表示をしている箇所があり、
そのまま表示されると味気ないので、ちょっぴりアニメーションをつけたくなった。

調べてみると、animateWithDurationを使うといいらしい。
UIView Class Reference
逆引きObjective-C for iPhoneアプリ - UIViewをアニメーションする

先にコードを。
今回はtable cellが表示される時にアニメーションさせたいので、tableView willDisplayCell内に実装。

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
 //オリジナルのcellのframeとっておく
    CGRect originFrame = cell.frame;
 //アニメーション前の状態を設定
    cell.backgroundColor = [UIColor clearColor];
    cell.alpha = 0.1f;
    cell.frame = CGRectMake(originFrame.origin.x + 30, originFrame.origin.y, originFrame.size.width, originFrame.size.height);
    
 //0.5秒かけて、もとの状態へアニメーション
    [UIView animateWithDuration:0.5
                          delay:0
                        options:UIViewAnimationOptionAllowUserInteraction
                     animations:^{
                         cell.alpha = 1.0f;
                         cell.frame = originFrame;
                     } completion:nil];
}

今回はcellが右からシュッときてほしいので上記のようにしました。

要はアニメーションさせたいオブジェクトのframeの前後の内容を設定して、
設定した秒数かけてアニメーションさせる的な感じみたいです。

Duration アニメーションにかける秒数
delay 遅らせる秒数
options もろもろオプション(操作受付可能とか始め早く最後ゆっくりとかアニメ設定など)
animations アニメーション終了後の状態を記述
completion アニメ終了後の処理等


これを使えば、画像なども回転、透明度などのちょっぴりアニメーションをさせていい感じに表示できそうです。



感謝致します。
f:id:ogataka50:20140514132858j:plain