UIView動畫簡介

ZY_FlyWay發表於2017-11-03
UIView動畫

今天總結一下UIView動畫就是 UiView動畫是基於高層API封裝進行封裝的,對UIView的屬性進行修改時候所產生的動畫.

基本動畫

下面兩種方法是最常用的兩種.

1
2
+ (void)animateWithDuration:(NSTimeInterval)duration 
                 animations:(void (^)(void))animations

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

1
2
3
4
5
6
7
@property frame
@property bounds
@property center
@property transform
@property alpha
@property backgroundColor
@property contentStretch
1
2
3
+ (void)animateWithDuration:(NSTimeInterval)duration 
                 animations:(void (^)(void))animations 
                 completion:(void (^ __nullable)(BOOL finished))completion

completion 動畫完成block

BOOL finished 表示動畫是否完成

繼續

1
2
3
4
5
+ (void)animateWithDuration:(NSTimeInterval)duration
                      delay:(NSTimeInterval)delay 
                      options:(UIViewAnimationOptions)options 
                      animations:(void (^)(void))animations 
                      completion:(void (^ __nullable)(BOOL finished))completion

delay 延遲執行時間

options 動畫效果列舉 ,下面是全部列舉的說明

動畫效果相關

1
2
3
4
5
6
7
8
9
10
UIViewAnimationOptionLayoutSubviews            //提交動畫的時候佈局子控制元件，表示子控制元件將和父控制元件一同動畫。
UIViewAnimationOptionAllowUserInteraction      //動畫時允許使用者交流，比如觸控
UIViewAnimationOptionBeginFromCurrentState     //從當前狀態開始動畫
UIViewAnimationOptionRepeat                    //動畫無限重複
UIViewAnimationOptionAutoreverse               //執行動畫迴路,前提是設定動畫無限重複
UIViewAnimationOptionOverrideInheritedDuration //忽略外層動畫巢狀的執行時間
UIViewAnimationOptionOverrideInheritedCurve    //忽略外層動畫巢狀的時間變化曲線
UIViewAnimationOptionAllowAnimatedContent      //通過改變屬性和重繪實現動畫效果，如果key沒有提交動畫將使用快照
UIViewAnimationOptionShowHideTransitionViews   //用顯隱的方式替代新增移除圖層的動畫效果
UIViewAnimationOptionOverrideInheritedOptions  //忽略巢狀繼承的選項

時間函式曲線相關

1
2
3
4
UIViewAnimationOptionCurveEaseInOut            //時間曲線函式，由慢到快
UIViewAnimationOptionCurveEaseIn               //時間曲線函式，由慢到特別快
UIViewAnimationOptionCurveEaseOut              //時間曲線函式，由快到慢
UIViewAnimationOptionCurveLinear               //時間曲線函式，勻速

轉場動畫相關的

1
2
3
4
5
6
7
8
UIViewAnimationOptionTransitionNone            //無轉場動畫
UIViewAnimationOptionTransitionFlipFromLeft    //轉場從左翻轉
UIViewAnimationOptionTransitionFlipFromRight   //轉場從右翻轉
UIViewAnimationOptionTransitionCurlUp          //上卷轉場
UIViewAnimationOptionTransitionCurlDown        //下卷轉場
UIViewAnimationOptionTransitionCrossDissolve   //轉場交叉消失
UIViewAnimationOptionTransitionFlipFromTop     //轉場從上翻轉
UIViewAnimationOptionTransitionFlipFromBottom  //轉場從下翻轉

彈簧動畫

1
2
3
4
5
6
7
+ (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；

例子

1
2
3
4
5
6
7
8
9
[UIView animateWithDuration:2
                      delay:2
     usingSpringWithDamping:.5
      initialSpringVelocity:.5
                    options:UIViewAnimationOptionRepeat
                animations:^{
   view.center = self.view.center;
} completion:^(BOOL finished) {   
}];

1444134-936f102da6e4037d.gif

過渡動畫

1
2
3
4
5
+ (void)transitionWithView:(UIView *)view 
                  duration:(NSTimeInterval)duration 
                  options:(UIViewAnimationOptions)options
                  animations:(void (^ __nullable)(void))animations 
                  completion:(void (^ __nullable)(BOOL finished))completion

view 參與轉換的檢視

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
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) {        
}];

1444134-3884cded6d157a53.gif

繼續

1
2
3
4
5
+ (void)transitionFromView:(UIView *)fromView
                    toView:(UIView *)toView 
                    duration:(NSTimeInterval)duration 
                    options:(UIViewAnimationOptions)options 
                    completion:(void (^ __nullable)(BOOL finished))completion

fromView 一開始的檢視

toView 轉換後的檢視

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
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 
                    duration:2 
                    options:UIViewAnimationOptionTransitionFlipFromLeft completion:^(BOOL finished) {    
}];

1444134-8514c630f8bbef73.gif

關鍵幀動畫

1
2
3
4
5
6
7
8
+ (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

duration 總持續時間

UIViewKeyframeAnimationOptions options 列舉 下面說明

frameStartTime 相對開始時間

frameDuration 相對持續時間

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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) {
}];

1444134-4d395d700c047416.gif

UIViewKeyframeAnimationOptions

1
2
3
4
5
6
    UIViewKeyframeAnimationOptionLayoutSubviews        //提交動畫的時候佈局子控制元件，表示子控制元件將和父控制元件一同動畫。
    UIViewKeyframeAnimationOptionAllowUserInteraction  //動畫時允許使用者交流，比如觸控    UIViewKeyframeAnimationOptionBeginFromCurrentState     //從當前狀態開始動畫
    UIViewKeyframeAnimationOptionRepeat                //動畫無限重複
    UIViewKeyframeAnimationOptionAutoreverse           //執行動畫迴路,前提是設定動畫無限重複
    UIViewKeyframeAnimationOptionOverrideInheritedDuration //忽略外層動畫巢狀的執行時間
    UIViewKeyframeAnimationOptionOverrideInheritedOptions  //忽略巢狀繼承的選項

關鍵幀動畫獨有

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

剩下兩個操作

1
2
3
4
5
+ (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中不執行動畫的程式碼.

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    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) {
    }];

1444134-73db41a16ffa9023.gif

相關文章