動畫速度 動畫實際上就是一段時間內的變化,這就暗示了變化一定是隨著某個特定的速率進行。速率由以下公式計算而來: 這裡的變化可以指的是一個物體移動的距離,時間指動畫持續的時長,用這樣的一個移動可以更加形象的描述(比如position和bounds屬性的動畫),但實際上它應用於任意可以做動畫的屬性(比如 ...
動畫速度
動畫實際上就是一段時間內的變化,這就暗示了變化一定是隨著某個特定的速率進行。速率由以下公式計算而來:
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 kCAMediaTimingFunctionEaseInEaseOut 5 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)viewDidLoad 10 { 11 [super viewDidLoad]; 12 //create a red layer 13 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 *)event 21 { 22 //configure the transaction 23 [CATransaction begin]; 24 [CATransaction setAnimationDuration:1.0]; 25 [CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]]; 26 //set the position 27 self.colorLayer.position = [[touches anyObject] locationInView:self.view]; 28 //commit transaction 29 [CATransaction commit]; 30 } 31 32 @endView 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]; } @endView 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)viewDidLoad 11 { 12 [super viewDidLoad]; 13 //create sublayer 14 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 view 18 [self.layerView.layer addSublayer:self.colorLayer]; 19 } 20 21 - (IBAction)changeColor 22 { 23 //create a keyframe animation 24 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 function 33 CAMediaTimingFunction *fn = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseIn]; 34 animation.timingFunctions = @[fn, fn, fn]; 35 //apply animation to layer 36 [self.colorLayer addAnimation:animation forKey:nil]; 37 } 38 39 @endView Code