iOS 動畫--UIView動畫

首先看一下官方文檔對UIView動畫的一些說明

Changes to several view properties can be animated—that is, changing the property creates an animation starting at the current value and ending at the new value that you specify. The following properties of the UIView class are animatable:

  • frame
  • bounds
  • center
  • alpha
  • backgroundColor

改變view的一些屬性可以產(chǎn)生動畫效果,也就是說,這種動畫是從屬性的初始值開始,到給定的新值為止。以下幾個屬性是可動畫屬性:frame、bounds、center、alpha、backgroundColor

我們可以使用系統(tǒng)提供的UIView的類方法實現(xiàn)動畫效果,通過方法中的參數(shù)來設(shè)置時長、延遲等值

+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(4_0);

+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(4_0); // delay = 0.0, options = 0

+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void (^)(void))animations NS_AVAILABLE_IOS(4_0); // delay = 0.0, options = 0, completion = NULL

duration:動畫時長
delay:延遲時間
options:動畫的展示方式
animation:需要進行怎樣的動畫
completion:動畫完成后執(zhí)行
另外在iOS7之后,又提供了兩個關(guān)鍵幀動畫方法:

+ (void)animateKeyframesWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewKeyframeAnimationOptions)options animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion NS_AVAILABLE_IOS(7_0);
+ (void)addKeyframeWithRelativeStartTime:(double)frameStartTime relativeDuration:(double)frameDuration animations:(void (^)(void))animations NS_AVAILABLE_IOS(7_0); 

以及一些轉(zhuǎn)場動畫的方法

參數(shù)

這些方法,傳入不同參數(shù),會得出不同的動畫效果:

option
  • Repeating
    UIViewAnimationOptionRepeat:動畫循環(huán)執(zhí)行
    UIViewAnimationOptionAutoreverse:動畫執(zhí)行完之后會反向再執(zhí)行一次
    如果選擇了動畫循環(huán)執(zhí)行這一option,則程序不會執(zhí)行后續(xù)的completion block代碼塊

  • Easing
    這一組option給出了動畫加速或減速的規(guī)則:
    UIViewAnimationOptionCurveEaseInOut先加速后減速,默認情況
    UIViewAnimationOptionCurveEaseIn由慢到快
    UIViewAnimationOptionCurveEaseOut由快到慢
    UIViewAnimationOptionCurveLinear勻速
    如圖所示,修改view的frame,動畫執(zhí)行時間都是3秒,選擇了不同的option,效果不同:

    Ease.gif

    同樣,修改alpha時(如圖是alpha值從1到0.2),效果也類似:
    Ease_alpha.gif

  • Transitioning
    UIViewAnimationOptionTransitionNone 沒有效果,默認
    UIViewAnimationOptionTransitionFlipFromLeft 從左翻轉(zhuǎn)效果
    UIViewAnimationOptionTransitionFlipFromRight 從右翻轉(zhuǎn)效果
    UIViewAnimationOptionTransitionCurlUp 從上往下翻頁
    UIViewAnimationOptionTransitionCurlDown 從下往上翻頁
    UIViewAnimationOptionTransitionCrossDissolve 舊視圖溶解過渡到下一個視圖
    UIViewAnimationOptionTransitionFlipFromTop 從上翻轉(zhuǎn)效果
    UIViewAnimationOptionTransitionFlipFromBottom 從上翻轉(zhuǎn)效果
    這些參數(shù)只能在視圖切換的時候使用,比如為一個UIImageView切換圖片,移動view時不能使用。所以應(yīng)該使用transition開頭的方法

NSArray *optionArray  = @[@(UIViewAnimationOptionTransitionNone),
                              @(UIViewAnimationOptionTransitionFlipFromLeft),
                              @(UIViewAnimationOptionTransitionFlipFromRight),
                              @(UIViewAnimationOptionTransitionCurlUp),
                              @(UIViewAnimationOptionTransitionCurlDown),
                              @(UIViewAnimationOptionTransitionCrossDissolve),
                              @(UIViewAnimationOptionTransitionFlipFromTop),
                              @(UIViewAnimationOptionTransitionFlipFromBottom)];
    for (int i = 0;i < TransitionCount;i ++) {
        UIImageView *subBall = self.imgArray[i];
        [UIView transitionWithView:subBall duration:3 options:[optionArray[i] integerValue] animations:^{
            subBall.image = [UIImage imageNamed:@"leilei1"];
        } completion:nil];
    }

以上代碼可以實現(xiàn)如圖效果,圖片從有小哥哥的一面翻到?jīng)]有的一面,動畫時長3秒:


transition.gif

可以看出,切換圖片的時候,原來的圖片會以view中心為軸翻轉(zhuǎn),而且系統(tǒng)還自動加上了陰影效果

  • 彈簧效果
    這是個比較有意思的api,可以制作出類似彈簧效果的動畫:
+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay usingSpringWithDamping:(CGFloat)dampingRatio initialSpringVelocity:(CGFloat)velocity options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^ __nullable)(BOOL finished))completion;

主要注意一下參數(shù):

  1. dampingRatio:衰減比例,取值范圍為0 -1,因為是衰減比例,所以該值越低震動越強
  2. velocity:初始化速度。值越高速度越快
    如圖所示是在velocity不變的情況下,不同dampingRatio的效果:


    spring.gif
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 在iOS實際開發(fā)中常用的動畫無非是以下四種:UIView動畫,核心動畫,幀動畫,自定義轉(zhuǎn)場動畫。 1.UIView...
    請叫我周小帥閱讀 3,313評論 1 23
  • rljs by sennchi Timeline of History Part One The Cognitiv...
    sennchi閱讀 7,817評論 0 10
  • 一、iOS動畫 iOS中實現(xiàn)一個動畫十分簡單,在view層面上通過調(diào)用 但是它不能控制動畫的暫停和組合,所以就需要...
    nuclear閱讀 8,123評論 6 37
  • 目錄 ** UIView 動畫 ** ** Core Animation ** ** FaceBook POP動畫...
    方向_4d0d閱讀 1,814評論 0 3
  • 年少時,做事還不叫做事,只是玩,有些“喜怒無?!保菚r做事也還不帶目的,只是有著某些預(yù)期,比如新玩具,好吃的……。...
    山賊爺閱讀 224評論 0 0

友情鏈接更多精彩內(nèi)容