UIView動畫UIView Animation總結

UIView動畫UIView Animation總結 原文地址

基本動畫

最常用的幾種方式

//duration動畫持續時間, animations想要完成動畫block, UIView動畫完成時的最終狀態
+ (void)animateWithDuration:(NSTimeInterval)duration 
                 animations:(void (^)(void))animations

//completion 動畫完成block, BOOL finished 表示動畫是否完成
+ (void)animateWithDuration:(NSTimeInterval)duration 
                 animations:(void (^)(void))animations 
                 completion:(void (^ __nullable)(BOOL finished))completion

//delay 延遲執行時間, options 動畫效果枚舉
+ (void)animateWithDuration:(NSTimeInterval)duration
                      delay:(NSTimeInterval)delay 
                      options:(UIViewAnimationOptions)options 
                      animations:(void (^)(void))animations 
                      completion:(void (^ __nullable)(BOOL finished))completion

animations 修改View屬性的Block 下面是支持修改的屬性

@property frame
@property bounds
@property center
@property transform
@property alpha
@property backgroundColor
@property contentStretch

options動畫效果枚舉 相關

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

時間函數曲線相關

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

轉場動畫相關的

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

彈簧動畫

+ (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

dampingRatio 彈簧的阻尼 如果為1動畫則平穩減速動畫沒有振蕩。 這里值為 0~1
velocity 彈簧的速率。數值越小，動力越小，彈簧的拉伸幅度就越小。反之相反。比如：總共的動畫運行距離是200 pt，你希望每秒 100pt 時，值為 0.5；
PS:

[UIView animateWithDuration:2
                      delay:2
     usingSpringWithDamping:.5
      initialSpringVelocity:.5
                    options:UIViewAnimationOptionRepeat
                animations:^{
   view.center = self.view.center;
} completion:^(BOOL finished) {   
}];
彈簧動畫

過渡動畫

//view 參與轉換的視圖
+ (void)transitionWithView:(UIView *)view 
                  duration:(NSTimeInterval)duration 
                  options:(UIViewAnimationOptions)options
                  animations:(void (^ __nullable)(void))animations 
                  completion:(void (^ __nullable)(BOOL finished))completion

PS:

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
view.center = self.view.center;
view.backgroundColor = [UIColor redColor];
[self.view addSubview:view];

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) {        
}];
過渡動畫1
//fromView 一開始的視圖, toView 轉換后的視圖
+ (void)transitionFromView:(UIView *)fromView
                    toView:(UIView *)toView 
                    duration:(NSTimeInterval)duration 
                    options:(UIViewAnimationOptions)options 
                    completion:(void (^ __nullable)(BOOL finished))completion

PS:

UIView *baseView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
baseView.center = self.view.center;
[self.view addSubview:baseView];

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
view.backgroundColor = [UIColor redColor];
[baseView addSubview:view];

UIView *view_1 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
view_1.backgroundColor = [UIColor yellowColor];

[UIView transitionFromView:view
                    toView:view_1 
                  duration:2 
                   options:UIViewAnimationOptionTransitionFlipFromLeft
                completion:^(BOOL finished) {    
}];
過渡動畫2

關鍵幀動畫

/**
*  @param duration 總持續時間
*  @param UIViewKeyframeAnimationOptions options 枚舉 下面說明
*  @param frameStartTime 相對開始時間
*  @param frameDuration 相對持續時間
*/
+ (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

PS:

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) {
}];
關鍵幀動畫

UIViewKeyframeAnimationOptions

UIViewKeyframeAnimationOptionLayoutSubviews        //提交動畫的時候布局子控件，表示子控件將和父控件一同動畫。
UIViewKeyframeAnimationOptionAllowUserInteraction  //動畫時允許用戶交流，比如觸摸    UIViewKeyframeAnimationOptionBeginFromCurrentState     //從當前狀態開始動畫
UIViewKeyframeAnimationOptionRepeat                //動畫無限重復
UIViewKeyframeAnimationOptionAutoreverse           //執行動畫回路,前提是設置動畫無限重復
UIViewKeyframeAnimationOptionOverrideInheritedDuration //忽略外層動畫嵌套的執行時間
UIViewKeyframeAnimationOptionOverrideInheritedOptions  //忽略嵌套繼承的選項

關鍵幀動畫獨有

UIViewKeyframeAnimationOptionCalculationModeLinear     //選擇使用一個簡單的線性插值計算的時候關鍵幀之間的值。
UIViewKeyframeAnimationOptionCalculationModeDiscrete   //選擇不插入關鍵幀之間的值,而是直接跳到每個新的關鍵幀的值。
UIViewKeyframeAnimationOptionCalculationModePaced      //選擇計算中間幀數值算法使用一個簡單的節奏。這個選項的結果在一個均勻的動畫。
UIViewKeyframeAnimationOptionCalculationModeCubic      //選擇計算中間幀使用默認卡特莫爾羅花鍵,通過關鍵幀的值。你不能調整該算法的參數。 這個動畫好像會更圓滑一些..
UIViewKeyframeAnimationOptionCalculationModeCubicPaced //選擇計算中間幀使用立方計劃而忽略的時間屬性動畫。相反,時間參數計算隱式地給動畫一個恒定的速度。

最后兩個

+ (void)performSystemAnimation:(UISystemAnimation)animation 
                       onViews:(NSArray *)views
                       options:(UIViewAnimationOptions)options 
                       animations:(void (^ __nullable)(void))parallelAnimations completion:(void (^ __nullable)(BOOL finished))completion
+ (void)performWithoutAnimation:(void (NS_NOESCAPE ^)(void))actionsWithoutAnimation

1.刪除視圖上的子視圖 animation這個枚舉只有一個刪除值...
views操作的view 這會讓那個視圖變模糊、收縮和褪色, 之后再給它發送 removeFromSuperview 方法。
2.在動畫block中不執行動畫的代碼.
PS:

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(20, 20, 50, 50)];
view.backgroundColor = [UIColor orangeColor];
[self.view addSubview:view];

UIView *view_1 = [[UIView alloc] initWithFrame:CGRectMake(10, 10, 20, 20)];
view_1.backgroundColor = [UIColor redColor];
[view addSubview:view_1];

[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) {
    }];
image
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 在iOS實際開發中常用的動畫無非是以下四種：UIView動畫，核心動畫，幀動畫，自定義轉場動畫。 1.UIView...
    請叫我周小帥閱讀 3,169評論 1贊 23
  • 重點參考鏈接： View Programming Guide for iOS https://developer....
    Kevin_Junbaozi閱讀 4,515評論 0贊 15
  • 在iOS中隨處都可以看到絢麗的動畫效果，實現這些動畫的過程并不復雜，今天將帶大家一窺ios動畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,572評論 6贊 30
  • 在iOS中隨處都可以看到絢麗的動畫效果，實現這些動畫的過程并不復雜，今天將帶大家一窺iOS動畫全貌。在這里你可以看...
    F麥子閱讀 5,143評論 5贊 13
  • 薛之謙小哥哥又出了新歌了，還是同樣的調調，同樣的憂傷，同樣的哀而不傷，我很喜歡這種感覺。 我一直覺得愛情來的有點快...
    腹黑小蘋果閱讀 834評論 0贊 1