動畫速度(緩衝 10.1)，動畫速度緩衝10.1

動畫速度(緩衝 10.1)，動畫速度緩衝10.1
動畫速度

動畫實際上就是一段時間內的變化，這就暗示了變化一定是隨著某個特定的速率進行。速率由以下公式計算而來：

velocity = change / time

這裡的變化可以指的是一個物體移動的距離，時間指動畫持續的時間長度，用這樣的一個移動可以更加形象的描述（比如position和bounds屬性的動畫），但實際上它應用於任意可以做動畫的屬性（比如color和opacity）。

上面的等式假設了速度在整個動畫過程中都是恒定不變的（就如同第八章“顯式動畫”的情況），對於這種恒定速度的動畫我們稱之為“線性步調”，而且從技術的角度而言這也是實現動畫最簡單的方式，但也是完全不真實的一種效果。

考慮一個情境，一輛車行駛在一定距離內，它並不會一開始就以60mph的速度行駛，然後到達終點後突然變成0mph。一是因為需要無限大的加速度（即使是最好的車也不會在0秒內從0跑到60），另外不然的話會乾死所有乘客。在現實中，它會慢慢地加速到全速，然後當它接近終點的時候，它會慢慢地減速，直到最後停下來。

那麼對於一個掉落到地上的物體又會怎樣呢？它會首先停在空中，然後一直加速到落到地面，然後突然停止（然後由於積累的動能轉換伴隨著一聲巨響，砰！）。

 

現實生活中的任何一個物體都會在運動中加速或者減速。那麼我們如何在動畫中實現這種加速度呢？一種方法是使用物理引擎來對運動物體的摩擦和動量來建模，然而這會使得計算過於複雜。我們稱這種類型的方程為緩衝函數，幸運的是，Core Animation內嵌了一系列標準函數提供給我們使用。

##CAMediaTimingFunction

那麼該如何使用緩衝方程式呢？首先需要設定CAAnimation的timingFunction屬性，是CAMediaTimingFunction類的一個對象。如果想改變隱式動畫的計時函數，同樣也可以使用CATransaction的+setAnimationTimingFunction:方法。

這裡有一些方式來建立CAMediaTimingFunction，最簡單的方式是調用+timingFunctionWithName:的構造方法。這裡傳入如下幾個常量之一：

1 kCAMediaTimingFunctionLinear 2 kCAMediaTimingFunctionEaseIn 3 kCAMediaTimingFunctionEaseOut 4 kCAMediaTimingFunctionEaseInEaseOut5 kCAMediaTimingFunctionDefault

 

kCAMediaTimingFunctionLinear選項建立了一個線性計時函數，同樣也是CAAnimation的timingFunction屬性為空白時候的預設函數。線性步調對於那些立即加速並且保持勻速到達終點的情境會有意義（例如射出槍膛的子彈），但是預設來說它看起來很奇怪，因為對大多數的動畫來說確實很少用到。

kCAMediaTimingFunctionEaseIn常量建立了一個慢慢加速然後突然停止的方法。對於之前提到的自由落體的例子來說很適合，或者比如對準一個目標的飛彈的發射。

kCAMediaTimingFunctionEaseOut則恰恰相反，它以一個全速開始，然後慢慢減速停止。它有一個削弱的效果，應用的情境比如一扇門慢慢地關上，而不是砰地一聲。

kCAMediaTimingFunctionEaseInEaseOut建立了一個慢慢加速然後再慢慢減速的過程。這是現實世界大多數物體移動的方式，也是大多數動畫來說最好的選擇。如果只可以用一種緩衝函數的話，那就必須是它了。那麼你會疑惑為什麼這不是預設的選擇，實際上當使用UIView的動畫方法時，他的確是預設的，但當建立CAAnimation的時候，就需要手動設定它了。

最後還有一個kCAMediaTimingFunctionDefault，它和kCAMediaTimingFunctionEaseInEaseOut很類似，但是加速和減速的過程都稍微有些慢。它和kCAMediaTimingFunctionEaseInEaseOut的區別很難察覺，可能是蘋果覺得它對於隱式動畫來說更適合（然後對UIKit就改變了想法，而是使用kCAMediaTimingFunctionEaseInEaseOut作為預設效果），雖然它的名字說是預設的，但還是要記住當建立顯式的CAAnimation它並不是預設選項（換句話說，預設的圖層行為動畫用kCAMediaTimingFunctionDefault作為它們的計時方法）。

