Just a Computer Graphics Studio & My Life

有時候我們想讓畫面轉換時變得很絢麗,此時就可以利用內建的轉場動畫 (Transition Animation)

轉場動畫 Transition Animation2


很簡單的只要幾行程式碼,設定好參數來符合我們想要的效果,所設即所得!


/**
 Theme: Transition Animation
 IDE: Xcode 5
 Language: Objective C
 Date: 103/05/26
 Author: HappyMan
 Blog: https://cg2010studio.wordpress.com/
 */
-(IBAction)transitionButtonClicked:(UIButton *)button
{
    CATransition *animation = [CATransition animation];
    [animation setDuration:1.0];
    [animation setFillMode:kCAFillModeForwards];
    [animation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
    [animation setType:kCATransitionMoveIn];// rippleEffect
    [animation setSubtype:kCATransitionFromLeft];
    [self.view.layer addAnimation:animation forKey:nil];
}

這些參數可以這麼設定,陸續有四個屬性可以設定喔!


/* `fillMode' options. */

CA_EXTERN NSString * const kCAFillModeForwards

    __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);

CA_EXTERN NSString * const kCAFillModeBackwards

    __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);

CA_EXTERN NSString * const kCAFillModeBoth

    __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);

CA_EXTERN NSString * const kCAFillModeRemoved

    __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);



/** Timing function names. **/

CA_EXTERN NSString * const kCAMediaTimingFunctionLinear

    __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);

CA_EXTERN NSString * const kCAMediaTimingFunctionEaseIn

    __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);

CA_EXTERN NSString * const kCAMediaTimingFunctionEaseOut

    __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);

CA_EXTERN NSString * const kCAMediaTimingFunctionEaseInEaseOut

    __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);

CA_EXTERN NSString * const kCAMediaTimingFunctionDefault

    __OSX_AVAILABLE_STARTING (__MAC_10_6, __IPHONE_3_0);



/* The name of the transition. Current legal transition types include

 * `fade', `moveIn', `push' and `reveal'. Defaults to `fade'. */

@property(copy) NSString *type;

/* Common transition types. */

CA_EXTERN NSString * const kCATransitionFade

    __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);

CA_EXTERN NSString * const kCATransitionMoveIn

    __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);

CA_EXTERN NSString * const kCATransitionPush

    __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);

CA_EXTERN NSString * const kCATransitionReveal

    __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);



/* An optional subtype for the transition. E.g. used to specify the

 * transition direction for motion-based transitions, in which case

 * the legal values are `fromLeft', `fromRight', `fromTop' and

 * `fromBottom'. */

@property(copy) NSString *subtype;

/* Common transition subtypes. */

CA_EXTERN NSString * const kCATransitionFromRight

    __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);

CA_EXTERN NSString * const kCATransitionFromLeft

    __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);

CA_EXTERN NSString * const kCATransitionFromTop

    __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);

CA_EXTERN NSString * const kCATransitionFromBottom

    __OSX_AVAILABLE_STARTING (__MAC_10_5, __IPHONE_2_0);

效果可就要實際去編譯執行囉~這裡只有截圖可看⋯⋯不知道能不能螢幕錄影,如此我好做教學?

轉場動畫 Transition Animation

廣告

發表留言

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

WordPress.com Logo

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

Twitter picture

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

Facebook照片

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

Google+ photo

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

連結到 %s

標籤雲

%d 位部落客按了讚: