圖層時(shí)間

時(shí)間和空間最大的區(qū)別在于，時(shí)間不能被復(fù)用 -- 弗斯特梅里克

在上面兩章中，我們探討了可以用CAAnimation和它的子類實(shí)現(xiàn)的多種圖層動(dòng)畫。動(dòng)畫的發(fā)生是需要持續(xù)一段時(shí)間的，所以計(jì)時(shí)對整個(gè)概念來說至關(guān)重要。在這一章中，我們來看看CAMediaTiming，看看Core Animation是如何跟蹤時(shí)間的。

CAMediaTiming協(xié)議

CAMediaTiming協(xié)議定義了在一段動(dòng)畫內(nèi)用來控制逝去時(shí)間的屬性的集合，CALayer和CAAnimation都實(shí)現(xiàn)了這個(gè)協(xié)議，所以時(shí)間可以被任意基于一個(gè)圖層或者一段動(dòng)畫的類控制。

持續(xù)和重復(fù)

我們在第八章“顯式動(dòng)畫”中簡單提到過duration（CAMediaTiming的屬性之一），duration是一個(gè)CFTimeInterval的類型（類似于NSTimeInterval的一種雙精度浮點(diǎn)類型），對將要進(jìn)行的動(dòng)畫的一次迭代指定了時(shí)間。

這里的一次迭代是什么意思呢？CAMediaTiming另外還有一個(gè)屬性叫做repeatCount，代表動(dòng)畫重復(fù)的迭代次數(shù)。如果duration是2，repeatCount設(shè)為3.5（三個(gè)半迭代），那么完整的動(dòng)畫時(shí)長將是7秒。

duration和repeatCount默認(rèn)都是0。但這不意味著動(dòng)畫時(shí)長為0秒，或者0次，這里的0僅僅代表了“默認(rèn)”，也就是0.25秒和1次，你可以用一個(gè)簡單的測試來嘗試為這兩個(gè)屬性賦多個(gè)值，如清單9.1，圖9.1展示了程序的結(jié)果。

清單9.1 測試duration和repeatCount

@interface ViewController ()

@property (nonatomic, weak) IBOutlet UIView *containerView;
@property (nonatomic, weak) IBOutlet UITextField *durationField;
@property (nonatomic, weak) IBOutlet UITextField *repeatField;
@property (nonatomic, weak) IBOutlet UIButton *startButton;
@property (nonatomic, strong) CALayer *shipLayer;

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    //add the ship
    self.shipLayer = [CALayer layer];
    self.shipLayer.frame = CGRectMake(0, 0, 128, 128);
    self.shipLayer.position = CGPointMake(150, 150);
    self.shipLayer.contents = (__bridge id)[UIImage imageNamed: @"Ship.png"].CGImage;
    [self.containerView.layer addSublayer:self.shipLayer];
}

- (void)setControlsEnabled:(BOOL)enabled
{
    for (UIControl *control in @[self.durationField, self.repeatField, self.startButton]) {
        control.enabled = enabled;
        control.alpha = enabled? 1.0f: 0.25f;
    }
}

- (IBAction)hideKeyboard
{
    ?[self.durationField resignFirstResponder];
    [self.repeatField resignFirstResponder];
}

- (IBAction)start
{
    CFTimeInterval duration = [self.durationField.text doubleValue];
    float repeatCount = [self.repeatField.text floatValue];
    //animate the ship rotation
    CABasicAnimation *animation = [CABasicAnimation animation];
    animation.keyPath = @"transform.rotation";
    animation.duration = duration;
    animation.repeatCount = repeatCount;
    animation.byValue = @(M_PI * 2);
    animation.delegate = self;
    [self.shipLayer addAnimation:animation forKey:@"rotateAnimation"];
    //disable controls
    [self setControlsEnabled:NO];
}

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
    //reenable controls
    [self setControlsEnabled:YES];
}

@end

圖9.1 演示duration和repeatCount的測試程序

創(chuàng)建重復(fù)動(dòng)畫的另一種方式是使用repeatDuration屬性，它讓動(dòng)畫重復(fù)一個(gè)指定的時(shí)間，而不是指定次數(shù)。你甚至設(shè)置一個(gè)叫做autoreverses的屬性（BOOL類型）在每次間隔交替循環(huán)過程中自動(dòng)回放。這對于播放一段連續(xù)非循環(huán)的動(dòng)畫很有用，例如打開一扇門，然后關(guān)上它（圖9.2）。

圖9.2 擺動(dòng)門的動(dòng)畫

對門進(jìn)行擺動(dòng)的代碼見清單9.2。我們用了autoreverses來使門在打開后自動(dòng)關(guān)閉，在這里我們把repeatDuration設(shè)置為INFINITY，于是動(dòng)畫無限循環(huán)播放，設(shè)置repeatCount為INFINITY也有同樣的效果。注意repeatCount和repeatDuration可能會(huì)相互沖突，所以你只要對其中一個(gè)指定非零值。對兩個(gè)屬性都設(shè)置非0值的行為沒有被定義。

清單9.2 使用autoreverses屬性實(shí)現(xiàn)門的搖擺

@interface ViewController ()

@property (nonatomic, weak) UIView *containerView;

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    //add the door
    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: @"Door.png"].CGImage;
    [self.containerView.layer addSublayer:doorLayer];
    //apply perspective transform
    CATransform3D perspective = CATransform3DIdentity;
    perspective.m34 = -1.0 / 500.0;
    self.containerView.layer.sublayerTransform = perspective;
    //apply swinging animation
    CABasicAnimation *animation = [CABasicAnimation animation];
    animation.keyPath = @"transform.rotation.y";
    animation.toValue = @(-M_PI_2);
    animation.duration = 2.0;
    animation.repeatDuration = INFINITY;
    animation.autoreverses = YES;
    [doorLayer addAnimation:animation forKey:nil];
}

@end

相對時(shí)間

每次討論到Core Animation，時(shí)間都是相對的，每個(gè)動(dòng)畫都有它自己描述的時(shí)間，可以獨(dú)立地加速，延時(shí)或者偏移。

beginTime指定了動(dòng)畫開始之前的的延遲時(shí)間。這里的延遲從動(dòng)畫添加到可見圖層的那一刻開始測量，默認(rèn)是0（就是說動(dòng)畫會(huì)立刻執(zhí)行）。

speed是一個(gè)時(shí)間的倍數(shù)，默認(rèn)1.0，減少它會(huì)減慢圖層/動(dòng)畫的時(shí)間，增加它會(huì)加快速度。如果2.0的速度，那么對于一個(gè)duration為1的動(dòng)畫，實(shí)際上在0.5秒的時(shí)候就已經(jīng)完成了。

timeOffset和beginTime類似，但是和增加beginTime導(dǎo)致的延遲動(dòng)畫不同，增加timeOffset只是讓動(dòng)畫快進(jìn)到某一點(diǎn)，例如，對于一個(gè)持續(xù)1秒的動(dòng)畫來說，設(shè)置timeOffset為0.5意味著動(dòng)畫將從一半的地方開始。

和beginTime不同的是，timeOffset并不受speed的影響。所以如果你把speed設(shè)為2.0，把timeOffset設(shè)置為0.5，那么你的動(dòng)畫將從動(dòng)畫最后結(jié)束的地方開始，因?yàn)?秒的動(dòng)畫實(shí)際上被縮短到了0.5秒。然而即使使用了timeOffset讓動(dòng)畫從結(jié)束的地方開始，它仍然播放了一個(gè)完整的時(shí)長，這個(gè)動(dòng)畫僅僅是循環(huán)了一圈，然后從頭開始播放。

可以用清單9.3的測試程序驗(yàn)證一下，設(shè)置speed和timeOffset滑塊到隨意的值，然后點(diǎn)擊播放來觀察效果（見圖9.3）

清單9.3 測試timeOffset和speed屬性

@interface ViewController ()

