在上面兩章中，我們探討了可以用 CAAnimation和它的子類實(shí)現(xiàn)的多種圖層動(dòng)畫(huà)。動(dòng)畫(huà)的發(fā)生是需要持續(xù)一段時(shí)間的跷敬，所以計(jì)時(shí)對(duì)整個(gè)概念來(lái)說(shuō)至關(guān)重要盆偿。在這 一章中柒爸，我們來(lái)看看CAMediaTiming，看看Core Animation是如何跟蹤時(shí)間的事扭。
CAMediaTiming 協(xié)議
CAMediaTiming協(xié)議定義了在一段動(dòng)畫(huà)內(nèi)用來(lái)控制逝去時(shí)間的屬性的集合捎稚，CALayer 和CAAnimation 都實(shí)現(xiàn)了這個(gè)協(xié)議，所以時(shí)間可以被任意基于一 個(gè)圖層或者一段動(dòng)畫(huà)的類控制求橄。
持續(xù)和重復(fù)
我們?cè)诘诎苏隆帮@式動(dòng)畫(huà)”中簡(jiǎn)單提到過(guò) duration( CAMediaTiming的屬性之 一)今野， duration 是一個(gè) CFTimeInterval的類型(類似于NSTimeInterval 一種雙精度浮點(diǎn)類型)，對(duì)將要進(jìn)行的動(dòng)畫(huà)的一次迭代指定了時(shí)間罐农。
這里的一次迭代是什么意思呢? CAMediaTiming 另外還有一個(gè)屬性叫做repeatCount条霜，代表動(dòng)畫(huà)重復(fù)的迭代次數(shù)。如果 duration 是2啃匿， 設(shè)為3.5(三個(gè)半迭代)蛔外，那么完整的動(dòng)畫(huà)時(shí)長(zhǎng)將是7秒蛆楞。
duration 和 repeatCount 默認(rèn)都是0。但這不意味著動(dòng)畫(huà)時(shí)長(zhǎng)為0秒夹厌，或者0次豹爹，這里的0僅僅代表了“默認(rèn)”，也就是0.25秒和1次矛纹，你可以用一個(gè)簡(jiǎn)單的測(cè)試來(lái) 嘗試為這兩個(gè)屬性賦多個(gè)值臂聋。
我們用了autoreverses 來(lái)使門(mén)在打開(kāi)后自動(dòng)關(guān) 閉，在這里我們把repeatDuration設(shè)置為INFINITY 或南，于是動(dòng)畫(huà)無(wú)限循環(huán)播放孩等，設(shè)置 repeatCount 為INFINITY也有同樣的效果。注
意repeatCount和repeatDuration 可能會(huì)相互沖突采够，所以你只要對(duì)其中一個(gè) 指定非零值肄方。對(duì)兩個(gè)屬性都設(shè)置非0值的行為沒(méi)有被定義。
- (void)viewDidLoad {
[super viewDidLoad];
CALayer *doorLayer = [CALayer layer];
doorLayer.frame = CGRectMake(0, 0, 128, 256);
doorLayer.position = CGPointMake(150 - 64, 150);
doorLayer.anchorPoint = CGPointMake(0, 0.5);
doorLayer.contents = (__bridge id)[UIImage imageNamed:@"Spaceship"].CGImage;
[self.containerView.layer addSublayer:doorLayer];
CATransform3D perspective = CATransform3DIdentity;
perspective.m34 = -1.0 / 500.0;
self.containerView.layer.sublayerTransform = perspective;
CABasicAnimation *animation = [CABasicAnimation animation];
animation.keyPath = @"transform.rotation.y";
animation.toValue = @(-M_PI_2);
animation.duration = 2.0;
animation.repeatCount = INFINITY;
animation.autoreverses = true;
[doorLayer addAnimation:animation forKey:nil];
}
相對(duì)時(shí)間
每次討論到Core Animation蹬癌，時(shí)間都是相對(duì)的权她，每個(gè)動(dòng)畫(huà)都有它自己描述的時(shí)間， 可以獨(dú)立地加速逝薪，延時(shí)或者偏移隅要。
beginTime 指定了動(dòng)畫(huà)開(kāi)始之前的的延遲時(shí)間。這里的延遲從動(dòng)畫(huà)添加到可見(jiàn)圖 層的那一刻開(kāi)始測(cè)量董济，默認(rèn)是0(就是說(shuō)動(dòng)畫(huà)會(huì)立刻執(zhí)行)步清。
speed 是一個(gè)時(shí)間的倍數(shù)，默認(rèn)1.0虏肾，減少它會(huì)減慢圖層/動(dòng)畫(huà)的時(shí)間廓啊，增加它會(huì)加快速度。如果2.0的速度询微，那么對(duì)于一個(gè) duration 為1的動(dòng)畫(huà)崖瞭，實(shí)際上在0.5秒 的時(shí)候就已經(jīng)完成了。
timeOffset 和 beginTime 類似撑毛，但是和增加beginTime導(dǎo)致的延遲動(dòng)畫(huà)不同书聚，增加timeOffset只是讓動(dòng)畫(huà)快進(jìn)到某一點(diǎn)，例如藻雌，對(duì)于一個(gè)持續(xù)1秒的動(dòng)畫(huà)來(lái)說(shuō),設(shè)置timeOffset為0.5意味著動(dòng)畫(huà)將從一半的地方開(kāi)始雌续。
和beginTime不同的是,timeOffSet并不受speed的影響,所以如果你把speed設(shè)為2.0，把 timeOffset設(shè)置為0.5胯杭，那么你的動(dòng)畫(huà)將從動(dòng)畫(huà)最后結(jié)束的地方開(kāi)始驯杜，因?yàn)?code>1秒的動(dòng)畫(huà)實(shí)際上被縮短到了0.5秒。然而即使使用了 timeOffset讓動(dòng)畫(huà)從結(jié)束的地方開(kāi)始做个，它仍然播放了一個(gè)完整的時(shí)長(zhǎng)鸽心，這個(gè) 動(dòng)畫(huà)僅僅是循環(huán)了一圈滚局，然后從頭開(kāi)始播放。
設(shè)置speed 和 timeOffset滑塊到隨意的 值顽频，然后點(diǎn)擊播放來(lái)觀察效果
#import "ViewController.h"
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIView *containerView;
@property (weak, nonatomic) IBOutlet UILabel *speedLabel;
@property (weak, nonatomic) IBOutlet UILabel *timeOffsetLabel;
@property (weak, nonatomic) IBOutlet UISlider *speedSlider;
@property (weak, nonatomic) IBOutlet UISlider *timeOffsetSlider;
@property (nonatomic, strong) UIBezierPath *bezierPath;
@property (nonatomic, strong) CALayer *shipLayer;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.bezierPath = [[UIBezierPath alloc]init];
[self.bezierPath moveToPoint:CGPointMake(0, 150)];
[self.bezierPath addCurveToPoint:CGPointMake(300, 150) controlPoint1:CGPointMake(200, 200) controlPoint2:CGPointMake(150, 100)];
CAShapeLayer *pathLayer = [CAShapeLayer layer];
pathLayer.path = self.bezierPath.CGPath;
pathLayer.fillColor = [UIColor clearColor].CGColor;
pathLayer.strokeColor = [UIColor redColor].CGColor;
pathLayer.lineWidth = 3.0f;
[self.containerView.layer addSublayer:pathLayer];
self.shipLayer = [CALayer layer];
self.shipLayer.frame = CGRectMake(0, 0, 64, 64);
self.shipLayer.position = CGPointMake(0, 150);
self.shipLayer.contents = (__bridge id)[UIImage imageNamed:@"ship"].CGImage;
[self.containerView.layer addSublayer:self.shipLayer];
[self updateSliders];
}
- (IBAction)updateSliders{
CFTimeInterval timeOffset = self.timeOffsetSlider.value;
self.timeOffsetLabel.text = [NSString stringWithFormat:@"%0.2f",timeOffset];
float speed = self.speedSlider.value;
self.speedLabel.text = [NSString stringWithFormat:@"%0.2f",speed];
}
- (IBAction)play:(id)sender {
CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
animation.keyPath = @"position";
animation.timeOffset = self.timeOffsetSlider.value;
animation.speed = self.speedSlider.value;
animation.duration = 1.0;
animation.path = self.bezierPath.CGPath;
animation.rotationMode = kCAAnimationRotateAuto;
animation.removedOnCompletion = false;
[self.shipLayer addAnimation:animation forKey:@"slide"];
}
fillMode
對(duì)于 beginTime 非0的一段動(dòng)畫(huà)來(lái)說(shuō)藤肢，會(huì)出現(xiàn)一個(gè)當(dāng)動(dòng)畫(huà)添加到圖層上但什么也 沒(méi)發(fā)生的狀態(tài)。類似的糯景， removeOnCompletion 被設(shè)置為 NO 的動(dòng)畫(huà)將會(huì)在動(dòng)畫(huà) 結(jié)束的時(shí)候仍然保持之前的狀態(tài)嘁圈。這就產(chǎn)生了一個(gè)問(wèn)題，當(dāng)動(dòng)畫(huà)開(kāi)始之前和動(dòng)畫(huà)結(jié) 束之后蟀淮，被設(shè)置動(dòng)畫(huà)的屬性將會(huì)是什么值呢?
一種可能是屬性和動(dòng)畫(huà)沒(méi)被添加之前保持一致最住，也就是在模型圖層定義的值(見(jiàn)第 七章“隱式動(dòng)畫(huà)”，模型圖層和呈現(xiàn)圖層的解釋)怠惶。
另一種可能是保持動(dòng)畫(huà)開(kāi)始之前那一幀涨缚，或者動(dòng)畫(huà)結(jié)束之后的那一幀。這就是所謂的填充甚疟，因?yàn)閯?dòng)畫(huà)開(kāi)始和結(jié)束的值用來(lái)填充開(kāi)始之前和結(jié)束之后的時(shí)間仗岖。
這種行為就交給開(kāi)發(fā)者了，它可以被 CAMediaTiming 的 fillMode來(lái)控 制览妖。fillMode是一個(gè) NSString 類型，可以接受如下四種常量:
kCAFillModeForwards
kCAFillModeBackwards
kCAFillModeBoth
kCAFillModeRemoved
默認(rèn)是 kCAFillModeRemoved揽祥，當(dāng)動(dòng)畫(huà)不再播放的時(shí)候就顯示圖層模型指定的值 剩下的三種類型向前讽膏，向后或者即向前又向后去填充動(dòng)畫(huà)狀態(tài)，使得動(dòng)畫(huà)在開(kāi)始前 或者結(jié)束后仍然保持開(kāi)始和結(jié)束那一刻的值拄丰。
這就對(duì)避免在動(dòng)畫(huà)結(jié)束的時(shí)候急速返回提供另一種方案(見(jiàn)第八章)府树。但是記住了，當(dāng)用它來(lái)解決這個(gè)問(wèn)題的時(shí)候料按，需要把 removeOnCompletion設(shè)置為 NO 奄侠， 另外需要給動(dòng)畫(huà)添加一個(gè)非空的鍵，于是可以在不需要?jiǎng)赢?huà)的時(shí)候把它從圖層上移除载矿。
層級(jí)關(guān)系時(shí)間
在第三章“圖層幾何學(xué)”中垄潮，你已經(jīng)了解到每個(gè)圖層是如何相對(duì)在圖層樹(shù)中的父圖層 定義它的坐標(biāo)系的。動(dòng)畫(huà)時(shí)間和它類似闷盔，每個(gè)動(dòng)畫(huà)和圖層在時(shí)間上都有它自己的層 級(jí)概念弯洗，相對(duì)于它的父親來(lái)測(cè)量。對(duì)圖層調(diào)整時(shí)間將會(huì)影響到它本身和子圖層的動(dòng)畫(huà)逢勾，但不會(huì)影響到父圖層牡整。另一個(gè)相似點(diǎn)是所有的動(dòng)畫(huà)都被按照層級(jí)組合(使用 CAAnimationGroup實(shí)例)。
對(duì)CALayer或者CAGroupAnimation 調(diào) 整duration和repeatCount / repeatDuration屬性并不會(huì)影響到子動(dòng)畫(huà)导匣。但是beginTime, timeOffset 和speed 屬性將會(huì)影響到子動(dòng)畫(huà)捞高。然而在層級(jí)關(guān)系中， beginTime指定了父圖層開(kāi)始動(dòng)畫(huà)(或者組合關(guān)系中的父動(dòng)畫(huà))和對(duì)象將要開(kāi)始自己動(dòng)畫(huà)之間的偏移劝枣。類似的沐扳，調(diào)整CALayer和CAGroupAnimation 的 speed屬性將會(huì)對(duì)動(dòng)畫(huà)以及子動(dòng)畫(huà)速度應(yīng) 用一個(gè)縮放的因子泥从。
全局時(shí)間和本地時(shí)間
CoreAnimation有一個(gè)全局時(shí)間的概念，也就是所謂的馬赫時(shí)間(“馬赫”實(shí)際上是 iOS和Mac OS系統(tǒng)內(nèi)核的命名)迫皱。馬赫時(shí)間在設(shè)備上所有進(jìn)程都是全局的--但是在不同設(shè)備上并不是全局的--不過(guò)這已經(jīng)足夠?qū)?dòng)畫(huà)的參考點(diǎn)提供便利了歉闰，你可以使 用CACurrentMediaTime函數(shù)來(lái)訪問(wèn)馬赫時(shí)間:
CFTimeInterval time = CACurrentMediaTime();
這個(gè)函數(shù)返回的值其實(shí)無(wú)關(guān)緊要(它返回了設(shè)備自從上次啟動(dòng)后的秒數(shù)，并不是你所關(guān)心的)卓起，它真實(shí)的作用在于對(duì)動(dòng)畫(huà)的時(shí)間測(cè)量提供了一個(gè)相對(duì)值和敬。注意當(dāng)設(shè)備 休眠的時(shí)候馬赫時(shí)間會(huì)暫停，也就是所有的CAAnimations(基于馬赫時(shí)間)同 樣也會(huì)暫停戏阅。
因此馬赫時(shí)間對(duì)長(zhǎng)時(shí)間測(cè)量并不有用昼弟。比如用CACurrentMediaTime去更新一個(gè)實(shí)時(shí)鬧鐘并不明智。(可以用[NSDate date]代替奕筐，就像第三章例子所示)舱痘。
每個(gè)CALayer 和CAAnimation實(shí)例都有自己本地時(shí)間的概念，是根據(jù)父圖層/動(dòng)畫(huà)層級(jí)關(guān)系中的
beginTime, timeOffset和speed屬性計(jì)算.就和轉(zhuǎn)換不同圖層之間坐標(biāo)關(guān)系一樣离赫， 同樣也提供了方法來(lái)轉(zhuǎn)換不同圖層之間的本地 時(shí)間芭逝。如下:
- (CFTimeInterval)convertTime:(CFTimeInterval)t toLayer:(nullable CALayer *)l;
- (CFTimeInterval)convertTime:(CFTimeInterval)t fromLayer:(nullable CALayer *)l;
當(dāng)用來(lái)同步不同圖層之間有不同的 speed， timeOffset 和 beginTime 的動(dòng) 畫(huà)渊胸，這些方法會(huì)很有用旬盯。
暫停，倒回和快進(jìn)
設(shè)置動(dòng)畫(huà)的 speed屬性為0可以暫停動(dòng)畫(huà)翎猛，但在動(dòng)畫(huà)被添加到圖層之后不太可能再 修改它了胖翰，所以不能對(duì)正在進(jìn)行的動(dòng)畫(huà)使用這個(gè)屬性。給圖層添加一個(gè) CAAnimation 實(shí)際上是給動(dòng)畫(huà)對(duì)象做了一個(gè)不可改變的拷貝切厘，所以對(duì)原始動(dòng)畫(huà) 對(duì)象屬性的改變對(duì)真實(shí)的動(dòng)畫(huà)并沒(méi)有作用萨咳。相反，直接用-animationForKey:來(lái)檢索圖層正在進(jìn)行的動(dòng)畫(huà)可以返回正確的動(dòng)畫(huà)對(duì)象疫稿，但是修改它的屬性將會(huì)拋出異 常培他。
如果移除圖層正在進(jìn)行的動(dòng)畫(huà)，圖層將會(huì)急速返回動(dòng)畫(huà)之前的狀態(tài)而克。但如果在動(dòng)畫(huà)移除之前拷貝呈現(xiàn)圖層到模型圖層靶壮，動(dòng)畫(huà)將會(huì)看起來(lái)暫停在那里。但是不好的地方在于之后就不能再恢復(fù)動(dòng)畫(huà)了员萍。
一個(gè)簡(jiǎn)單的方法是可以利用 CAMediaTiming來(lái)暫停圖層本身腾降。如果把圖層的 speed 設(shè)置成0，它會(huì)暫停任何添加到圖層上的動(dòng)畫(huà)碎绎。類似的螃壤，設(shè)置 speed 大 于1.0將會(huì)快進(jìn)抗果，設(shè)置成一個(gè)負(fù)值將會(huì)倒回動(dòng)畫(huà)。
通過(guò)增加主窗口圖層的 speed奸晴，可以暫停整個(gè)應(yīng)用程序的動(dòng)畫(huà)冤馏。這對(duì)UI自動(dòng)化提 供了好處，我們可以加速所有的視圖動(dòng)畫(huà)來(lái)進(jìn)行自動(dòng)化測(cè)試(注意對(duì)于在主窗口之 外的視圖并不會(huì)被影響寄啼，比如 UIAlertview)逮光。可以在app delegate設(shè)置如下進(jìn) 行驗(yàn)證:
self.window.layer.speed = 100;
你也可以通過(guò)這種方式來(lái)減速墩划，但其實(shí)也可以在模擬器通過(guò)切換慢速動(dòng)畫(huà)來(lái)實(shí)現(xiàn)涕刚。
手動(dòng)動(dòng)畫(huà)
timeOffset一個(gè)很有用的功能在于你可以它可以讓你手動(dòng)控制動(dòng)畫(huà)進(jìn)程，通過(guò)speed 設(shè)置為0乙帮，可以禁用動(dòng)畫(huà)的自動(dòng)播放杜漠，然后來(lái)使用timeOffset來(lái)來(lái)回顯 示動(dòng)畫(huà)序列。這可以使得運(yùn)用手勢(shì)來(lái)手動(dòng)控制動(dòng)畫(huà)變得很簡(jiǎn)單察净。
舉個(gè)簡(jiǎn)單的例子:還是之前關(guān)門(mén)的動(dòng)畫(huà)驾茴，修改代碼來(lái)用手勢(shì)控制動(dòng)畫(huà)。我們給視圖 添加一個(gè) UIPanGestureRecognizer 氢卡，然后用 timeOffset 左右搖晃锈至。
因?yàn)樵趧?dòng)畫(huà)添加到圖層之后不能再做修改了，我們來(lái)通過(guò)調(diào) 整layer的timeOffset 達(dá)到同樣的效果译秦。
#import "ViewController.h"
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIView *containerView;
@property (nonatomic, strong) CALayer *doorLayer;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.doorLayer = [CALayer layer];
self.doorLayer.frame = CGRectMake(0, 0, self.containerView.bounds.size.width, self.containerView.bounds.size.height);;
self.doorLayer.position = CGPointMake(0, self.containerView.bounds.size.height * 0.5);
self.doorLayer.anchorPoint = CGPointMake(0, 0.5);
self.doorLayer.contents = (__bridge id)[UIImage imageNamed:@"Spaceship"].CGImage;
[self.containerView.layer addSublayer:self.doorLayer];
CATransform3D perspective = CATransform3DIdentity;
perspective.m34 = -0.1 / 500.0;
self.containerView.layer.sublayerTransform = perspective;
UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(pan:)];
[self.view addGestureRecognizer:pan];
self.doorLayer.speed = 0.0;
CABasicAnimation *animation = [CABasicAnimation animation];
animation.keyPath = @"transform.rotation.y";
animation.toValue = @(-M_PI_2);
animation.duration = 1.0;
[self.doorLayer addAnimation:animation forKey:nil];
}
- (void)pan:(UIPanGestureRecognizer *)pan{
CGFloat x = [pan translationInView:self.view].x;
x /= 200.0f;
CFTimeInterval timeOffset = self.doorLayer.timeOffset;
timeOffset = MIN(0.999, MAX(0.0, timeOffset - x));
self.doorLayer.timeOffset = timeOffset;
[pan setTranslation:CGPointZero inView:self.view];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
這其實(shí)是個(gè)小詭計(jì)裹赴，也許相對(duì)于設(shè)置個(gè)動(dòng)畫(huà)然后每次顯示一幀而言，用移動(dòng)手勢(shì)來(lái) 直接設(shè)置門(mén)的 transform 會(huì)更簡(jiǎn)單诀浪。
總結(jié)
在這一章，我們了解了 CAMediaTiming協(xié)議延都，以及Core Animation用來(lái)操作時(shí)間 控制動(dòng)畫(huà)的機(jī)制雷猪。在下一章，我們將要接觸 緩沖 晰房，另一個(gè)用來(lái)使動(dòng)畫(huà)更加真實(shí)的 操作時(shí)間的技術(shù)求摇。
