iOS動畫全面解析

FindCrt發表於2018-10-25

iOS動畫

背景

動畫由CoreAnimation框架作為基礎支援，理解動畫之前要先理解CALayer這個東西的扮演的角色，瞭解它是負責呈現視覺內容的東西，它有3個圖層樹，還有知道CATransaction負責對layer的修改的捕獲和提交。

參考【重讀iOS】認識CALayer

除了系統實現層面的東西，還是通用意義上的動畫。動畫就是動起來的畫面，畫面不斷變換產生變化效果。並不是真的有一個東西在動，一切都只是對大腦的欺騙。認識到這個，就知道動畫需要：一系列的畫面，這些畫面之間具有相關性。

所以對於動畫系統而言，它需要:(1)知道變化規律，然後根據這個規律，(2)不斷的去重繪畫面。

最簡單的動畫

有了這個認識，再來看最簡單的UIView的動畫：

//建一個button
button = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 100, 40)];
button.backgroundColor = [UIColor orangeColor];
[self.view addSubview:button];
......
//一個簡單的移動動畫
[UIView animateWithDuration:3 animations:^{
    button.frame = CGRectMake(0, 300, 100, 40);
}];

複製程式碼

這是一個移動的動畫，移動是因為frame發生了改變。然後把這個修改放在UIView animateWithDuration:的block裡。對於系統而言，它有了button開始的位置，block裡有了結束的位置，而且有了時間。

一個物體從一個點移動到另一個點，而且時間已知，那麼就可以求出在任何一箇中間時間，這個物體的位置。這就是變化規律。而不斷重繪這個就是螢幕的重新整理了，這個是作業系統負責了，對於開發者而言，創造不同動畫就在於提供不同的變化規律。

CoreAnimation

UIView的一些動畫方法只是提供了更方便的API，理解了CoreAnimation的動畫，UIView的這些方法都自然清楚了，直接看CoreAnimation吧。

這個動畫類的繼承圖，iOS9時又新增了CASpringAnimation,繼承自CABasicAnimation。

每一個動畫類代表了某一種型別的動畫，代表著它們有著不同的變化規律。

CAAnimation

這個是基類，所以它不會有特別有特色的屬性，而是一些通用性的東西。在屬性裡值得注意的是timingFunction和delegate。timingFunction提供了時間的變化函式，可以理解成時間流速變快或變慢。delegate就兩個方法，通知你動畫開始了和結束了，沒什麼特別的。

CAMediaTiming

這是一個協議，CAAnimation實現了這個協議，裡面有一些跟時間相關的屬性挺有用的：

duration 動畫時間
repeatCount 重複次數
autoreverses 自動反轉動畫，如一個動畫是從A到B，這個為true時，會接著執行從B再到A的動畫。

CAPropertyAnimation

You do not create instances of CAPropertyAnimation: to animate the properties of a Core Animation layer, create instance of the concrete subclasses CABasicAnimation or CAKeyframeAnimation.

這個也還是一個抽象類，跟UIGestureRecognizer一樣直接構建物件用不了的。但它的屬性還是值得解讀一下：

keyPath 而且有一個以keyPath為引數的構建方法，所以這個屬性是核心級別。回到動畫的定義上，除了需要變化規律外，還需要變化內容。巧婦難為無米之炊，動畫是一種連續的變化，那就需要知道是什麼在變化。這裡選取內容的方式就是指定一個屬性，這個屬性是誰的屬性？CALayer的，動畫是載入在layer上的，layer是動畫的載體。開啟CALayer的文件，在屬性的註釋裡寫著Animatable的就是可以進行動畫的屬性，也就是可以填入到這個keyPath裡的東西。之所以是keyPath而不是key，是因為可以像position.y這樣使用點語法指定連續一連串的key。

從CAPropertyAnimation繼承的動畫，也都是按照這種方式來指定變化內容的。

additive和cumulative需要例子才好證實效果，到下面再說。
valueFunction 這個屬性類為CAValueFunction，只能通過名稱來構建，甚至沒有資料輸入的地方，也是從這突然看明白CAPropertyAnimation構建物件是沒有意義的。因為沒有資料輸入，就沒有動畫，就沒法實際應用，這個類只是為了封裝的需要而建立的。

總結一下，動畫需要3個基本要素：內容、時間和變化規律，不同的動畫都是在這3者上有差異。

CABasicAnimation

這個類就增加了3個屬性：fromValue toValue byValue。這3個屬性就正好是提供了輸入資料，確定了開始和結束狀態。

到現在，內容(keyPath)有了，時間(duration和timingFunction)有了,開始和結束狀態有了。通過插值(Interpolates)就可以得到任意一個時間點的狀態，然後渲染繪製形成一系列關聯的影象，形成動畫。

非空屬性	開始值	結束值
fromValue toValue	fromValue	toValue
fromValue byValue	fromValue	fromValue+byValue
toValue byValue	toValue -byValue	toValue
fromValue	fromValue	currentValue
toValue	currentValue	toValue
byValue	currentValue	byValue+currentValue

上面的表表示的是當3個屬性哪些是非空的時候，動畫是從哪個值開始、到哪個值結束。而且上面的情況優先於下面的情況。

測試additive和cumulative屬性

button.frame = CGRectMake(200, 400, 100, 40);

CABasicAnimation *basicAnim = [CABasicAnimation animationWithKeyPath:@"position"];
    
//mediaTiming
basicAnim.duration = 1;
basicAnim.repeatCount = 3;
    
//CAAnimation
basicAnim.removedOnCompletion = NO;
basicAnim.delegate = self;
    
//property
basicAnim.additive = NO;
basicAnim.cumulative = YES;
    
//basic
basicAnim.fromValue = [NSValue valueWithCGPoint:CGPointMake(100, 60)];
basicAnim.toValue = [NSValue valueWithCGPoint:CGPointMake(100, 200)];
    
[button.layer addAnimation:basicAnim forKey:@"move"];
複製程式碼

additive為true時，變化值整體加上layer的當前值，如button開始位置為x為200，fromValue的x為100，開啟additive則動畫開始時button的x為200+100=300，不開啟則100.
cumulative這個指每次的值要加上上一次迴圈的的結束值。這個就需要repeatCount>1的時候才能看出效果。比如這裡button第一次動畫結束後位置為(100, 200)，再次開始時位置不是(100, 60)，而是加上之前的結束值，即(200,260)。

對於不同型別的值疊加方式是不同的，如矩陣，並不是直接單個元素相加，而是使用矩陣加法。

CAKeyframeAnimation

終於到了明星關鍵幀動畫。

關鍵幀動畫，幀指一副畫面，動畫就是一幀幀畫面連續變動而得到的。而關鍵幀，是特殊的幀，舉個例子，一個物體按照矩形的路線運動，那麼提供4個角的座標就可以了，其他位置可以通過4個角的位置算出來。而關鍵幀就是那些不可缺少的關鍵的畫面，而其他幀可以通過這些關鍵幀推算出來。

所以關鍵幀動畫就是提供若干關鍵的資料，系統通過這些關鍵資料，推算出整個流程，然後完成動畫。

有了這個理解，再看CAKeyframeAnimation的屬性裡的values和keyTimes就好理解了。

values就是各個關鍵幀的資料，keyTimes是各個關鍵幀的時間點，而且這兩組資料時一一對應的，第一個value和第一個keyTime都是第一幀畫面的，以此類推。

按照這種思路，其實整個動畫就被切割成n個小階段了，每個節點有開始和結束資料和時間，就會發現這一小段其實就是一個CABasicAnimation，而CABasicAnimation也可以看成是一個特殊的關鍵幀動畫，只有開始和結束兩個關鍵幀。

所以在使用上和CABasicAnimation並沒有特別的地方，只是從傳from、to兩個資料，變成傳一組資料罷了。

屬性path

這個是一種特殊的動畫，如果要實現一個view按照某個路徑進行移動，就使用這個屬性，提供了路徑後，values屬性會被忽略。路徑可以通過貝塞爾曲線的類提供：

//內容
CAKeyframeAnimation *keyframeAnim = [CAKeyframeAnimation animationWithKeyPath:@"position"]; 
//時間
keyframeAnim.duration = 5;
//變化規律
UIBezierPath *path = [[UIBezierPath alloc] init];
[path addArcWithCenter:CGPointMake(200, 300) radius:100 startAngle:0 endAngle:M_PI*2 clockwise:YES];
keyframeAnim.path = [path CGPath];
複製程式碼

如果不提供這個path屬性，那就要我們提供許多的點來完成動畫，哪怕是簡單的轉圈圈，點資料也超級多，越平滑的動畫就需要越多的點。這個屬性可以說是為了這種需求而提供的特殊福利。

屬性calculationMode

這個屬性影響著關鍵幀之間的資料如何進行推算，一個個來說：

kCAAnimationLinear預設屬性，線性插值。
kCAAnimationDiscrete不進行插值，只顯示關鍵幀的畫面，看到的動畫就是跳躍的
kCAAnimationPaced,這個也是線性插值，但跟第一個的區別是它是整體考慮的。舉個例子，移動一個view,從A到B，再到C，假設A-B之間距離跟B-C之間距離一樣，但是前者的時間是10s，後者是20s,那麼動畫裡，後半段就會跑得慢。而Paced型別，就忽略掉keyTimes屬性，達到全域性勻速的效果，重新計算keyTimes。這個例子裡就變成A-B 15s，B-C也15s。
kCAAnimationCubic這個使用新的插值，演算法是Catmull-Rom spline,效果就是把轉折點變得圓滑。看一下這兩種路徑對比就立馬明白,第一個是線性插值。kCAAnimationCubicPaced這個就是兩種效果疊加。

屬性rotationMode

這個是配合路徑使用的，在使用路徑動畫時才有意義。當值為kCAAnimationRotateAuto是，會把layer旋轉，使得layer自身的x軸是跟路徑相切的,並且x軸方向跟運動方向一致，使用kCAAnimationRotateAutoReverse也是相切，但x軸方向跟運動方向相反。

CATransition

這個看似簡單，用起來卻似乎有點摸不著頭腦。transition過渡的意思，這個動畫用來完成layer的兩種狀態之間的過渡。

問題的核心就在這個兩種狀態，檢視CATransition的屬性，發現並沒有開始狀態、結束狀態之類的輸入。那這兩種狀態怎麼確定？How does CATransition work?這個問題裡的回答很清楚，擷取一段：

The way the CATransition performs this animation to to take a snapshot of the view before the layer properties are changed, and a snapshot of what the view will look like after the layer properties are changed

兩種狀態分別是：layer修改之前和之後。也就是把CATransition的動畫加到layer上之後，這時會生成一個快照，這個開始狀態；然後你要立馬對layer進行修改，這時layer呈現出另一種狀態，這是修改後，也就是動畫的結束狀態。這時系統得到了兩張快照，在這兩張快照之間做過渡效果，就是這個動畫。

所以如果你新增動畫後不做修改，好像看不出什麼效果。

一個例子：

[CATransaction begin];
UIView *container = [[UIView alloc] initWithFrame:CGRectMake(150, 200, 100, 100)];
container.backgroundColor = [UIColor colorWithWhite:0.95 alpha:1];
[self.view addSubview:container];
    
UILabel *label1 = [[UILabel alloc] initWithFrame:container.bounds];
label1.backgroundColor = [UIColor redColor];
label1.text = @"1";
label1.font = [UIFont boldSystemFontOfSize:30];
label1.textAlignment = NSTextAlignmentCenter;
[container addSubview:label1];
    
UILabel *label2 = [[UILabel alloc] initWithFrame:container.bounds];
label2.backgroundColor = [UIColor orangeColor];
label2.text = @"2";
label2.font = [UIFont boldSystemFontOfSize:30];
label2.textAlignment = NSTextAlignmentCenter;
[container addSubview:label2];
    
[CATransaction commit];
    
CATransition *fade = [[CATransition alloc] init];
fade.duration = 2;
fade.type = kCATransitionPush;
fade.subtype = kCATransitionFromRight;
    
//位置1
[container.layer addAnimation:fade forKey:nil];
//位置2
[container insertSubview:label2 belowSubview:label1];
複製程式碼

一個view上面新增了兩個子view,動畫載入父檢視上，新增動畫後修改子view的上下關係來修改layer的樣式。

為什麼要使用[CATransaction begin]和[CATransaction commit]把新增子檢視的程式碼包起來呢？

這本是一個bug，沒想到卻是一個對CATransaction理解加深的好例子。原因簡單說:

不使用顯式事務的時候，對layer的修改觸發隱式事務，而這種事務需要等到下一次runloop迴圈時才提交，
所以新增動畫的時候（位置1）事務還沒提交，container的layer資料時空的，那麼開始狀態就沒有，所以開始畫面是空白。
等到後面隱式事務提交，這時layer的修改（位置2）已經結束了，修改後的樣子成了動畫結束狀態。這個是對的。

//位置1
[CATransaction begin];
UIView *container = [[UIView alloc] initWithFrame:CGRectMake(150, 200, 100, 100)];
container.backgroundColor = [UIColor colorWithWhite:0.9 alpha:1];
[self.view addSubview:container];
[CATransaction commit];
    
//位置5
UILabel *label1 = [[UILabel alloc] initWithFrame:container.bounds];
label1.backgroundColor = [UIColor redColor];
label1.text = @"1";
label1.font = [UIFont boldSystemFontOfSize:30];
label1.textAlignment = NSTextAlignmentCenter;
[container addSubview:label1];
    
UILabel *label2 = [[UILabel alloc] initWithFrame:container.bounds];
label2.backgroundColor = [UIColor orangeColor];
label2.text = @"2";
label2.font = [UIFont boldSystemFontOfSize:30];
label2.textAlignment = NSTextAlignmentCenter;
[container addSubview:label2];
    
//位置2
[CATransaction begin];
container.backgroundColor = [UIColor colorWithWhite:0 alpha:1];
[CATransaction commit];
    
CATransition *fade = [[CATransition alloc] init];
fade.duration = 2;
fade.type = kCATransitionPush;
fade.subtype = kCATransitionFromRight;

//位置3
[container.layer addAnimation:fade forKey:nil];
//位置4
[container insertSubview:label2 belowSubview:label1];
複製程式碼

如果做一下簡單的修改：改成位置1和位置2兩個事務，位置1時container顏色是灰色，位置2時是黑色。中間label1和label2的處理程式碼不加入顯式事務。

結果會怎麼樣？

動畫變成開始畫面是灰色的container,結束狀態是label1的樣式。

還是開始狀態的問題，有兩個問題：

開始狀態為什麼不是label2的樣式
開始狀態為什麼不是黑色，而是灰色

中間有一段（位置5）沒有加入顯式事務，那麼它就開啟了隱式事務，它要等到下一次runloop迴圈才提交，反正是要等到這個方法執行結束。那麼這一段都沒有加入到container的layer裡，所以不會是label2的樣式。

因為隱式事務開啟了，又還沒有結束，所以位置2的事務變成了一個巢狀事務，而巢狀事務我只找到這麼一句話文件位置：

Only after you commit the changes for the outermost transaction does Core Animation begin the associated animations.

很大的可能是，巢狀時，內部的事務提交的東西是提給外層的事務，然後一層層提交，最後一層才把資料提交給CoreAnimation系統，系統這時才會得到資料重新整理，才會更新layer的畫面。

所以位置2的事務雖然提交了，但是它還是等到隱式事務提交才能起作用。把位置5處程式碼刪掉就能看出區別。

CAAnimationGroup

這個沒什麼可說的，讓多個動畫一起執行，顯示出符合效果。值得注意的是：

group的時間是有意義的，但它不影響子動畫怎麼執行，只是到了時間就停止所有子動畫，不管子動畫是否結束。所以在超出自動化時間後，修改這個值就沒意義了。
每個子動畫是獨立執行的，如動畫1時長1s,動畫2時長5s,那麼後4s就是動畫2的效果。

CASpringAnimation

Spring是彈簧的意思，這個動畫就是像彈簧一樣擺動的效果。

button.center = CGPointMake(0, 200);
    
CASpringAnimation *springAnim = [CASpringAnimation animationWithKeyPath:@"position"];
springAnim.toValue = [NSValue valueWithCGPoint:CGPointMake(200, 200)];
springAnim.duration = 10;
springAnim.mass = 10;
springAnim.stiffness = 50;
springAnim.damping = 1;
springAnim.initialVelocity = 0;
springAnim.delegate = self;
    
[button.layer addAnimation:springAnim forKey:@"spring"];
複製程式碼

這個類繼承自CABasicAnimation,所以還是需要keyPath、fromValue、toValue等資料。因為keyPath存在，所以它不只是用於物體的運動，還可以是其他的，比如顏色。CASpringAnimation提供了像彈簧一樣的變化規律，而不只是運動的動畫。

然後CASpringAnimation自身的屬性用於計算彈簧的運動模式：

mass 越大運動速度會慢，但衰減慢
stiffness 越大，速度越快，彈性越好
damping 越大衰減越快
initialVelocity 初始速度，越大動畫開始時越快

動畫時間不影響動畫的執行模式，這一點跟其他的動畫不一樣，這裡時間到了，物體還在動就會直接掐掉、動畫停止。

CALayer子類的特殊動畫

CALayer還有一系列的子類，每種layer還有它們自己特有的動畫。同樣，進文件檢視屬性的註釋，帶有Animatable的是有動畫的，配合CABasicAnimation和CAKeyframeAnimation使用。

CATextLayer

CATextLayer有兩個動畫屬性,fontSize和foregroundColor。

CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"fontSize"];
anim.duration = 5;
anim.fromValue = @(10);
anim.toValue = @(30);
    
CATextLayer *textLayer = [[CATextLayer alloc] init];
textLayer.foregroundColor = [UIColor blackColor].CGColor;
textLayer.string = @"一串字串";
textLayer.frame = CGRectMake(0, 300, 300, 60);
[textLayer addAnimation:anim forKey:@"text"];
    
[self.view.layer addSublayer:textLayer];
複製程式碼

CAShapeLayer

CAShapeLayer裡有許多動畫屬性，但最神奇的就是strokeStart和strokeEnd,特別是兩個組合使用的使用簡直重新整理認知！！！

CAShapeLayer的圖形是靠路徑提供的，而strokeStart和strokeEnd這兩個屬性就是用來設定繪製的開始和結束為止。0代表path的開始位置，1代表path的結束為止，比如strokeStart設為0.5，strokeEnd設為1，那麼layer就只繪製path的後半段。

通過修改這兩個屬性，就可以達到只繪製path一部分的目的，然後它們還都支援動畫，就可以創造出神奇的效果！

-(void)shaperLayerAnimations{
//圖形開始位置的動畫
CABasicAnimation *startAnim = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
startAnim.duration = 5;
startAnim.fromValue = @(0);
startAnim.toValue = @(0.6);
    
//圖形結束位置的動畫
CABasicAnimation *endAnim = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
endAnim.duration = 5;
endAnim.fromValue = @(0.4);
endAnim.toValue = @(1);
    
//把兩個動畫合併，繪製的區域就會不斷變動
CAAnimationGroup *group = [[CAAnimationGroup alloc] init];
group.animations = @[startAnim, endAnim];
group.duration = 5;
group.autoreverses = YES;
    
CAShapeLayer *shapeLayer = [[CAShapeLayer alloc] init];
shapeLayer.frame = self.view.bounds;
   
//圖形是一大一小兩個圓相切巢狀
UIBezierPath *path = [[UIBezierPath alloc] init];
[path addArcWithCenter:CGPointMake(100, 300) radius:100 startAngle:0 endAngle:M_PI*2 clockwise:YES];
[path addArcWithCenter:CGPointMake(150, 300) radius:50 startAngle:0 endAngle:M_PI*2 clockwise:YES];
shapeLayer.path = [path CGPath];
shapeLayer.strokeColor = [UIColor redColor].CGColor;
shapeLayer.fillColor = [UIColor whiteColor].CGColor;
    
[shapeLayer addAnimation:group forKey:@"runningLine"];
[self.view.layer addSublayer:shapeLayer];
}
複製程式碼

Animations

互動式動畫

iOS10有了UIViewPropertyAnimator，可以控制動畫的流程，核心是fractionComplete這個引數，可以指定動畫停留在某個位置。這裡用一個pan手勢來調整fractionComplete，實現手指滑動時，動畫跟隨執行的效果。

這感覺有點像，拖動進度條然後電影前進或後退，隨意控制進度。

UIViewPropertyAnimator *animator;
-(void)interactiveAnimations{
    
    button.frame = CGRectMake(200, 100, 100, 100);
    button.layer.cornerRadius = button.bounds.size.width/2;
    button.layer.masksToBounds = YES;
    
    animator = [[UIViewPropertyAnimator alloc] initWithDuration:5 curve:(UIViewAnimationCurveEaseOut) animations:^{
        button.transform = CGAffineTransformMakeScale(0.1, 0.1);
    }];
    
    [animator startAnimation];
    [animator pauseAnimation];
    
    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panAction:)];
    [self.view addGestureRecognizer:pan];
}

float startFrac;
-(void)panAction:(UIPanGestureRecognizer *)pan{
    if (pan.state == UIGestureRecognizerStateChanged) {
        [animator pauseAnimation];
        float delta = [pan translationInView:self.view].y / self.view.bounds.size.height;
        animator.fractionComplete = startFrac+delta;
    }else if (pan.state == UIGestureRecognizerStateBegan){
        startFrac = animator.fractionComplete;
    }else if (pan.state == UIGestureRecognizerStateEnded){
        [animator startAnimation];
    }
}
複製程式碼

ViewController的轉場動畫

兩種，一個是navigation的push和pop，通過navigationController的delegate提供:

動畫 UIViewControllerAnimatedTransitioning
互動性動畫 UIViewControllerInteractiveTransitioning

另一種是VC的present和dismiss,通過VC自身的transitioningDelegate提供：

動畫 UIViewControllerAnimatedTransitioning
互動性動畫 UIViewControllerInteractiveTransitioning

提供的資料時一樣的型別，所以這兩種其實邏輯上是一樣的。

先看提供動畫的UIViewControllerAnimatedTransitioning,就兩個方法：

transitionDuration:讓你提供動畫的時間
animateTransition: 在這裡面執行動畫

站在設計者的角度來看一下整個流程，這樣會幫助對這個框架的理解：

一切從push開始，nav開始push,它會去檢視自己的delegate,有沒有實現提供轉場動畫的方法，沒有就使用預設的效果，結束。

有，那麼就可以拿到實現UIViewControllerAnimatedTransitioning的物件，然後從這個物件裡拿到動畫時間，用這個時間去同步處理其他的操作，比如導航欄的動畫。同時呼叫這個物件的animateTransition:執行我們提供的動畫。

這個過程瞭解了，就明白每個類在這個過程裡的意義。因為這些名詞都太長，命名也很像，很容易混淆意義。