踊る犬.netブログ (旧)

iOS7でtweetbotっぽいぼかしアニメーションつきModalView

概要

tweetbot 3では、モーダルビューの表示方法が下記画像のように凝っている。
ツイートの長押しでアクションメニューが表示される際に、直前の画面が後ろに下がりぼかしがかかる。
メニューは、それにオーバーレイされて表示される。
これ、チョーかっこいいので真似してみた。

こちらが、真似したもの。完全に再現は出来てないけど、満足レベル。

GitHubにてソースを取得できます: NRBlurryStepOutAnimatedTransitioning

つかいかた

NRBlurryStepOutAnimatedTransitioning.h,mをプロジェクトに追加します。

あなたのViewControllerにUIViewControllerTransitioningDelegateプロトコルを追加:

#!objectivec
@interface NRPresentedViewController : UIViewController<uiviewcontrollertransitioningdelegate>
@end

そのViewControllerクラスに以下のような実装を加えます:

#!objectivec
#import "NRBlurryStepOutAnimatedTransitioning.h"

-(void)showNewController;
{
    UIViewController* vc = [[YourModalViewController alloc] init];
    vc.transitioningDelegate = self;
    [self presentViewController:vc animated:YES completion:NULL];
}


#pragma mark - UIViewControllerTransitioningDelegate

- (id<uiviewcontrolleranimatedtransitioning>)animationControllerForPresentedController:(UIViewController *)presented presentingController:(UIViewController *)presenting sourceController:(UIViewController *)source
{
    return [[NRBlurryStepOutAnimatedTransitioning alloc] initWithPresenting:YES];
}

- (id</uiviewcontrolleranimatedtransitioning><uiviewcontrolleranimatedtransitioning>)animationControllerForDismissedController:(UIViewController *)dismissed
{
    return [[NRBlurryStepOutAnimatedTransitioning alloc] initWithPresenting:NO];
}

あとは -showNewController を好きな時に呼び出すだけ。
簡単!