Just a Computer Graphics Studio & My Life

我們總以為只能使用內建的導覽動畫,這個功能也就是要進入下一頁面時會出現的行為,從右往左推進來是iOS一直以來預設動畫,而回上一頁則是從左往右推回去。

Navigation Animation.gif

現在我們想要呈現不一樣的效果,此時就要客製化導覽動畫 (Customize Navigation Animation)

經過高手同事阿宅的指導,我們可使用Category來實現,之後只要引用.h和.m這兩個檔案到專案中,呼叫我們自己做的推往下一頁拉回上一頁方法即可!

/**
 Theme: Customize Navigation Animation
 IDE: Xcode 7
 Language: Objective C
 Date: 105/03/19
 Author: HappyMan
 Blog: https://cg2010studio.wordpress.com/
 */
// UINavigationControllerFade.h
#import <UIKit/UIKit.h>
@interface UINavigationController (Fade)

- (void)pushFadeViewController:(UIViewController *)viewController;
- (void)fadePopViewController;

@end
// UINavigationControllerFade.m
#import "UINavigationControllerFade.h"
@implementation UINavigationController (Fade)

- (void)pushFadeViewController:(UIViewController *)viewController
{
    CATransition *transition = [CATransition animation];
    transition.duration = 0.3f;
    transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionDefault];
    [transition setType:kCATransitionMoveIn];
    [transition setSubtype:kCATransitionFromRight];
    [self.view.layer addAnimation:transition forKey:nil];

    [self pushViewController:viewController animated:NO];
}

- (void)fadePopViewController
{
    CATransition *transition = [CATransition animation];
    transition.duration = 0.3f;
    transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionDefault];
    [transition setType:kCATransitionMoveIn];
    [transition setSubtype:kCATransitionFromLeft];
    [self.view.layer addAnimation:transition forKey:nil];

    [self popViewControllerAnimated:NO];
}

可見到上述程式碼用到轉場功能,我們可以設定TransitionFromRight或TransitionFromLeft,還能控制動畫的時間,最後呼叫預設的push或pop,將Animated設為NO,即能呈現我們想要的轉場動畫囉~

如果兩頁面要共用同一個背景,可先把背景圖貼到appdelegate的window上,接著讓這兩頁的view的背景都設成透明,再呼叫剛才的程式碼,就能看到我們期待的效果嚕!

註:

程式碼同步到我的GitHub:Customize Navigation Animation

參考:Changing the UINavigationController animation style

廣告

發表留言

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s

標籤雲

%d 位部落客按了讚: