[iOS]CoreAnimation（animating transitions）

画像に続いて文字列に対しても、何らかの画面上の効果を発生させたいと考えている。今、考えているのは、UILabeに対してだ。

前回までのUIViewに対してのアニメーションだと、対象のプロパティがアニメーションになるのだが、今回は効果に対応するプロパティを変更する必要が無い。変更したら、完了後に戻す処理が必要になる。

今、考えている事に合う手段はないか？と、探していて見つけたのだ、レイヤへの効果の適用だ。

まず、Quartz Coreフレームワークをプロジェクトに追加する。そして、QuartzCore/QuartzCore.hをインポートする。

サンプルではラベルの内容の変化が分かるように日付を設定している。

ラベルに現在日時を初期値として設定する。

- (void)awakeFromNib
{
    NSDate  *date = [NSDate date];
    NSDateFormatter *formatter = [[NSDateFormatter alloc] init];
    [formatter setDateStyle:NSDateFormatterMediumStyle];
    [formatter setTimeStyle:NSDateFormatterMediumStyle];
    self.label.text = [formatter stringFromDate:date];
}

画面がタッチされたら、ラベルの内容を現在日時に変更して、アニメーションを実行する。

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    CATransition    *animation = [CATransition animation];
    [animation setDelegate:self];
    [animation setDuration:1.0f];
    [animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
    [animation setType:kCATransitionPush];
    [animation setSubtype:kCATransitionFromLeft];
    NSDate  *date = [NSDate date];
    NSDateFormatter *formatter = [[NSDateFormatter alloc] init];
    [formatter setDateStyle:NSDateFormatterMediumStyle];
    [formatter setTimeStyle:NSDateFormatterMediumStyle];
    self.label.text = [formatter stringFromDate:date];
    [[self.label layer] addAnimation:animation forKey:@"animation transition"];
}

文字が左から右に流れた後に、内容が変わる事が確認できるはずだ。

ソースコード

GitHubからどうぞ。

https://github.com/murakami/workbook/tree/master/ios/CoreAnimation - GitHub




関連情報

Core Animation for Mac OS X and the iPhone

Creating Compelling Dynamic User Interfaces

Core Animationプログラミングガイド

アニメーションのタイプとタイミング

iOS Developer Libraryの翻訳文書だ。