iOS-UIView動畫-UIView Animation簡介

UIView Animation動畫是iOS開發(fā)中最常用的動畫類，下面總結(jié)一下UIView Animation動畫的基本用法。

UIView Animation動畫的常用方法

//方法一
[UIView animateWithDuration:4.0 // 動畫時長
                 animations:^{
                     // code

                 }];

//方法二
[UIView animateWithDuration:4.0 // 動畫時長
         animations:^{
           // code...
         }
         completion:^(BOOL finished) {
           // 動畫完成后執(zhí)行
           // code...
         }];

//方法三
[UIView animateWithDuration:4.0 // 動畫時長
             delay:2.0 // 動畫延遲
          options:UIViewAnimationOptionCurveEaseIn // 動畫過渡效果
         animations:^{
           // code...
         }
         completion:^(BOOL finished) {
           // 動畫完成后執(zhí)行
           // code...
         }];

//方法四（在IOS7開始，系統(tǒng)動畫效果廣泛應(yīng)用Spring Animation ：）
[UIView animateWithDuration:4.0 // 動畫時長
            delay:0.0 // 動畫延遲
   usingSpringWithDamping:1.0 // 彈簧的阻尼 0~1（如果為1動畫則平穩(wěn)減速動畫沒有振蕩）
    initialSpringVelocity:5.0 // 彈簧的速率（數(shù)值越小，動力越小，彈簧的拉伸幅度就越小。反之相反。比如：總共的動畫運行距離是200 pt，你希望每秒 100pt 時，值為 0.5；）
          options:UIViewAnimationOptionCurveEaseInOut // 動畫過渡效果
         animations:^{
           // code...
           CGPoint point = _imageView.center;
           point.y += 150;
           [_imageView setCenter:point];
         } completion:^(BOOL finished) {
           // 動畫完成后執(zhí)行
           // code...
           [_imageView setAlpha:1];
         }];

動畫效果相關(guān)：

UIViewAnimationOptionLayoutSubviews            //提交動畫的時候布局子控件，表示子控件將和父控件一同動畫。
UIViewAnimationOptionAllowUserInteraction      //動畫時允許用戶交流，比如觸摸
UIViewAnimationOptionBeginFromCurrentState     //從當(dāng)前狀態(tài)開始動畫
UIViewAnimationOptionRepeat                    //動畫無限重復(fù)
UIViewAnimationOptionAutoreverse               //執(zhí)行動畫回路,前提是設(shè)置動畫無限重復(fù)
UIViewAnimationOptionOverrideInheritedDuration //忽略外層動畫嵌套的執(zhí)行時間
UIViewAnimationOptionOverrideInheritedCurve    //忽略外層動畫嵌套的時間變化曲線
UIViewAnimationOptionAllowAnimatedContent      //通過改變屬性和重繪實現(xiàn)動畫效果，如果key沒有提交動畫將使用快照
UIViewAnimationOptionShowHideTransitionViews   //用顯隱的方式替代添加移除圖層的動畫效果
UIViewAnimationOptionOverrideInheritedOptions  //忽略嵌套繼承的選項

時間函數(shù)曲線相關(guān):

UIViewAnimationOptionCurveEaseInOut            //時間曲線函數(shù)，由慢到快
UIViewAnimationOptionCurveEaseIn               //時間曲線函數(shù)，由慢到特別快
UIViewAnimationOptionCurveEaseOut              //時間曲線函數(shù)，由快到慢
UIViewAnimationOptionCurveLinear               //時間曲線函數(shù)，勻速

轉(zhuǎn)場動畫相關(guān)的:

UIViewAnimationOptionTransitionNone            //無轉(zhuǎn)場動畫
UIViewAnimationOptionTransitionFlipFromLeft    //轉(zhuǎn)場從左翻轉(zhuǎn)
UIViewAnimationOptionTransitionFlipFromRight   //轉(zhuǎn)場從右翻轉(zhuǎn)
UIViewAnimationOptionTransitionCurlUp          //上卷轉(zhuǎn)場
UIViewAnimationOptionTransitionCurlDown        //下卷轉(zhuǎn)場
UIViewAnimationOptionTransitionCrossDissolve   //轉(zhuǎn)場交叉消失
UIViewAnimationOptionTransitionFlipFromTop     //轉(zhuǎn)場從上翻轉(zhuǎn)
UIViewAnimationOptionTransitionFlipFromBottom  //轉(zhuǎn)場從下翻轉(zhuǎn)

UIView Animation過渡動畫

view 參與轉(zhuǎn)換的視圖
<1>

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
[self.view addSubview:view];
view.center = self.view.center;
view.backgroundColor = [UIColor redColor];
UIView *view_1 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 50, 50)];
view_1.backgroundColor = [UIColor yellowColor];
[UIView transitionWithView:view 
                  duration:3      
                  options:UIViewAnimationOptionTransitionCurlUp 
                  animations:^{
                  [view addSubview:view_1];      
} completion:^(BOOL finished) {        
}];
1499658355350609.gif

<2>

UIView *baseView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
[self.view addSubview:baseView];
baseView.center = self.view.center;
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
[baseView addSubview:view];
view.backgroundColor = [UIColor redColor];
UIView *view_1 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
view_1.backgroundColor = [UIColor yellowColor];
[UIView transitionFromView:view  //開始的視圖
                    toView:view_1   //轉(zhuǎn)換后的視圖
                    duration:2 
                    options:UIViewAnimationOptionTransitionFlipFromLeft completion:^(BOOL finished) {    
}];
1499658454392632.gif

