[iOS Animation]-CALayer 緩衝一

時間 2019-11-09

原文原文鏈接

緩衝

生活和藝術同樣，最美的永遠是曲線。 -- 愛德華布爾沃 - 利頓git

在第九章「圖層時間」中，咱們討論了動畫時間和CAMediaTiming協議。如今咱們來看一下另外一個和時間相關的機制--所謂的緩衝。Core Animation使用緩衝來使動畫移動更平滑更天然，而不是看起來的那種機械和人工，在這一章咱們將要研究如何對你的動畫控制和自定義緩衝曲線。github

動畫速度

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

velocity = change / time;

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

上面的等式假設了速度在整個動畫過程當中都是恆定不變的（就如同第八章「顯式動畫」的狀況），對於這種恆定速度的動畫咱們稱之爲「線性步調」，並且從技術的角度而言這也是實現動畫最簡單的方式，但也是徹底不真實的一種效果。iview

考慮一個場景，一輛車行駛在必定距離內，它並不會一開始就以60mph的速度行駛，而後到達終點後忽然變成0mph。一是由於須要無限大的加速度（即便是最好的車也不會在0秒內從0跑到60），另外否則的話會幹死全部乘客。在現實中，它會慢慢地加速到全速，而後當它接近終點的時候，它會慢慢地減速，直到最後停下來。函數

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

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

`CAMediaTimingFunction`

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

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

kCAMediaTimingFunctionLinear 
kCAMediaTimingFunctionEaseIn 
kCAMediaTimingFunctionEaseOut 
kCAMediaTimingFunctionEaseInEaseOut
kCAMediaTimingFunctionDefault

kCAMediaTimingFunctionLinear選項建立了一個線性的計時函數，一樣也是CAAnimation的timingFunction屬性爲空時候的默認函數。線性步調對於那些當即加速而且保持勻速到達終點的場景會有意義（例如射出槍膛的子彈），可是默認來講它看起來很奇怪，由於對大多數的動畫來講確實不多用到。

kCAMediaTimingFunctionEaseIn常量建立了一個慢慢加速而後忽然中止的方法。對於以前提到的自由落體的例子來講很適合，或者好比對準一個目標的導彈的發射。

kCAMediaTimingFunctionEaseOut則偏偏相反，它以一個全速開始，而後慢慢減速中止。它有一個削弱的效果，應用的場景好比一扇門慢慢地關上，而不是砰地一聲。

kCAMediaTimingFunctionEaseInEaseOut建立了一個慢慢加速而後再慢慢減速的過程。這是現實世界大多數物體移動的方式，也是大多數動畫來講最好的選擇。若是隻能夠用一種緩衝函數的話，那就必須是它了。那麼你會疑惑爲何這不是默認的選擇，實際上當使用UIView的動畫方法時，他的確是默認的，但當建立CAAnimation的時候，就須要手動設置它了。

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

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

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

@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];
}@end

`UIView`的動畫緩衝

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

UIViewAnimationOptionCurveEaseInOut 
UIViewAnimationOptionCurveEaseIn 
UIViewAnimationOptionCurveEaseOut 
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

緩衝和關鍵幀動畫

或許你會回想起第八章裏面顏色切換的關鍵幀動畫因爲線性變換的緣由（見清單8.5）看起來有些奇怪，使得顏色變換很是不天然。爲了糾正這點，咱們來用更加合適的緩衝方法，例如kCAMediaTimingFunctionEaseIn，給圖層的顏色變化添加一點脈衝效果，讓它更像現實中的一個彩色燈泡。

咱們不想給整個動畫過程應用這個效果，咱們但願對每一個動畫的過程重複這樣的緩衝，因而每次顏色的變換都會有脈衝效果。

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

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

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

清單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