iOS 核心動畫的緩沖
緩沖
生活和藝術(shù)一樣，最美的永遠(yuǎn)是曲線。 -- 愛德華布爾沃 - 利頓
在第九章“圖層時間”中，我們討論了動畫時間和CAMediaTiming協(xié)議?，F(xiàn)在我們來看一下另一個和時間相關(guān)的機(jī)制--所謂的緩沖。Core Animation使用緩沖來使動畫移動更平滑更自然，而不是看起來的那種機(jī)械和人工，在這一章我們將要研究如何對你的動畫控制和自定義緩沖曲線。
動畫速度
動畫實(shí)際上就是一段時間內(nèi)的變化，這就暗示了變化一定是隨著某個特定的速率進(jìn)行。速率由以下公式計(jì)算而來：
velocity = change / time這里的變化可以指的是一個物體移動的距離，時間指動畫持續(xù)的時長，用這樣的一個移動可以更加形象的描述（比如position和bounds屬性的動畫），但實(shí)際上它應(yīng)用于任意可以做動畫的屬性（比如color和opacity）。
上面的等式假設(shè)了速度在整個動畫過程中都是恒定不變的（就如同第八章“顯式動畫”的情況），對于這種恒定速度的動畫我們稱之為“線性步調(diào)”，而且從技術(shù)的角度而言這也是實(shí)現(xiàn)動畫最簡單的方式，但也是完全不真實(shí)的一種效果。
考慮一個場景，一輛車行駛在一定距離內(nèi)，它并不會一開始就以60mph的速度行駛，然后到達(dá)終點(diǎn)后突然變成0mph。一是因?yàn)樾枰獰o限大的加速度（即使是最好的車也不會在0秒內(nèi)從0跑到60），另外不然的話會干死所有乘客。在現(xiàn)實(shí)中，它會慢慢地加速到全速，然后當(dāng)它接近終點(diǎn)的時候，它會慢慢地減速，直到最后停下來。
那么對于一個掉落到地上的物體又會怎樣呢？它會首先停在空中，然后一直加速到落到地面，然后突然停止（然后由于積累的動能轉(zhuǎn)換伴隨著一聲巨響，砰?。?。
現(xiàn)實(shí)生活中的任何一個物體都會在運(yùn)動中加速或者減速。那么我們?nèi)绾卧趧赢嬛袑?shí)現(xiàn)這種加速度呢？一種方法是使用物理引擎來對運(yùn)動物體的摩擦和動量來建模，然而這會使得計(jì)算過于復(fù)雜。我們稱這種類型的方程為緩沖函數(shù)，幸運(yùn)的是，Core Animation內(nèi)嵌了一系列標(biāo)準(zhǔn)函數(shù)提供給我們使用。
CAMediaTimingFunction
那么該如何使用緩沖方程式呢？首先需要設(shè)置CAAnimation的timingFunction屬性，是CAMediaTimingFunction類的一個對象。如果想改變隱式動畫的計(jì)時函數(shù)，同樣也可以使用CATransaction的+setAnimationTimingFunction:方法。
這里有一些方式來創(chuàng)建CAMediaTimingFunction，最簡單的方式是調(diào)用+timingFunctionWithName:的構(gòu)造方法。這里傳入如下幾個常量之一：
kCAMediaTimingFunctionLinear
kCAMediaTimingFunctionEaseIn
kCAMediaTimingFunctionEaseOut
kCAMediaTimingFunctionEaseInEaseOut
kCAMediaTimingFunctionDefaultkCAMediaTimingFunctionLinear選項(xiàng)創(chuàng)建了一個線性的計(jì)時函數(shù)，同樣也是CAAnimation的timingFunction屬性為空時候的默認(rèn)函數(shù)。線性步調(diào)對于那些立即加速并且保持勻速到達(dá)終點(diǎn)的場景會有意義（例如射出槍膛的子彈），但是默認(rèn)來說它看起來很奇怪，因?yàn)閷Υ蠖鄶?shù)的動畫來說確實(shí)很少用到。
kCAMediaTimingFunctionEaseIn常量創(chuàng)建了一個慢慢加速然后突然停止的方法。對于之前提到的自由落體的例子來說很適合，或者比如對準(zhǔn)一個目標(biāo)的導(dǎo)彈的發(fā)射。
kCAMediaTimingFunctionEaseOut則恰恰相反，它以一個全速開始，然后慢慢減速停止。它有一個削弱的效果，應(yīng)用的場景比如一扇門慢慢地關(guān)上，而不是砰地一聲。
kCAMediaTimingFunctionEaseInEaseOut創(chuàng)建了一個慢慢加速然后再慢慢減速的過程。這是現(xiàn)實(shí)世界大多數(shù)物體移動的方式，也是大多數(shù)動畫來說最好的選擇。如果只可以用一種緩沖函數(shù)的話，那就必須是它了。那么你會疑惑為什么這不是默認(rèn)的選擇，實(shí)際上當(dāng)使用UIView的動畫方法時，他的確是默認(rèn)的，但當(dāng)創(chuàng)建CAAnimation的時候，就需要手動設(shè)置它了。
最后還有一個kCAMediaTimingFunctionDefault，它和kCAMediaTimingFunctionEaseInEaseOut很類似，但是加速和減速的過程都稍微有些慢。它和kCAMediaTimingFunctionEaseInEaseOut的區(qū)別很難察覺，可能是蘋果覺得它對于隱式動畫來說更適合（然后對UIKit就改變了想法，而是使用kCAMediaTimingFunctionEaseInEaseOut作為默認(rèn)效果），雖然它的名字說是默認(rèn)的，但還是要記住當(dāng)創(chuàng)建顯式的CAAnimation它并不是默認(rèn)選項(xiàng)（換句話說，默認(rèn)的圖層行為動畫用kCAMediaTimingFunctionDefault作為它們的計(jì)時方法）。
你可以使用一個簡單的測試工程來實(shí)驗(yàn)一下（清單10.1），在運(yùn)行之前改變緩沖函數(shù)的代碼，然后點(diǎn)擊任何地方來觀察圖層是如何通過指定的緩沖移動的。
清單10.1 緩沖函數(shù)的簡單測試
@interface ViewController ()
@property (nonatomic, strong) CALayer *colorLayer;
@end
@implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
//create a red layer
self.colorLayer = [CALayer layer];
self.colorLayer.frame = CGRectMake(0, 0, 100, 100);
self.colorLayer.position = CGPointMake(self.view.bounds.size.width/2.0, self.view.bounds.size.height/2.0);
self.colorLayer.backgroundColor = [UIColor redColor].CGColor;
[self.view.layer addSublayer:self.colorLayer];
}
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
//configure the transaction
[CATransaction begin];
[CATransaction setAnimationDuration:1.0];
[CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];
//set the position
self.colorLayer.position = [[touches anyObject] locationInView:self.view];
//commit transaction
[CATransaction commit];
}
@endUIView的動畫緩沖
UIKit的動畫也同樣支持這些緩沖方法的使用，盡管語法和常量有些不同，為了改變UIView動畫的緩沖選項(xiàng)，給options參數(shù)添加如下常量之一：
UIViewAnimationOptionCurveEaseInOut
UIViewAnimationOptionCurveEaseIn
UIViewAnimationOptionCurveEaseOut
UIViewAnimationOptionCurveLinear它們和CAMediaTimingFunction緊密關(guān)聯(lián)，UIViewAnimationOptionCurveEaseInOut是默認(rèn)值（這里沒有kCAMediaTimingFunctionDefault相對應(yīng)的值了）。
具體使用方法見清單10.2（注意到這里不再使用UIView額外添加的圖層，因?yàn)閁IKit的動畫并不支持這類圖層）。
清單10.2 使用UIKit動畫的緩沖測試工程
@interface ViewController ()
@property (nonatomic, strong) UIView *colorView;
@end
@implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
//create a red layer
self.colorView = [[UIView alloc] init];
self.colorView.bounds = CGRectMake(0, 0, 100, 100);
self.colorView.center = CGPointMake(self.view.bounds.size.width / 2, self.view.bounds.size.height / 2);
self.colorView.backgroundColor = [UIColor redColor];
[self.view addSubview:self.colorView];
}
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
//perform the animation
[UIView animateWithDuration:1.0 delay:0.0
options:UIViewAnimationOptionCurveEaseOut
animations:^{
//set the position
self.colorView.center = [[touches anyObject] locationInView:self.view];
}
completion:NULL];
}
@end緩沖和關(guān)鍵幀動畫
或許你會回想起第八章里面顏色切換的關(guān)鍵幀動畫由于線性變換的原因（見清單8.5）看起來有些奇怪，使得顏色變換非常不自然。為了糾正這點(diǎn)，我們來用更加合適的緩沖方法，例如kCAMediaTimingFunctionEaseIn，給圖層的顏色變化添加一點(diǎn)脈沖效果，讓它更像現(xiàn)實(shí)中的一個彩色燈泡。
我們不想給整個動畫過程應(yīng)用這個效果，我們希望對每個動畫的過程重復(fù)這樣的緩沖，于是每次顏色的變換都會有脈沖效果。
CAKeyframeAnimation有一個NSArray類型的timingFunctions屬性，我們可以用它來對每次動畫的步驟指定不同的計(jì)時函數(shù)。但是指定函數(shù)的個數(shù)一定要等于keyframes數(shù)組的元素個數(shù)減一，因?yàn)樗敲枋雒恳粠g動畫速度的函數(shù)。
在這個例子中，我們自始至終想使用同一個緩沖函數(shù)，但我們同樣需要一個函數(shù)的數(shù)組來告訴動畫不停地重復(fù)每個步驟，而不是在整個動畫序列只做一次緩沖，我們簡單地使用包含多個相同函數(shù)拷貝的數(shù)組就可以了（見清單10.3）。
運(yùn)行更新后的代碼，你會發(fā)現(xiàn)動畫看起來更加自然了。
清單10.3 對CAKeyframeAnimation使用CAMediaTimingFunction
@interface ViewController ()
@property (nonatomic, weak) IBOutlet UIView *layerView;
@property (nonatomic, weak) IBOutlet CALayer *colorLayer;
@end
@implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
//create sublayer
self.colorLayer = [CALayer layer];
self.colorLayer.frame = CGRectMake(50.0f, 50.0f, 100.0f, 100.0f);
self.colorLayer.backgroundColor = [UIColor blueColor].CGColor;
//add it to our view
[self.layerView.layer addSublayer:self.colorLayer];
}
- (IBAction)changeColor
{
//create a keyframe animation
CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
animation.keyPath = @"backgroundColor";
animation.duration = 2.0;
animation.values = @[
(__bridge id)[UIColor blueColor].CGColor,
(__bridge id)[UIColor redColor].CGColor,
(__bridge id)[UIColor greenColor].CGColor,
(__bridge id)[UIColor blueColor].CGColor ];
//add timing function
CAMediaTimingFunction *fn = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseIn];
animation.timingFunctions = @[fn, fn, fn];
//apply animation to layer
[self.colorLayer addAnimation:animation forKey:nil];
}
@end自定義緩沖函數(shù)
在第八章中，我們給時鐘項(xiàng)目添加了動畫?？雌饋砗苜潱侨绻泻线m的緩沖函數(shù)就更好了。在顯示世界中，鐘表指針轉(zhuǎn)動的時候，通常起步很慢，然后迅速啪地一聲，最后緩沖到終點(diǎn)。但是標(biāo)準(zhǔn)的緩沖函數(shù)在這里每一個適合它，那該如何創(chuàng)建一個新的呢？
除了+functionWithName:之外，CAMediaTimingFunction同樣有另一個構(gòu)造函數(shù)，一個有四個浮點(diǎn)參數(shù)的+functionWithControlPoints::::（注意這里奇怪的語法，并沒有包含具體每個參數(shù)的名稱，這在objective-C中是合法的，但是卻違反了蘋果對方法命名的指導(dǎo)方針，而且看起來是一個奇怪的設(shè)計(jì)）。
使用這個方法，我們可以創(chuàng)建一個自定義的緩沖函數(shù)，來匹配我們的時鐘動畫，為了理解如何使用這個方法，我們要了解一些CAMediaTimingFunction是如何工作的。
三次貝塞爾曲線
CAMediaTimingFunction函數(shù)的主要原則在于它把輸入的時間轉(zhuǎn)換成起點(diǎn)和終點(diǎn)之間成比例的改變。我們可以用一個簡單的圖標(biāo)來解釋，橫軸代表時間，縱軸代表改變的量，于是線性的緩沖就是一條從起點(diǎn)開始的簡單的斜線（圖10.1）。
圖10.1 線性緩沖函數(shù)的圖像
這條曲線的斜率代表了速度，斜率的改變代表了加速度，原則上來說，任何加速的曲線都可以用這種圖像來表示，但是CAMediaTimingFunction使用了一個叫做三次貝塞爾曲線的函數(shù)，它只可以產(chǎn)出指定緩沖函數(shù)的子集（我們之前在第八章中創(chuàng)建CAKeyframeAnimation路徑的時候提到過三次貝塞爾曲線）。
你或許會回想起，一個三次貝塞爾曲線通過四個點(diǎn)來定義，第一個和最后一個點(diǎn)代表了曲線的起點(diǎn)和終點(diǎn)，剩下中間兩個點(diǎn)叫做控制點(diǎn)，因?yàn)樗鼈兛刂屏饲€的形狀，貝塞爾曲線的控制點(diǎn)其實(shí)是位于曲線之外的點(diǎn)，也就是說曲線并不一定要穿過它們。你可以把它們想象成吸引經(jīng)過它們曲線的磁鐵。
圖10.2展示了一個三次貝塞爾緩沖函數(shù)的例子
圖10.2 三次貝塞爾緩沖函數(shù)
實(shí)際上它是一個很奇怪的函數(shù)，先加速，然后減速，最后快到達(dá)終點(diǎn)的時候又加速，那么標(biāo)準(zhǔn)的緩沖函數(shù)又該如何用圖像來表示呢？
CAMediaTimingFunction有一個叫做-getControlPointAtIndex:values:的方法，可以用來檢索曲線的點(diǎn)，這個方法的設(shè)計(jì)的確有點(diǎn)奇怪（或許也就只有蘋果能回答為什么不簡單返回一個CGPoint），但是使用它我們可以找到標(biāo)準(zhǔn)緩沖函數(shù)的點(diǎn)，然后用UIBezierPath和CAShapeLayer來把它畫出來。
曲線的起始和終點(diǎn)始終是{0, 0}和{1, 1}，于是我們只需要檢索曲線的第二個和第三個點(diǎn)（控制點(diǎn)）。具體代碼見清單10.4。所有的標(biāo)準(zhǔn)緩沖函數(shù)的圖像見圖10.3。
清單10.4 使用UIBezierPath繪制CAMediaTimingFunction
@interface ViewController ()
@property (nonatomic, weak) IBOutlet UIView *layerView;
@end
@implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
//create timing function
CAMediaTimingFunction *function = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseOut];
//get control points
CGPoint controlPoint1, controlPoint2;
[function getControlPointAtIndex:1 values:(float *)&controlPoint1];
[function getControlPointAtIndex:2 values:(float *)&controlPoint2];
//create curve
UIBezierPath *path = [[UIBezierPath alloc] init];
[path moveToPoint:CGPointZero];
[path addCurveToPoint:CGPointMake(1, 1)
controlPoint1:controlPoint1 controlPoint2:controlPoint2];
//scale the path up to a reasonable size for display
[path applyTransform:CGAffineTransformMakeScale(200, 200)];
//create shape layer
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.strokeColor = [UIColor redColor].CGColor;
shapeLayer.fillColor = [UIColor clearColor].CGColor;
shapeLayer.lineWidth = 4.0f;
shapeLayer.path = path.CGPath;
[self.layerView.layer addSublayer:shapeLayer];
//flip geometry so that 0,0 is in the bottom-left
self.layerView.layer.geometryFlipped = YES;
}
@end
圖10.3 標(biāo)準(zhǔn)CAMediaTimingFunction緩沖曲線
那么對于我們自定義時鐘指針的緩沖函數(shù)來說，我們需要初始微弱，然后迅速上升，最后緩沖到終點(diǎn)的曲線，通過一些實(shí)驗(yàn)之后，最終結(jié)果如下：
[CAMediaTimingFunction functionWithControlPoints:1 :0 :0.75 :1];如果把它轉(zhuǎn)換成緩沖函數(shù)的圖像，最后如圖10.4所示，如果把它添加到時鐘的程序，就形成了之前一直期待的非常贊的效果（見代清單10.5）。
圖10.4 自定義適合時鐘的緩沖函數(shù)
清單10.5 添加了自定義緩沖函數(shù)的時鐘程序
- (void)setAngle:(CGFloat)angle forHand:(UIView *)handView ?animated:(BOOL)animated
{
//generate transform
CATransform3D transform = CATransform3DMakeRotation(angle, 0, 0, 1);
if (animated) {
//create transform animation
CABasicAnimation *animation = [CABasicAnimation animation];
animation.keyPath = @"transform";
animation.fromValue = [handView.layer.presentationLayer valueForKey:@"transform"];
animation.toValue = [NSValue valueWithCATransform3D:transform];
animation.duration = 0.5;
animation.delegate = self;
animation.timingFunction = [CAMediaTimingFunction functionWithControlPoints:1 :0 :0.75 :1];
//apply animation
handView.layer.transform = transform;
[handView.layer addAnimation:animation forKey:nil];
} else {
//set transform directly
handView.layer.transform = transform;
}
}更加復(fù)雜的動畫曲線
考慮一個橡膠球掉落到堅(jiān)硬的地面的場景，當(dāng)開始下落的時候，它會持續(xù)加速知道落到地面，然后經(jīng)過幾次反彈，最后停下來。如果用一張圖來說明，它會如圖10.5所示。
圖10.5 一個沒法用三次貝塞爾曲線描述的反彈的動畫
這種效果沒法用一個簡單的三次貝塞爾曲線表示，于是不能用CAMediaTimingFunction來完成。但如果想要實(shí)現(xiàn)這樣的效果，可以用如下幾種方法：
- 用
CAKeyframeAnimation創(chuàng)建一個動畫，然后分割成幾個步驟，每個小步驟使用自己的計(jì)時函數(shù)（具體下節(jié)介紹）。 - 使用定時器逐幀更新實(shí)現(xiàn)動畫（見第11章，“基于定時器的動畫”）。
基于關(guān)鍵幀的緩沖
為了使用關(guān)鍵幀實(shí)現(xiàn)反彈動畫，我們需要在緩沖曲線中對每一個顯著的點(diǎn)創(chuàng)建一個關(guān)鍵幀（在這個情況下，關(guān)鍵點(diǎn)也就是每次反彈的峰值），然后應(yīng)用緩沖函數(shù)把每段曲線連接起來。同時，我們也需要通過keyTimes來指定每個關(guān)鍵幀的時間偏移，由于每次反彈的時間都會減少，于是關(guān)鍵幀并不會均勻分布。
清單10.6展示了實(shí)現(xiàn)反彈球動畫的代碼（見圖10.6）
清單10.6 使用關(guān)鍵幀實(shí)現(xiàn)反彈球的動畫
@interface ViewController ()
@property (nonatomic, weak) IBOutlet UIView *containerView;
@property (nonatomic, strong) UIImageView *ballView;
@end
@implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
//add ball image view
UIImage *ballImage = [UIImage imageNamed:@"Ball.png"];
self.ballView = [[UIImageView alloc] initWithImage:ballImage];
[self.containerView addSubview:self.ballView];
//animate
[self animate];
}
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
//replay animation on tap
[self animate];
}
- (void)animate
{
//reset ball to top of screen
self.ballView.center = CGPointMake(150, 32);
//create keyframe animation
CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
animation.keyPath = @"position";
animation.duration = 1.0;
animation.delegate = self;
animation.values = @[
[NSValue valueWithCGPoint:CGPointMake(150, 32)],
[NSValue valueWithCGPoint:CGPointMake(150, 268)],
[NSValue valueWithCGPoint:CGPointMake(150, 140)],
[NSValue valueWithCGPoint:CGPointMake(150, 268)],
[NSValue valueWithCGPoint:CGPointMake(150, 220)],
[NSValue valueWithCGPoint:CGPointMake(150, 268)],
[NSValue valueWithCGPoint:CGPointMake(150, 250)],
[NSValue valueWithCGPoint:CGPointMake(150, 268)]
];
animation.timingFunctions = @[
[CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseIn],
[CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseOut],
[CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseIn],
[CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseOut],
[CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseIn],
[CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseOut],
[CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseIn]
];
animation.keyTimes = @[@0.0, @0.3, @0.5, @0.7, @0.8, @0.9, @0.95, @1.0];
//apply animation
self.ballView.layer.position = CGPointMake(150, 268);
[self.ballView.layer addAnimation:animation forKey:nil];
}
@end
圖10.6 使用關(guān)鍵幀實(shí)現(xiàn)的反彈球動畫
這種方式還算不錯，但是實(shí)現(xiàn)起來略顯笨重（因?yàn)橐煌５貒L試計(jì)算各種關(guān)鍵幀和時間偏移）并且和動畫強(qiáng)綁定了（因?yàn)槿绻淖儎赢嫷囊粋€屬性，那就意味著要重新計(jì)算所有的關(guān)鍵幀）。那該如何寫一個方法，用緩沖函數(shù)來把任何簡單的屬性動畫轉(zhuǎn)換成關(guān)鍵幀動畫呢，下面我們來實(shí)現(xiàn)它。
流程自動化
在清單10.6中，我們把動畫分割成相當(dāng)大的幾塊，然后用Core Animation的緩沖進(jìn)入和緩沖退出函數(shù)來大約形成我們想要的曲線。但如果我們把動畫分割成更小的幾部分，那么我們就可以用直線來拼接這些曲線（也就是線性緩沖）。為了實(shí)現(xiàn)自動化，我們需要知道如何做如下兩件事情：
- 自動把任意屬性動畫分割成多個關(guān)鍵幀
- 用一個數(shù)學(xué)函數(shù)表示彈性動畫，使得可以對幀做便宜
為了解決第一個問題，我們需要復(fù)制Core Animation的插值機(jī)制。這是一個傳入起點(diǎn)和終點(diǎn)，然后在這兩個點(diǎn)之間指定時間點(diǎn)產(chǎn)出一個新點(diǎn)的機(jī)制。對于簡單的浮點(diǎn)起始值，公式如下（假設(shè)時間從0到1）：
value = (endValue – startValue) × time + startValue;那么如果要插入一個類似于CGPoint，CGColorRef或者CATransform3D這種更加復(fù)雜類型的值，我們可以簡單地對每個獨(dú)立的元素應(yīng)用這個方法（也就CGPoint中的x和y值，CGColorRef中的紅，藍(lán)，綠，透明值，或者是CATransform3D中獨(dú)立矩陣的坐標(biāo)）。我們同樣需要一些邏輯在插值之前對對象拆解值，然后在插值之后在重新封裝成對象，也就是說需要實(shí)時地檢查類型。
一旦我們可以用代碼獲取屬性動畫的起始值之間的任意插值，我們就可以把動畫分割成許多獨(dú)立的關(guān)鍵幀，然后產(chǎn)出一個線性的關(guān)鍵幀動畫。清單10.7展示了相關(guān)代碼。
注意到我們用了60 x 動畫時間（秒做單位）作為關(guān)鍵幀的個數(shù)，這時因?yàn)镃ore Animation按照每秒60幀去渲染屏幕更新，所以如果我們每秒生成60個關(guān)鍵幀，就可以保證動畫足夠的平滑（盡管實(shí)際上很可能用更少的幀率就可以達(dá)到很好的效果）。
我們在示例中僅僅引入了對CGPoint類型的插值代碼。但是，從代碼中很清楚能看出如何擴(kuò)展成支持別的類型。作為不能識別類型的備選方案，我們僅僅在前一半返回了fromValue，在后一半返回了toValue。
清單10.7 使用插入的值創(chuàng)建一個關(guān)鍵幀動畫
float interpolate(float from, float to, float time)
{
return (to - from) * time + from;
}
- (id)interpolateFromValue:(id)fromValue toValue:(id)toValue time:(float)time
{
if ([fromValue isKindOfClass:[NSValue class]]) {
//get type
const char *type = [fromValue objCType];
if (strcmp(type, @encode(CGPoint)) == 0) {
CGPoint from = [fromValue CGPointValue];
CGPoint to = [toValue CGPointValue];
CGPoint result = CGPointMake(interpolate(from.x, to.x, time), interpolate(from.y, to.y, time));
return [NSValue valueWithCGPoint:result];
}
}
//provide safe default implementation
return (time < 0.5)? fromValue: toValue;
}
- (void)animate
{
//reset ball to top of screen
self.ballView.center = CGPointMake(150, 32);
//set up animation parameters
NSValue *fromValue = [NSValue valueWithCGPoint:CGPointMake(150, 32)];
NSValue *toValue = [NSValue valueWithCGPoint:CGPointMake(150, 268)];
CFTimeInterval duration = 1.0;
//generate keyframes
NSInteger numFrames = duration * 60;
NSMutableArray *frames = [NSMutableArray array];
for (int i = 0; i < numFrames; i++) {
float time = 1 / (float)numFrames * i;
[frames addObject:[self interpolateFromValue:fromValue toValue:toValue time:time]];
}
//create keyframe animation
CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
animation.keyPath = @"position";
animation.duration = 1.0;
animation.delegate = self;
animation.values = frames;
//apply animation
[self.ballView.layer addAnimation:animation forKey:nil];
}這可以起到作用，但效果并不是很好，到目前為止我們所完成的只是一個非常復(fù)雜的方式來使用線性緩沖復(fù)制CABasicAnimation的行為。這種方式的好處在于我們可以更加精確地控制緩沖，這也意味著我們可以應(yīng)用一個完全定制的緩沖函數(shù)。那么該如何做呢？
緩沖背后的數(shù)學(xué)并不很簡單，但是幸運(yùn)的是我們不需要一一實(shí)現(xiàn)它。羅伯特·彭納有一個網(wǎng)頁關(guān)于緩沖函數(shù)（http://www.robertpenner.com/easing），包含了大多數(shù)普遍的緩沖函數(shù)的多種編程語言的實(shí)現(xiàn)的鏈接，包括C。這里是一個緩沖進(jìn)入緩沖退出函數(shù)的示例（實(shí)際上有很多不同的方式去實(shí)現(xiàn)它）。
float quadraticEaseInOut(float t)
{
return (t < 0.5)? (2 * t * t): (-2 * t * t) + (4 * t) - 1;
}對我們的彈性球來說，我們可以使用bounceEaseOut函數(shù)：
float bounceEaseOut(float t)
{
if (t < 4/11.0) {
return (121 * t * t)/16.0;
} else if (t < 8/11.0) {
return (363/40.0 * t * t) - (99/10.0 * t) + 17/5.0;
} else if (t < 9/10.0) {
return (4356/361.0 * t * t) - (35442/1805.0 * t) + 16061/1805.0;
}
return (54/5.0 * t * t) - (513/25.0 * t) + 268/25.0;
}如果修改清單10.7的代碼來引入bounceEaseOut方法，我們的任務(wù)就是僅僅交換緩沖函數(shù)，現(xiàn)在就可以選擇任意的緩沖類型創(chuàng)建動畫了（見清單10.8）。
清單10.8 用關(guān)鍵幀實(shí)現(xiàn)自定義的緩沖函數(shù)
- (void)animate
{
//reset ball to top of screen
self.ballView.center = CGPointMake(150, 32);
//set up animation parameters
NSValue *fromValue = [NSValue valueWithCGPoint:CGPointMake(150, 32)];
NSValue *toValue = [NSValue valueWithCGPoint:CGPointMake(150, 268)];
CFTimeInterval duration = 1.0;
//generate keyframes
NSInteger numFrames = duration * 60;
NSMutableArray *frames = [NSMutableArray array];
for (int i = 0; i < numFrames; i++) {
float time = 1/(float)numFrames * i;
//apply easing
time = bounceEaseOut(time);
//add keyframe
[frames addObject:[self interpolateFromValue:fromValue toValue:toValue time:time]];
}
//create keyframe animation
CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
animation.keyPath = @"position";
animation.duration = 1.0;
animation.delegate = self;
animation.values = frames;
//apply animation
[self.ballView.layer addAnimation:animation forKey:nil];
}總結(jié)
在這一章中，我們了解了有關(guān)緩沖和CAMediaTimingFunction類，它可以允許我們創(chuàng)建自定義的緩沖函數(shù)來完善我們的動畫，同樣了解了如何用CAKeyframeAnimation來避開CAMediaTimingFunction的限制，創(chuàng)建完全自定義的緩沖函數(shù)。
在下一章中，我們將要研究基于定時器的動畫--另一個給我們對動畫更多控制的選擇，并且實(shí)現(xiàn)對動畫的實(shí)時操縱。
更多建議：