iOS動畫全面解析

FindCrt發表於2018-10-25

背景

動畫由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吧。

CAAnimationHierarchy.png

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

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

CAAnimation

這個是基類,所以它不會有特別有特色的屬性,而是一些通用性的東西。在屬性裡值得注意的是timingFunctiondelegatetimingFunction提供了時間的變化函式,可以理解成時間流速變快或變慢。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繼承的動畫,也都是按照這種方式來指定變化內容的。

  • additivecumulative需要例子才好證實效果,到下面再說。
  • 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的屬性裡的valueskeyTimes就好理解了。

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這個就是兩種效果疊加。
    liner.png

cubic.png

屬性rotationMode

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

rotateMode.png

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的樣式。

fade.png

還是開始狀態的問題,有兩個問題:

  • 開始狀態為什麼不是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的是有動畫的,配合CABasicAnimationCAKeyframeAnimation使用。

CATextLayer

CATextLayer有兩個動畫屬性,fontSizeforegroundColor

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裡有許多動畫屬性,但最神奇的就是strokeStartstrokeEnd,特別是兩個組合使用的使用簡直重新整理認知!!!

CAShapeLayer的圖形是靠路徑提供的,而strokeStartstrokeEnd這兩個屬性就是用來設定繪製的開始和結束為止。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:執行我們提供的動畫。

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

一個例子:

-(NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext{
    return _duration;
}

-(void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext{
    
    UIViewController *fromVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
    UIViewController *toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
    
    UIView *fromView = fromVC.view;
    UIView *toView = toVC.view;
    
    if (self.type == TransitionTypePush) {
        
        [transitionContext.containerView addSubview:toView];
        float scale = 0.7f;
        toView.transform = CGAffineTransformConcat(CGAffineTransformMakeTranslation(toView.bounds.size.width*(1+1/scale)/2, 0), CGAffineTransformMakeScale(scale, scale));
        
        [UIView animateWithDuration:_duration animations:^{
            
            fromView.transform = CGAffineTransformMakeScale(scale, scale);
            
            toView.transform = CGAffineTransformIdentity;
            
        } completion:^(BOOL finished) {
            fromView.transform = CGAffineTransformIdentity;
            
            [transitionContext completeTransition:YES];
        }];
    }else if (self.type == TransitionTypePop){
        
        [transitionContext.containerView insertSubview:toView belowSubview:fromView];
        float scale = 0.7f;
        toView.transform = CGAffineTransformMakeScale(scale, scale);
        
        [UIView animateWithDuration:_duration animations:^{
            
            fromView.transform = CGAffineTransformConcat(CGAffineTransformMakeTranslation(toView.bounds.size.width*(1+1/scale)/2, 0), CGAffineTransformMakeScale(scale, scale));
            
            toView.transform = CGAffineTransformIdentity;
        } completion:^(BOOL finished) {
            [fromView removeFromSuperview];
            
            [transitionContext completeTransition:YES];
        }];
    }
}
複製程式碼

push時的效果是進來的view,即toView從右邊緣一邊進來一邊放大,直到鋪滿螢幕;退出的view,即fromView,逐漸縮小。合在一起有一種滾筒的感覺。pop時就是反操作。

除了動畫內容之外,值得注意的是:

  • 第一個方法提供的時間用來做轉場時的其他變化,如push時系統導航欄的動畫,而且在這期間互動式禁止的。所以這個時間跟下面我們提供的動畫時間要一樣。
  • toView需要我們自己加到containerView
  • 不管動畫是否執行成功,一定要呼叫[transitionContext completeTransition:],這個標識這一次的VC切換結束了,否則後面的push、pop等都沒效果。

相關文章