10.1 動畫速度
動畫速度
動畫實際上就是一段時間內(nèi)的變化，這就暗示了變化一定是隨著某個特定的速率進行。速率由以下公式計算而來：
velocity = change / time這里的變化可以指的是一個物體移動的距離，時間指動畫持續(xù)的時長，用這樣的一個移動可以更加形象的描述（比如position和bounds屬性的動畫），但實際上它應用于任意可以做動畫的屬性（比如color和opacity）。
上面的等式假設了速度在整個動畫過程中都是恒定不變的（就如同第八章“顯式動畫”的情況），對于這種恒定速度的動畫我們稱之為“線性步調(diào)”，而且從技術的角度而言這也是實現(xiàn)動畫最簡單的方式，但也是完全不真實的一種效果。
考慮一個場景，一輛車行駛在一定距離內(nèi)，它并不會一開始就以60mph的速度行駛，然后到達終點后突然變成0mph。一是因為需要無限大的加速度（即使是最好的車也不會在0秒內(nèi)從0跑到60），另外不然的話會干死所有乘客。在現(xiàn)實中，它會慢慢地加速到全速，然后當它接近終點的時候，它會慢慢地減速，直到最后停下來。
那么對于一個掉落到地上的物體又會怎樣呢？它會首先停在空中，然后一直加速到落到地面，然后突然停止（然后由于積累的動能轉換伴隨著一聲巨響，砰?。?/p>
現(xiàn)實生活中的任何一個物體都會在運動中加速或者減速。那么我們?nèi)绾卧趧赢嬛袑崿F(xiàn)這種加速度呢？一種方法是使用物理引擎來對運動物體的摩擦和動量來建模，然而這會使得計算過于復雜。我們稱這種類型的方程為緩沖函數(shù)，幸運的是，Core Animation內(nèi)嵌了一系列標準函數(shù)提供給我們使用。
CAMediaTimingFunction
那么該如何使用緩沖方程式呢？首先需要設置CAAnimation的timingFunction屬性，是CAMediaTimingFunction類的一個對象。如果想改變隱式動畫的計時函數(shù)，同樣也可以使用CATransaction的+setAnimationTimingFunction:方法。
這里有一些方式來創(chuàng)建CAMediaTimingFunction，最簡單的方式是調(diào)用+timingFunctionWithName:的構造方法。這里傳入如下幾個常量之一：
kCAMediaTimingFunctionLinear
kCAMediaTimingFunctionEaseIn
kCAMediaTimingFunctionEaseOut
kCAMediaTimingFunctionEaseInEaseOut
kCAMediaTimingFunctionDefaultkCAMediaTimingFunctionLinear選項創(chuàng)建了一個線性的計時函數(shù)，同樣也是CAAnimation的timingFunction屬性為空時候的默認函數(shù)。線性步調(diào)對于那些立即加速并且保持勻速到達終點的場景會有意義（例如射出槍膛的子彈），但是默認來說它看起來很奇怪，因為對大多數(shù)的動畫來說確實很少用到。
kCAMediaTimingFunctionEaseIn常量創(chuàng)建了一個慢慢加速然后突然停止的方法。對于之前提到的自由落體的例子來說很適合，或者比如對準一個目標的導彈的發(fā)射。
kCAMediaTimingFunctionEaseOut則恰恰相反，它以一個全速開始，然后慢慢減速停止。它有一個削弱的效果，應用的場景比如一扇門慢慢地關上，而不是砰地一聲。
kCAMediaTimingFunctionEaseInEaseOut創(chuàng)建了一個慢慢加速然后再慢慢減速的過程。這是現(xiàn)實世界大多數(shù)物體移動的方式，也是大多數(shù)動畫來說最好的選擇。如果只可以用一種緩沖函數(shù)的話，那就必須是它了。那么你會疑惑為什么這不是默認的選擇，實際上當使用UIView的動畫方法時，他的確是默認的，但當創(chuàng)建CAAnimation的時候，就需要手動設置它了。
最后還有一個kCAMediaTimingFunctionDefault，它和kCAMediaTimingFunctionEaseInEaseOut很類似，但是加速和減速的過程都稍微有些慢。它和kCAMediaTimingFunctionEaseInEaseOut的區(qū)別很難察覺，可能是蘋果覺得它對于隱式動畫來說更適合（然后對UIKit就改變了想法，而是使用kCAMediaTimingFunctionEaseInEaseOut作為默認效果），雖然它的名字說是默認的，但還是要記住當創(chuàng)建顯式的CAAnimation它并不是默認選項（換句話說，默認的圖層行為動畫用kCAMediaTimingFunctionDefault作為它們的計時方法）。
你可以使用一個簡單的測試工程來實驗一下（清單10.1），在運行之前改變緩沖函數(shù)的代碼，然后點擊任何地方來觀察圖層是如何通過指定的緩沖移動的。
清單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動畫的緩沖選項，給options參數(shù)添加如下常量之一：
UIViewAnimationOptionCurveEaseInOut
UIViewAnimationOptionCurveEaseIn
UIViewAnimationOptionCurveEaseOut
UIViewAnimationOptionCurveLinear它們和CAMediaTimingFunction緊密關聯(lián)，UIViewAnimationOptionCurveEaseInOut是默認值（這里沒有kCAMediaTimingFunctionDefault相對應的值了）。
具體使用方法見清單10.2（注意到這里不再使用UIView額外添加的圖層，因為UIKit的動畫并不支持這類圖層）。
清單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緩沖和關鍵幀動畫
或許你會回想起第八章里面顏色切換的關鍵幀動畫由于線性變換的原因（見清單8.5）看起來有些奇怪，使得顏色變換非常不自然。為了糾正這點，我們來用更加合適的緩沖方法，例如kCAMediaTimingFunctionEaseIn，給圖層的顏色變化添加一點脈沖效果，讓它更像現(xiàn)實中的一個彩色燈泡。
我們不想給整個動畫過程應用這個效果，我們希望對每個動畫的過程重復這樣的緩沖，于是每次顏色的變換都會有脈沖效果。
CAKeyframeAnimation有一個NSArray類型的timingFunctions屬性，我們可以用它來對每次動畫的步驟指定不同的計時函數(shù)。但是指定函數(shù)的個數(shù)一定要等于keyframes數(shù)組的元素個數(shù)減一，因為它是描述每一幀之間動畫速度的函數(shù)。
在這個例子中，我們自始至終想使用同一個緩沖函數(shù)，但我們同樣需要一個函數(shù)的數(shù)組來告訴動畫不停地重復每個步驟，而不是在整個動畫序列只做一次緩沖，我們簡單地使用包含多個相同函數(shù)拷貝的數(shù)組就可以了（見清單10.3）。
運行更新后的代碼，你會發(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
更多建議：