背景
動畫由CoreAnimation
框架作為基礎支援,理解動畫之前要先理解CALayer
這個東西的扮演的角色,瞭解它是負責呈現視覺內容的東西,它有3個圖層樹,還有知道CATransaction
負責對layer的修改的捕獲和提交。
除了系統實現層面的東西,還是通用意義上的動畫。動畫就是動起來的畫面,畫面不斷變換產生變化效果。並不是真的有一個東西在動,一切都只是對大腦的欺騙。認識到這個,就知道動畫需要:一系列的畫面,這些畫面之間具有相關性。
所以對於動畫系統而言,它需要:(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];
}
複製程式碼
互動式動畫
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等都沒效果。