@property (nonatomic, weak) IBOutlet UIView *containerView;
@property (nonatomic, weak) IBOutlet UILabel *speedLabel;
@property (nonatomic, weak) IBOutlet UILabel *timeOffsetLabel;
@property (nonatomic, weak) IBOutlet UISlider *speedSlider;
@property (nonatomic, weak) IBOutlet UISlider *timeOffsetSlider;
@property (nonatomic, strong) UIBezierPath *bezierPath;
@property (nonatomic, strong) CALayer *shipLayer;

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    //create a path
    self.bezierPath = [[UIBezierPath alloc] init];
    [self.bezierPath moveToPoint:CGPointMake(0, 150)];
    [self.bezierPath addCurveToPoint:CGPointMake(300, 150) controlPoint1:CGPointMake(75, 0) controlPoint2:CGPointMake(225, 300)];
    //draw the path using a CAShapeLayer
    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];
    //add the ship
    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.png"].CGImage;
    [self.containerView.layer addSublayer:self.shipLayer];
    //set initial values
    [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
{
    //create the keyframe animation
    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 = NO;
    [self.shipLayer addAnimation:animation forKey:@"slide"];
}

@end

圖9.3 測試時(shí)間偏移和速度的簡單的應(yīng)用程序

fillMode

對于beginTime非0的一段動(dòng)畫來說，會(huì)出現(xiàn)一個(gè)當(dāng)動(dòng)畫添加到圖層上但什么也沒發(fā)生的狀態(tài)。類似的，removeOnCompletion被設(shè)置為NO的動(dòng)畫將會(huì)在動(dòng)畫結(jié)束的時(shí)候仍然保持之前的狀態(tài)。這就產(chǎn)生了一個(gè)問題，當(dāng)動(dòng)畫開始之前和動(dòng)畫結(jié)束之后，被設(shè)置動(dòng)畫的屬性將會(huì)是什么值呢？

一種可能是屬性和動(dòng)畫沒被添加之前保持一致，也就是在模型圖層定義的值（見第七章“隱式動(dòng)畫”，模型圖層和呈現(xiàn)圖層的解釋）。

另一種可能是保持動(dòng)畫開始之前那一幀，或者動(dòng)畫結(jié)束之后的那一幀。這就是所謂的填充，因?yàn)閯?dòng)畫開始和結(jié)束的值用來填充開始之前和結(jié)束之后的時(shí)間。

這種行為就交給開發(fā)者了，它可以被CAMediaTiming的fillMode來控制。fillMode是一個(gè)NSString類型，可以接受如下四種常量：

kCAFillModeForwards 
kCAFillModeBackwards 
kCAFillModeBoth 
kCAFillModeRemoved

默認(rèn)是kCAFillModeRemoved，當(dāng)動(dòng)畫不再播放的時(shí)候就顯示圖層模型指定的值剩下的三種類型向前，向后或者即向前又向后去填充動(dòng)畫狀態(tài)，使得動(dòng)畫在開始前或者結(jié)束后仍然保持開始和結(jié)束那一刻的值。

這就對避免在動(dòng)畫結(jié)束的時(shí)候急速返回提供另一種方案（見第八章）。但是記住了，當(dāng)用它來解決這個(gè)問題的時(shí)候，需要把removeOnCompletion設(shè)置為NO，另外需要給動(dòng)畫添加一個(gè)非空的鍵，于是可以在不需要?jiǎng)赢嫷臅r(shí)候把它從圖層上移除。

層級關(guān)系時(shí)間

在第三章“圖層幾何學(xué)”中，你已經(jīng)了解到每個(gè)圖層是如何相對在圖層樹中的父圖層定義它的坐標(biāo)系的。動(dòng)畫時(shí)間和它類似，每個(gè)動(dòng)畫和圖層在時(shí)間上都有它自己的層級概念，相對于它的父親來測量。對圖層調(diào)整時(shí)間將會(huì)影響到它本身和子圖層的動(dòng)畫，但不會(huì)影響到父圖層。另一個(gè)相似點(diǎn)是所有的動(dòng)畫都被按照層級組合（使用CAAnimationGroup實(shí)例）。