UIView Animation關(guān)鍵幀動畫

UIView關(guān)鍵幀動畫的兩個方法

//duration 總持續(xù)時間
//UIViewKeyframeAnimationOptions options 枚舉 下面說明
//frameStartTime 相對開始時間
//frameDuration 相對持續(xù)時間
+ (void)animateKeyframesWithDuration:(NSTimeInterval)duration
                              delay:(NSTimeInterval)delay 
                              options:(UIViewKeyframeAnimationOptions)options 
                              animations:(void (^)(void))animations
                               completion:(void (^ __nullable)(BOOL finished))completion;
+ (void)addKeyframeWithRelativeStartTime:(double)frameStartTime 
                        relativeDuration:(double)frameDuration 
                        animations:(void (^)(void))animations;
//UIViewKeyframeAnimationOptions 枚舉說明
    UIViewKeyframeAnimationOptionLayoutSubviews        //提交動畫的時候布局子控件，表示子控件將和父控件一同動畫。
    UIViewKeyframeAnimationOptionAllowUserInteraction  //動畫時允許用戶交流，比如觸摸    UIViewKeyframeAnimationOptionBeginFromCurrentState     //從當(dāng)前狀態(tài)開始動畫
    UIViewKeyframeAnimationOptionRepeat                //動畫無限重復(fù)
    UIViewKeyframeAnimationOptionAutoreverse           //執(zhí)行動畫回路,前提是設(shè)置動畫無限重復(fù)
    UIViewKeyframeAnimationOptionOverrideInheritedDuration //忽略外層動畫嵌套的執(zhí)行時間
    UIViewKeyframeAnimationOptionOverrideInheritedOptions  //忽略嵌套繼承的選項
   //關(guān)鍵幀動畫獨有
    UIViewKeyframeAnimationOptionCalculationModeLinear     //選擇使用一個簡單的線性插值計算的時候關(guān)鍵幀之間的值。
    UIViewKeyframeAnimationOptionCalculationModeDiscrete   //選擇不插入關(guān)鍵幀之間的值,而是直接跳到每個新的關(guān)鍵幀的值。
    UIViewKeyframeAnimationOptionCalculationModePaced      //選擇計算中間幀數(shù)值算法使用一個簡單的節(jié)奏。這個選項的結(jié)果在一個均勻的動畫。
    UIViewKeyframeAnimationOptionCalculationModeCubic      //選擇計算中間幀使用默認卡特莫爾羅花鍵,通過關(guān)鍵幀的值。你不能調(diào)整該算法的參數(shù)。 這個動畫好像會更圓滑一些..
    UIViewKeyframeAnimationOptionCalculationModeCubicPaced //選擇計算中間幀使用立方計劃而忽略的時間屬性動畫。相反,時間參數(shù)計算隱式地給動畫一個恒定的速度。

相關(guān)實例：

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(20, 20, 50, 50)];
view.backgroundColor = [UIColor orangeColor];
[self.view addSubview:view];
[UIView animateKeyframesWithDuration:3 delay:3 options:UIViewKeyframeAnimationOptionRepeat animations:^{
    [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:.3 animations:^{
            view.frame = CGRectMake(20, 100, 100, 100);
    }];
     [UIView addKeyframeWithRelativeStartTime:.3 relativeDuration:.6 animations:^{
            view.frame = CGRectMake(60, 100, 80, 80);
    }];
    [UIView addKeyframeWithRelativeStartTime:.6 relativeDuration:1 animations:^{
            view.frame = CGRectMake(20, 20, 50, 50);
    }];
} completion:^(BOOL finished) {
}];
1499658623524270.gif

UIView Animation兩個移除視圖方法

//刪除視圖上的子視圖 animation這個枚舉只有一個刪除值...
//views數(shù)組中的view 會讓那個視圖變模糊、收縮和褪色, 之后再給它發(fā)送 removeFromSuperview 方法。
+ (void)performSystemAnimation:(UISystemAnimation)animation 
                       onViews:(NSArray *)views
                       options:(UIViewAnimationOptions)options 
                       animations:(void (^ __nullable)(void))parallelAnimations completion:(void (^ __nullable)(BOOL finished))completion
//在動畫block中不執(zhí)行動畫的代碼
+ (void)performWithoutAnimation:(void (NS_NOESCAPE ^)(void))actionsWithoutAnimation

相關(guān)實例：

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(20, 20, 50, 50)];
    view.backgroundColor = [UIColor orangeColor];
    UIView *view_1 = [[UIView alloc] initWithFrame:CGRectMake(10, 10, 20, 20)];
    [view addSubview:view_1];
    view_1.backgroundColor = [UIColor redColor];
    [self.view addSubview:view];
    [UIView animateKeyframesWithDuration:3 delay:3 options:UIViewKeyframeAnimationOptionRepeat|UIViewKeyframeAnimationOptionAutoreverse animations:^{
        view.frame = CGRectMake(100, 100, 50, 50);
        [UIView performWithoutAnimation:^{
            view.backgroundColor = [UIColor blueColor];
        }];
    } completion:^(BOOL finished) {
    }];
    [UIView performSystemAnimation:UISystemAnimationDelete 
                           onViews:@[view_1] 
                           options:0 
                           animations:^{
        view_1.alpha = 0;
    } completion:^(BOOL finished) {
    }];
1499658829164730.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ù)。

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