その後のその後

iOSエンジニア 堤 修一のブログ github.com/shu223

ビューのトランジション(画面遷移エフェクト)を自作する際に参考になりそうなサンプルコード

いつも勉強会で大変ためになる話をしてくれる岸川さんのgithubでみつけたソースコード。
FlipCardNavigationView






キャプチャ画像だと伝わりにくいですが、マス目をタップするとそのマス目が回転しつつ拡大しながら画面遷移する、というものです。


どう実装してるんだろう?と中身を除いてみると、FlipCardViewというUIViewのサブクラスが次のようなメソッドを持っていて、

- (void)pushViewController:(UIViewController *)controller {
    self.nextViewController = controller;

    UIView *selectedView = lastSelected.superview;

    UIImageView *thumbnailImageView = [[UIImageView alloc] initWithFrame:[thumbnailView convertRect:selectedView.frame toView:self]];

    UIGraphicsBeginImageContext(thumbnailImageView.frame.size);
    CGContextRef context = UIGraphicsGetCurrentContext();
    [selectedView.layer renderInContext:context];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    thumbnailImageView.image = image;
    thumbnailImageView.userInteractionEnabled = YES;
    [self addSubview:thumbnailImageView];
    [thumbnailImageView release];

    thumbFrame = thumbnailImageView.frame;

    [self performSelector:@selector(flipThumbViewToNextView:) withObject:thumbnailImageView afterDelay:0.0];
}

- (void)flipThumbViewToNextView:(UIView *)thumbnailImageView {
    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDuration:ANIMATION_DURATION];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
    [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:thumbnailImageView cache:YES];
    thumbnailImageView.frame = self.frame;
    [thumbnailImageView addSubview:nextViewController.view];
    [UIView commitAnimations];
}

選択されたFlipCardViewと同じframeを持つUIImageViewが生成され、UIViewAnimationTransitionFlipFromLeftでアニメーションしつつ遷移先のビューコントローラのビューがaddSubviewされる
という実装のようです。


で、そういった処理はラップされてるので、

[flipCardView pushViewController:controller];

こんな感じでUINavigationControllerを使うのと同じようにメソッドをコールするだけで画面遷移してくれます。


トランジションを自作するときの参考になりそうです。