對CALayer或者CAGroupAnimation調(diào)整duration和repeatCount/repeatDuration屬性并不會(huì)影響到子動(dòng)畫。但是beginTime，timeOffset和speed屬性將會(huì)影響到子動(dòng)畫。然而在層級關(guān)系中，beginTime指定了父圖層開始動(dòng)畫（或者組合關(guān)系中的父動(dòng)畫）和對象將要開始自己動(dòng)畫之間的偏移。類似的，調(diào)整CALayer和CAGroupAnimation的speed屬性將會(huì)對動(dòng)畫以及子動(dòng)畫速度應(yīng)用一個(gè)縮放的因子。

全局時(shí)間和本地時(shí)間

CoreAnimation有一個(gè)全局時(shí)間的概念，也就是所謂的馬赫時(shí)間（“馬赫”實(shí)際上是iOS和Mac OS系統(tǒng)內(nèi)核的命名）。馬赫時(shí)間在設(shè)備上所有進(jìn)程都是全局的--但是在不同設(shè)備上并不是全局的--不過這已經(jīng)足夠?qū)?dòng)畫的參考點(diǎn)提供便利了，你可以使用CACurrentMediaTime函數(shù)來訪問馬赫時(shí)間：

CFTimeInterval time = CACurrentMediaTime();

這個(gè)函數(shù)返回的值其實(shí)無關(guān)緊要（它返回了設(shè)備自從上次啟動(dòng)后的秒數(shù)，并不是你所關(guān)心的），它真實(shí)的作用在于對動(dòng)畫的時(shí)間測量提供了一個(gè)相對值。注意當(dāng)設(shè)備休眠的時(shí)候馬赫時(shí)間會(huì)暫停，也就是所有的CAAnimations（基于馬赫時(shí)間）同樣也會(huì)暫停。

因此馬赫時(shí)間對長時(shí)間測量并不有用。比如用CACurrentMediaTime去更新一個(gè)實(shí)時(shí)鬧鐘并不明智。（可以用[NSDate date]代替，就像第三章例子所示）。

每個(gè)CALayer和CAAnimation實(shí)例都有自己本地時(shí)間的概念，是根據(jù)父圖層/動(dòng)畫層級關(guān)系中的beginTime，timeOffset和speed屬性計(jì)算。就和轉(zhuǎn)換不同圖層之間坐標(biāo)關(guān)系一樣，CALayer同樣也提供了方法來轉(zhuǎn)換不同圖層之間的本地時(shí)間。如下：

- (CFTimeInterval)convertTime:(CFTimeInterval)t fromLayer:(CALayer *)l; 
- (CFTimeInterval)convertTime:(CFTimeInterval)t toLayer:(CALayer *)l;

當(dāng)用來同步不同圖層之間有不同的speed，timeOffset和beginTime的動(dòng)畫，這些方法會(huì)很有用。

暫停，倒回和快進(jìn)

設(shè)置動(dòng)畫的speed屬性為0可以暫停動(dòng)畫，但在動(dòng)畫被添加到圖層之后不太可能再修改它了，所以不能對正在進(jìn)行的動(dòng)畫使用這個(gè)屬性。給圖層添加一個(gè)CAAnimation實(shí)際上是給動(dòng)畫對象做了一個(gè)不可改變的拷貝，所以對原始動(dòng)畫對象屬性的改變對真實(shí)的動(dòng)畫并沒有作用。相反，直接用-animationForKey:來檢索圖層正在進(jìn)行的動(dòng)畫可以返回正確的動(dòng)畫對象，但是修改它的屬性將會(huì)拋出異常。

如果移除圖層正在進(jìn)行的動(dòng)畫，圖層將會(huì)急速返回動(dòng)畫之前的狀態(tài)。但如果在動(dòng)畫移除之前拷貝呈現(xiàn)圖層到模型圖層，動(dòng)畫將會(huì)看起來暫停在那里。但是不好的地方在于之后就不能再恢復(fù)動(dòng)畫了。

一個(gè)簡單的方法是可以利用CAMediaTiming來暫停圖層本身。如果把圖層的speed設(shè)置成0，它會(huì)暫停任何添加到圖層上的動(dòng)畫。類似的，設(shè)置speed大于1.0將會(huì)快進(jìn)，設(shè)置成一個(gè)負(fù)值將會(huì)倒回動(dòng)畫。