你可以使用一個簡單的測試工程來實驗一下（清單10.1），在運行之前改變緩衝函數的代碼，然後點擊任何地方來觀察圖層是如何通過指定的緩衝移動的。

清單10.1 緩衝函數的簡單測試

 1 @interface ViewController () 2  3 @property (nonatomic, strong) CALayer *colorLayer; 4  5 @end 6  7 @implementation ViewController 8  9 - (void)viewDidLoad10 {11     [super viewDidLoad];12     //create a red layer13     self.colorLayer = [CALayer layer];14     self.colorLayer.frame = CGRectMake(0, 0, 100, 100);15     self.colorLayer.position = CGPointMake(self.view.bounds.size.width/2.0, self.view.bounds.size.height/2.0);16     self.colorLayer.backgroundColor = [UIColor redColor].CGColor;17     [self.view.layer addSublayer:self.colorLayer];18 }19 20 - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event21 {22     //configure the transaction23     [CATransaction begin];24     [CATransaction setAnimationDuration:1.0];25     [CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]];26     //set the position27     self.colorLayer.position = [[touches anyObject] locationInView:self.view];28     //commit transaction29     [CATransaction commit];30 }31 32 @end

View Code

 

##UIView的動畫緩衝

UIKit的動畫也同樣支援這些緩衝方法的使用，儘管文法和常量有些不同，為了改變UIView動畫的緩衝選項，給options參數添加如下常量之一：

1 UIViewAnimationOptionCurveEaseInOut 2 UIViewAnimationOptionCurveEaseIn 3 UIViewAnimationOptionCurveEaseOut 4 UIViewAnimationOptionCurveLinear

 

它們和CAMediaTimingFunction緊密關聯，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

View Code緩衝和主要畫面格動畫

或許你會回想起第八章裡面顏色切換的主要畫面格動畫由於線性變換的原因（見清單8.5）看起來有些奇怪，使得顏色變換非常不自然。為了糾正這點，我們來用更加合適的緩衝方法，例如kCAMediaTimingFunctionEaseIn，給圖層的顏色變化添加一點脈衝效果，讓它更像現實中的一個彩色燈泡。

我們不想給整個動畫過程應用這個效果，我們希望對每個動畫的過程重複這樣的緩衝，於是每次顏色的變換都會有脈衝效果。

CAKeyframeAnimation有一個NSArray類型的timingFunctions屬性，我們可以用它來對每次動畫的步驟指定不同的計時函數。但是指定函數的個數一定要等於keyframes數組的元素個數減一，因為它是描述每一幀之間動畫速度的函數。

在這個例子中，我們自始至終想使用同一個緩衝函數，但我們同樣需要一個函數的數組來告訴動畫不停地重複每個步驟，而不是在整個動畫序列只做一次緩衝，我們簡單地使用包含多個相同函數拷貝的數組就可以了（見清單10.3）。

運行更新後的代碼，你會發現動畫看起來更加自然了。

清單10.3 對CAKeyframeAnimation使用CAMediaTimingFunction

 1 @interface ViewController () 2  3 @property (nonatomic, weak) IBOutlet UIView *layerView; 4 @property (nonatomic, weak) IBOutlet CALayer *colorLayer; 5  6 @end 7  8 @implementation ViewController 9 10 - (void)viewDidLoad11 {12     [super viewDidLoad];13     //create sublayer14     self.colorLayer = [CALayer layer];15     self.colorLayer.frame = CGRectMake(50.0f, 50.0f, 100.0f, 100.0f);16     self.colorLayer.backgroundColor = [UIColor blueColor].CGColor;17     //add it to our view18     [self.layerView.layer addSublayer:self.colorLayer];19 }20 21 - (IBAction)changeColor22 {23     //create a keyframe animation24     CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];25     animation.keyPath = @"backgroundColor";26     animation.duration = 2.0;27     animation.values = @[28                          (__bridge id)[UIColor blueColor].CGColor,29                          (__bridge id)[UIColor redColor].CGColor,30                          (__bridge id)[UIColor greenColor].CGColor,31                          (__bridge id)[UIColor blueColor].CGColor ];32     //add timing function33     CAMediaTimingFunction *fn = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseIn];34     animation.timingFunctions = @[fn, fn, fn];35     //apply animation to layer36     [self.colorLayer addAnimation:animation forKey:nil];37 }38 39 @end

View Code