アトトックラボ

2012年1月09日

[iOS dev]ページめくりを途中でやめる方法

Posted by Yoichi Kurusaki

書籍アプリなど最後のページでページめくりしようとした時に、
少しだけめくれて元に戻るような感じにしたい。
そういう場合は、下記のように実装すればOK。

ページめくりを途中で元に戻すコード

CATransition *transition = [CATransition animation];
[transition setType:@"pageCurl"];
[transition setSubtype:kCATransitionFromRight];
[transition setDuration:1.0];
[transition setDelegate:self];
transition.endProgress = 0.4;
scrollView.imageView.hidden = YES; // 少しめくった部分を黒くしたいので画像を非表示にする
[[self.view layer] addAnimation:transition forKey: @"transition"];	

どのくらいページめくりするかは、CATransitionのendProgressプロパティで指定する。
この値が小さい程、ページめくりされる量が少なくなる。

上記の例ではこの部分
transition.endProgress = 0.4;


例では、scrollView.imageViewに画像を表示している。
scrollView.imageView.hiddenをYESに設定しているのはページめくりの動作で
ページを少しめくったところの背景が黒になるように
scrollView.imageViewを非表示にしている。
これが無いと、ページめくりした背景が同じ画像になってしまい
おかしい動作になってしまう。

scrollView.imageView.hidden = YES; 

上記のコードだけでは、途中までページがめくれて
その後に、画面が真っ黒になってしまうので
アニメーションが完了したタイミングで画像を再表示する処理が必要になる。

CATransitionのdelegateにselfを指定しているので
対象のクラスにCAAnimationの下記のメソッドを実装し
ここに画像を再表示する処理を実装する。

- (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag
{
    scrollView.imageView.hidden = NO;
}

これで少しページめくりした後に、表示中の画像が元通りに表示される。


実物の本の動きで考えるとおかしいような気もするが...