Just My Life & My Work

[iOS] 客製化導覽動畫 (Customize Navigation Animation)

2016 年 03 月 20 日

我們總以為只能使用內建的導覽動畫，這個功能也就是要進入下一頁面時會出現的行為，從右往左推進來是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。

分類：

iOS, 教學

發表留言

Tagged with:

隨意留個言吧：）～

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料。

標籤雲