通過增加主窗口圖層的speed，可以暫停整個(gè)應(yīng)用程序的動(dòng)畫。這對UI自動(dòng)化提供了好處，我們可以加速所有的視圖動(dòng)畫來進(jìn)行自動(dòng)化測試（注意對于在主窗口之外的視圖并不會(huì)被影響，比如UIAlertview）?？梢栽赼pp delegate設(shè)置如下進(jìn)行驗(yàn)證：

self.window.layer.speed = 100;

你也可以通過這種方式來減速，但其實(shí)也可以在模擬器通過切換慢速動(dòng)畫來實(shí)現(xiàn)。

手動(dòng)動(dòng)畫

timeOffset一個(gè)很有用的功能在于你可以它可以讓你手動(dòng)控制動(dòng)畫進(jìn)程，通過設(shè)置speed為0，可以禁用動(dòng)畫的自動(dòng)播放，然后來使用timeOffset來來回顯示動(dòng)畫序列。這可以使得運(yùn)用手勢來手動(dòng)控制動(dòng)畫變得很簡單。

舉個(gè)簡單的例子：還是之前關(guān)門的動(dòng)畫，修改代碼來用手勢控制動(dòng)畫。我們給視圖添加一個(gè)UIPanGestureRecognizer，然后用timeOffset左右搖晃。

因?yàn)樵趧?dòng)畫添加到圖層之后不能再做修改了，我們來通過調(diào)整layer的timeOffset達(dá)到同樣的效果（清單9.4）。

清單9.4 通過觸摸手勢手動(dòng)控制動(dòng)畫

@interface ViewController ()

@property (nonatomic, weak) UIView *containerView;
@property (nonatomic, strong) CALayer *doorLayer;

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    //add the door
    self.doorLayer = [CALayer layer];
    self.doorLayer.frame = CGRectMake(0, 0, 128, 256);
    self.doorLayer.position = CGPointMake(150 - 64, 150);
    self.doorLayer.anchorPoint = CGPointMake(0, 0.5);
    self.doorLayer.contents = (__bridge id)[UIImage imageNamed:@"Door.png"].CGImage;
    [self.containerView.layer addSublayer:self.doorLayer];
    //apply perspective transform
    CATransform3D perspective = CATransform3DIdentity;
    perspective.m34 = -1.0 / 500.0;
    self.containerView.layer.sublayerTransform = perspective;
    //add pan gesture recognizer to handle swipes
    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] init];
    [pan addTarget:self action:@selector(pan:)];
    [self.view addGestureRecognizer:pan];
    //pause all layer animations
    self.doorLayer.speed = 0.0;
    //apply swinging animation (which won't play because layer is paused)
    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
{
    //get horizontal component of pan gesture
    CGFloat x = [pan translationInView:self.view].x;
    //convert from points to animation duration //using a reasonable scale factor
    x /= 200.0f;
    //update timeOffset and clamp result
    CFTimeInterval timeOffset = self.doorLayer.timeOffset;
    timeOffset = MIN(0.999, MAX(0.0, timeOffset - x));
    self.doorLayer.timeOffset = timeOffset;
    //reset pan gesture
    [pan setTranslation:CGPointZero inView:self.view];
}

@end

這其實(shí)是個(gè)小詭計(jì)，也許相對于設(shè)置個(gè)動(dòng)畫然后每次顯示一幀而言，用移動(dòng)手勢來直接設(shè)置門的transform會(huì)更簡單。

在這個(gè)例子中的確是這樣，但是對于比如說關(guān)鍵這這樣更加復(fù)雜的情況，或者有多個(gè)圖層的動(dòng)畫組，相對于實(shí)時(shí)計(jì)算每個(gè)圖層的屬性而言，這就顯得方便的多了。

總結(jié)

在這一章，我們了解了CAMediaTiming協(xié)議，以及Core Animation用來操作時(shí)間控制動(dòng)畫的機(jī)制。在下一章，我們將要接觸緩沖，另一個(gè)用來使動(dòng)畫更加真實(shí)的操作時(shí)間的技術(shù)。