在第九章“圖層時間”中邑狸，我們討論了動畫時間和 CAMediaTiming協(xié)議⌒概矗現(xiàn)在我們 來看一下另一個和時間相關(guān)的機制--所謂的緩沖。Core Animation使用緩沖來使動 畫移動更平滑更自然单雾，而不是看起來的那種機械和人工昂利，在這一章我們將要研究如 何對你的動畫控制和自定義緩沖曲線。
動畫速度
動畫實際上就是一段時間內(nèi)的變化铁坎，這就暗示了變化一定是隨著某個特定的速率進行。速率由以下公式計算而來:
velocity = change / time
這里的變化可以指的是一個物體移動的距離犁苏，時間指動畫持續(xù)的時長硬萍，用這樣的一 個移動可以更加形象的描述(比如 position 和bounds 屬性的動畫)，但實際 上它應(yīng)用于任意可以做動畫的屬性(比如 color和opacity)围详。
上面的等式假設(shè)了速度在整個動畫過程中都是恒定不變的(就如同第八章“顯式動 畫”的情況)朴乖，對于這種恒定速度的動畫我們稱之為“線性步調(diào)”，而且從技術(shù)的角度 而言這也是實現(xiàn)動畫最簡單的方式助赞，但也是完全不真實的一種效果买羞。
考慮一個場景，一輛車行駛在一定距離內(nèi)雹食，它并不會一開始就以60mph的速度行 駛畜普，然后到達終點后突然變成0mph。一是因為需要無限大的加速度(即使是最好 的車也不會在0秒內(nèi)從0跑到60)群叶，另外不然的話會干死所有乘客吃挑。在現(xiàn)實中，它會 慢慢地加速到全速街立，然后當它接近終點的時候舶衬，它會慢慢地減速，直到最后停下 來赎离。
那么對于一個掉落到地上的物體又會怎樣呢?它會首先停在空中逛犹，然后一直加速到落到地面，然后突然停止(然后由于積累的動能轉(zhuǎn)換伴隨著一聲巨響，砰!)虽画。
現(xiàn)實生活中的任何一個物體都會在運動中加速或者減速舞蔽。那么我們?nèi)绾卧趧赢嬛袑?現(xiàn)這種加速度呢?一種方法是使用物理引擎來對運動物體的摩擦和動量來建模，然 而這會使得計算過于復(fù)雜狸捕。我們稱這種類型的方程為緩沖函數(shù)喷鸽，幸運的是，Core Animation內(nèi)嵌了一系列標準函數(shù)提供給我們使用灸拍。
CAMediaTimingFunction
那么該如何使用緩沖方程式呢?首先需要設(shè)置 CAAnimation 的 timingFunction 屬性做祝，是 CAMediaTimingFunction 類的 一個對象。如果想改變隱式動畫的計時函數(shù)鸡岗，同樣也可以使
用 CATransaction的 +setAnimationTimingFunction:方法混槐。
這里有一些方式來創(chuàng)建CAMediaTimingFunction ，最簡單的方式是調(diào) 用+ timingFunctionWithName:的構(gòu)造方法轩性。這里傳入如下幾個常量之一:
kCAMediaTimingFunctionLinear
kCAMediaTimingFunctionEaseIn
kCAMediaTimingFunctionEaseOut
kCAMediaTimingFunctionEaseInEaseOut
kCAMediaTimingFunctionDefault
kCAMediaTimingFunctionLinear選項創(chuàng)建了一個線性的計時函數(shù)声登，同樣也是CAAnimation的timingFunction 屬性為空時候的默認函數(shù)。線性步調(diào)對于那些立即加速并且保持勻速到達終點的場景會有意義(例如射出槍膛的子彈)揣苏，但是默認來說它看起來很奇怪悯嗓，因為對大多數(shù)的動畫來說確實很少用到。
kCAMediaTimingFunctionEaseIn 常量創(chuàng)建了一個慢慢加速然后突然停止的方 法卸察。對于之前提到的自由落體的例子來說很適合脯厨，或者比如對準一個目標的導(dǎo)彈的 發(fā)射。
kCAMediaTimingFunctionEaseOut則恰恰相反坑质，它以一個全速開始合武，然后慢慢 減速停止。它有一個削弱的效果涡扼，應(yīng)用的場景比如一扇門慢慢地關(guān)上稼跳，而不是砰地 一聲。
kCAMediaTimingFunctionEaseInEaseOut 創(chuàng)建了一個慢慢加速然后再慢慢減速的過程吃沪。這是現(xiàn)實世界大多數(shù)物體移動的方式汤善，也是大多數(shù)動畫來說最好的選擇。 如果只可以用一種緩沖函數(shù)的話票彪，那就必須是它了萎津。那么你會疑惑為什么這不是默 認的選擇，實際上當使用 UIView的動畫方法時抹镊，他的確是默認的锉屈，但當創(chuàng)建CAAnimation的時候，就需要手動設(shè)置它了垮耳。
最后還有一個kCAMediaTimingFunctionDefault 颈渊，它和kCAMediaTimingFunctionEaseInEaseOut 很類似遂黍，但是加速和減速的過程都 稍微有些慢。它和 kCAMediaTimingFunctionEaseInEaseOut 的區(qū)別很難察覺俊嗽， 可能是蘋果覺得它對于隱式動畫來說更適合(然后對UIKit就改變了想法雾家，而是使 用 kCAMediaTimingFunctionEaseInEaseOut作為默認效果)，雖然它的名字說 是默認的绍豁，但還是要記住當創(chuàng)建顯式的CAAnimation 它并不是默認選項(換句話 說芯咧，默認的圖層行為動畫用kCAMediaTimingFunctionDefault 作為它們的計時方法)。
#import "ViewController.h"
@interface ViewController ()
@property (nonatomic, strong)CALayer *colorLayer;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.colorLayer = [CALayer layer];
self.colorLayer.frame = CGRectMake(0, 0, 100, 100);
self.colorLayer.position = CGPointMake(self.view.bounds.size.width * 0.5, self.view.bounds.size.height * 0.5);
self.colorLayer.backgroundColor = [UIColor redColor].CGColor;
[self.view.layer addSublayer:self.colorLayer];
}
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
[CATransaction begin];
[CATransaction setAnimationDuration:1.0];
[CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:@"easeInEaseOut"]];
self.colorLayer.position = [[touches anyObject] locationInView:self.view];
[CATransaction commit];
}
@end
UIView 的動畫緩沖
UIKit的動畫也同樣支持這些緩沖方法的使用竹揍，盡管語法和常量有些不同敬飒，為了改
變 UIView動畫的緩沖選項，給 options參數(shù)添加如下常量之一:
UIViewAnimationOptionCurveEaseInOut
UIViewAnimationOptionCurveEaseIn
UIViewAnimationOptionCurveEaseOut
UIViewAnimationOptionCurveLinear
它們和 CAMediaTimingFunction 緊密關(guān)聯(lián)芬位，UIViewAnimationOptionCurveEaseInOut 是默認值(這里沒 有kCAMediaTimingFunctionDefault相對應(yīng)的值了)无拗。
使用UIKit動畫的緩沖測試工程
#import "ViewController.h"
@interface ViewController ()
@property (nonatomic, strong)UIView *colorView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.colorView = [[UIView alloc]init];
self.colorView.bounds = CGRectMake(0, 0, 100, 100);
self.colorView.center = self.view.center;
self.colorView.backgroundColor = [UIColor redColor];
[self.view addSubview:self.colorView];
}
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
[UIView animateWithDuration:1.0 delay:0.0 options:UIViewAnimationOptionCurveEaseOut animations:^{
self.colorView.center = [[touches anyObject] locationInView:self.view];
} completion:nil];
}
@end
緩沖和關(guān)鍵幀動畫
或許你會回想起第八章里面顏色切換的關(guān)鍵幀動畫由于線性變換的原因看起來有些奇怪，使得顏色變換非常不自然四康。為了糾正這點箭养，我們來用更加合 適的緩沖方法喝检，例如 kCAMediaTimingFunctionEaseIn挠说，給圖層的顏色變化添加 一點脈沖效果损俭，讓它更像現(xiàn)實中的一個彩色燈泡雁仲。
我們不想給整個動畫過程應(yīng)用這個效果琐脏，我們希望對每個動畫的過程重復(fù)這樣的緩
沖，于是每次顏色的變換都會有脈沖效果惰蜜。
CAKeyframeAnimation有一個 NSArray類型的 timingFunctions屬性抛猖，我們可以用它來對每次動畫的步驟指定不同的計時函數(shù)鼻听。但是指定函數(shù)的個數(shù)一定要等于keyframes數(shù)組的元素個數(shù)減一瓢宦，因為它是描述每一幀之間動畫速度的函數(shù)驮履。
#import "ViewController.h"
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIView *colorView;
@property (nonatomic, strong)CALayer *colorLayer;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.colorLayer = [CALayer layer];
self.colorLayer.frame = CGRectMake(0, 0, self.colorView.bounds.size.width, self.colorView.bounds.size.height);
self.colorLayer.backgroundColor = [UIColor blueColor].CGColor;
[self.colorView.layer addSublayer:self.colorLayer];
}
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
CAKeyframeAnimation *keyAnimation = [CAKeyframeAnimation animation];
keyAnimation.keyPath = @"backgroundColor";
keyAnimation.duration = 2.0;
keyAnimation.values = @[
(__bridge id) [UIColor blueColor].CGColor,
(__bridge id)[UIColor redColor].CGColor,
(__bridge id)[UIColor greenColor].CGColor,
(__bridge id)[UIColor blueColor].CGColor
];
CAMediaTimingFunction *fn = [CAMediaTimingFunction functionWithName:@"easeIn"];
keyAnimation.timingFunctions = @[fn,fn,fn];
[self.colorLayer addAnimation:keyAnimation forKey:nil];
}
@end
自定義緩沖函數(shù)
在第八章中恐似，我們給時鐘項目添加了動畫”锘保看起來很贊阳仔，但是如果有合適的緩沖函數(shù)就更好了忧陪。在顯示世界中近范，鐘表指針轉(zhuǎn)動的時候，通常起步很慢评矩，然后迅速啪地一聲，最后緩沖到終點斥杜。但是標準的緩沖函數(shù)在這里每一個適合它蹂空，那該如何創(chuàng)建一個新的呢?
除了+functionWithName:之外俯萌，CAMediaTimingFunction 同樣有另一個構(gòu)造 函數(shù)上枕，一個有四個浮點參數(shù)的+ functionWithControlPoints:::: (注意這里奇怪的語法辨萍，并沒有包含具體每個參數(shù)的名稱，這在objective-C中是合法的拉背，但是卻違反了蘋果對方法命名的指導(dǎo)方針犁罩，而且看起來是一個奇怪的設(shè)計)。
使用這個方法两疚，我們可以創(chuàng)建一個自定義的緩沖函數(shù)床估，來匹配我們的時鐘動畫，為了理解如何使用這個方法诱渤，我們要了解一些 CAMediaTimingFunction 是如何工作 的丐巫。
三次貝塞爾曲線
CAMediaTimingFunction 函數(shù)的主要原則在于它把輸入的時間轉(zhuǎn)換成起點和終點 之間成比例的改變。我們可以用一個簡單的圖標來解釋勺美，橫軸代表時間递胧，縱軸代表 改變的量，于是線性的緩沖就是一條從起點開始的簡單的斜線赡茸。
這條曲線的斜率代表了速度缎脾，斜率的改變代表了加速度，原則上來說坛掠，任何加速的 曲線都可以用這種圖像來表示，但是CAMediaTimingFunction使用了一個叫做三次貝塞爾曲線的函數(shù)治筒，它只可以產(chǎn)出指定緩沖函數(shù)的子集(我們之前在第八章中創(chuàng) 建CAKeyframeAnimation 路徑的時候提到過三次貝塞爾曲線)屉栓。
你或許會回想起，一個三次貝塞爾曲線通過四個點來定義耸袜，第一個和最后一個點代
表了曲線的起點和終點友多，剩下中間兩個點叫做控制點，因為它們控制了曲線的形
狀堤框，貝塞爾曲線的控制點其實是位于曲線之外的點域滥，也就是說曲線并不一定要穿過
它們纵柿。你可以把它們想象成吸引經(jīng)過它們曲線的磁鐵。
實際上它是一個很奇怪的函數(shù)启绰，先加速昂儒，然后減速，最后快到達終點的時候又加
速委可，那么標準的緩沖函數(shù)又該如何用圖像來表示呢?
CAMediaTimingFunction 有一個叫做 -getControlPointAtIndex:values: 的方法渊跋，可以用來檢索曲線的點，這個方法的設(shè)計的確有點奇怪(或許也就只有蘋果 能回答為什么不簡單返回一個CGPoint )着倾，但是使用它我們可以找到標準緩沖函數(shù)的點拾酝，然后用UIBezierPath 和CAShapeLayer 來把它畫出來。
曲線的起始和終點始終是{0, 0}和{1, 1}卡者，于是我們只需要檢索曲線的第二個和第三 個點(控制點)蒿囤。
更加復(fù)雜的動畫曲線
考慮一個橡膠球掉落到堅硬的地面的場景，當開始下落的時候崇决，它會持續(xù)加速知道落到地面材诽，然后經(jīng)過幾次反彈，最后停下來嗽桩。如果用一張圖來說明岳守，它會如圖10.5 所示。
這種效果沒法用一個簡單的三次貝塞爾曲線表示碌冶，于是不能用 CAMediaTimingFunction來完成湿痢。但如果想要實現(xiàn)這樣的效果，可以用如下幾 種方法:
- 用
CAKeyframeAnimation創(chuàng)建一個動畫扑庞，然后分割成幾個步驟譬重，每個小步驟 使用自己的計時函數(shù)(具體下節(jié)介紹)。 - 使用定時器逐幀更新實現(xiàn)動畫(見第11章罐氨，“基于定時器的動畫”)臀规。
基于關(guān)鍵幀的緩沖
為了使用關(guān)鍵幀實現(xiàn)反彈動畫，我們需要在緩沖曲線中對每一個顯著的點創(chuàng)建一個 關(guān)鍵幀(在這個情況下栅隐，關(guān)鍵點也就是每次反彈的峰值)塔嬉，然后應(yīng)用緩沖函數(shù)把每段曲線連接起來。同時租悄，我們也需要通過 keyTimes來指定每個關(guān)鍵幀的時間偏移谨究，由于每次反彈的時間都會減少，于是關(guān)鍵幀并不會均勻分布泣棋。
#import "ViewController.h"
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIView *containerView;
@property (nonatomic, strong) UIImageView *ballView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
UIImage *image = [UIImage imageNamed:@"ball.png"];
self.ballView= [[UIImageView alloc]initWithImage:image];
self.ballView.contentMode = UIViewContentModeScaleToFill;
[self.containerView addSubview:self.ballView];
[self animate];
}
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
[self animate];
}
- (void)animate{
self.ballView.center = CGPointMake(150, 32);
CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
animation.keyPath = @"position";
animation.duration = 1.0;
animation.delegate = self;
animation.values = @[
[NSValue valueWithCGPoint:CGPointMake(150, 140)],
[NSValue valueWithCGPoint:CGPointMake(150, 130)],
[NSValue valueWithCGPoint:CGPointMake(150, 120)],
[NSValue valueWithCGPoint:CGPointMake(150, 110)],
[NSValue valueWithCGPoint:CGPointMake(150, 100)],
[NSValue valueWithCGPoint:CGPointMake(150, 90)],
[NSValue valueWithCGPoint:CGPointMake(150, 80)],
[NSValue valueWithCGPoint:CGPointMake(150, 70)],
[NSValue valueWithCGPoint:CGPointMake(150, 60)],
[NSValue valueWithCGPoint:CGPointMake(150, 50)],
[NSValue valueWithCGPoint:CGPointMake(150, 40)],
[NSValue valueWithCGPoint:CGPointMake(150, 30)],
[NSValue valueWithCGPoint:CGPointMake(150, 20)],
[NSValue valueWithCGPoint:CGPointMake(150, 10)],
];
animation.timingFunctions = @[
[CAMediaTimingFunction functionWithName:@"easeOut"],
[CAMediaTimingFunction functionWithName:@"easeOut"],
[CAMediaTimingFunction functionWithName:@"easeOut"],
[CAMediaTimingFunction functionWithName:@"easeOut"],
[CAMediaTimingFunction functionWithName:@"easeOut"],
[CAMediaTimingFunction functionWithName:@"easeOut"],
[CAMediaTimingFunction functionWithName:@"easeOut"],
[CAMediaTimingFunction functionWithName:@"easeOut"],
[CAMediaTimingFunction functionWithName:@"easeOut"],
[CAMediaTimingFunction functionWithName:@"easeOut"],
[CAMediaTimingFunction functionWithName:@"easeOut"],
[CAMediaTimingFunction functionWithName:@"easeOut"],
[CAMediaTimingFunction functionWithName:@"easeOut"]
];
animation.keyTimes = @[@0.0,@0.2,@0.3,@0.4,@0.45,@0.5,@0.6,@0.65,@0.7,@0.8,@0.9];
self.ballView.layer.position = CGPointMake(150, 268);
[self.ballView.layer addAnimation:animation forKey:nil];
}
@end
這種方式還算不錯胶哲，但是實現(xiàn)起來略顯笨重(因為要不停地嘗試計算各種關(guān)鍵幀和時間偏移)并且和動畫強制綁定了(因為如果要改變動畫的一個屬性，那就意味著要
重新計算所有的關(guān)鍵幀)潭辈。那該如何寫一個方法鸯屿，用緩沖函數(shù)來把任何簡單的屬性
動畫轉(zhuǎn)換成關(guān)鍵幀動畫呢澈吨，下面我們來實現(xiàn)它。
流程自動化
我們把動畫分割成相當大的幾塊寄摆，然后用Core Animation的緩沖進 入和緩沖退出函數(shù)來大約形成我們想要的曲線谅辣。但如果我們把動畫分割成更小的幾 部分，那么我們就可以用直線來拼接這些曲線(也就是線性緩沖)冰肴。為了實現(xiàn)自動 化屈藐，我們需要知道如何做如下兩件事情:
- 自動把任意屬性動畫分割成多個關(guān)鍵幀
- 用一個數(shù)學(xué)函數(shù)表示彈性動畫，使得可以對幀做便宜
為了解決第一個問題熙尉，我們需要復(fù)制Core Animation的插值機制联逻。這是一個傳入起 點和終點，然后在這兩個點之間指定時間點產(chǎn)出一個新點的機制检痰。對于簡單的浮點 起始值包归，公式如下(假設(shè)時間從0到1):
value = (endValue – startValue) × time + startValue;
那么如果要插入一個類似于 CGPoint ， CGColorRef 或者CATransform3D這種更加復(fù)雜類型的值铅歼，我們可以簡單地對每個獨立的元素應(yīng)用這個方法(也就CGPoint中的x和y值公壤， CGColorRef 中的紅，藍椎椰，綠厦幅，透明值，或者CATransfrom3D中獨立矩陣的坐標)慨飘。我們同樣需要一些邏輯在插值之前對對 象拆解值确憨，然后在插值之后在重新封裝成對象，也就是說需要實時地檢查類型瓤的。
一旦我們可以用代碼獲取屬性動畫的起始值之間的任意插值休弃，我們就可以把動畫分 割成許多獨立的關(guān)鍵幀，然后產(chǎn)出一個線性的關(guān)鍵幀動畫圈膏。
注意到我們用了60 x 動畫時間(秒做單位)作為關(guān)鍵幀的個數(shù)塔猾，這是因為Core Animation按照每秒60幀去渲染屏幕更新，所以如果我們每秒生成60個關(guān)鍵幀稽坤，就 可以保證動畫足夠的平滑(盡管實際上很可能用更少的幀率就可以達到很好的效 果)丈甸。
我們在示例中僅僅引入了對 CGPoint 類型的插值代碼。但是尿褪，從代碼中很清楚能 看出如何擴展成支持別的類型睦擂。作為不能識別類型的備選方案，我們僅僅在前一半 返回了 fromValue茫多，在后一半返回了toValue 祈匙。
總結(jié)
在這一章中忽刽，我們了解了有關(guān)緩沖和 CAMediaTimingFunction類天揖，它可以允許我 們創(chuàng)建自定義的緩沖函數(shù)來完善我們的動畫夺欲，同樣了解了如何用 CAKeyframeAnimation來避開 CAMediaTimingFunction 的限制，創(chuàng)建完全 自定義的緩沖函數(shù)今膊。
