iOS動畫系列之四：基礎動畫之平移篇

就像我們以前說的，全部的動畫都是在CALayer上面的。因此在作動畫以前咱們就要先創建一個CALayer，而後把動畫做用在本身建立的這個CALayer上。若是不知道CALyer是啥，能夠看看前面的分享哈。傳輸門：第一篇：iOS動畫系列之一：經過實戰學習CALayer和透視的原理。作一個帶時分秒指針的時鐘動畫(上)

最終實現的效果：

基礎動畫之平移效果

1. 基礎版的平移

這裏重點是爲了演示fromValue／toValue 、 設置layer的Position位置、實現代理方法裏面設置position的區別。

最終實現的效果：

BasicAnimation.gif

步驟以下：
1, 建立CALayer。
2, 設置CALayer的位置、大小、背景顏色。
3, 將自定義的CALayer添加到主視圖的view上面。
4, 實例化一個CABasicAnimation對象。
5, 設置動畫屬性爲平移。
6, 設置動畫的起始位置，從哪裏到哪裏。
7，設置動畫的持續時間、填充模式、重複次數、設置代理。
8, 將動畫添加到須要做用的CALayer上面。
9, 實現<CAAnimationDelegate>的代理方法：動畫開始時調用的方法、動畫結束時調用的方法。

//遵照動畫的代理協議
@interface STBasicPositionViewController ()<CAAnimationDelegate>
@property(weak,nonatomic)CALayer * redLayer;

@end

@implementation STBasicPositionViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    //建立CALayer
    CALayer *redLayer = [CALayer layer];

    //設置位置和大小
    redLayer.position = CGPointMake(200, 200);
    redLayer.bounds = CGRectMake(0, 0, 100, 100);


    //設置背景顏色
    redLayer.backgroundColor = [UIColor redColor].CGColor;

    //把layer添加到UIView的layer上
    [self.view.layer addSublayer:redLayer];

    self.redLayer = redLayer;


    /*------------開始設置動畫------------------------*/

    //建立動畫對象
    CABasicAnimation *basicAni = [CABasicAnimation animation];

    //設置動畫屬性
    basicAni.keyPath = @"position";

    //設置動畫的起始位置。也就是動畫從哪裏到哪裏
    basicAni.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, 0)];

    //動畫結束後，layer所在的位置
    basicAni.toValue = [NSValue valueWithCGPoint:CGPointMake(300, 300)];


    //動畫持續時間
    basicAni.duration = 2;

    //動畫填充模式
    basicAni.fillMode = kCAFillModeForwards;

    //動畫完成不刪除
    basicAni.removedOnCompletion = NO;

    //xcode8.0以後須要遵照代理協議
    basicAni.delegate = self;

    //把動畫添加到要做用的Layer上面
    [self.redLayer addAnimation:basicAni forKey:nil];

}


#pragma 實現代理協議的方法

//動畫開始的時候調用
- (void)animationDidStart:(CAAnimation *)anim{

    self.redLayer.position = CGPointMake(300, 100);

}

//動畫結束的時候調用
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{

    self.redLayer.position = CGPointMake(300, 400);
}


@end複製代碼

2. 建立不一樣速度控制的動畫

上面代碼裏面咱們看到了有一些莫名其妙出來的字符串，例如在設置動畫屬性的時候出來的:

//設置動畫屬性
    basicAni.keyPath = @"position";

    //動畫填充模式
    basicAni.fillMode = kCAFillModeForwards;複製代碼

這些屬性，在前一篇很枯燥的分享裏面有提到。有須要的童鞋能夠點進去看成字典翻一下。也沒有啥記憶的必要性，須要的時候查一下，須要的時候查一下就行了。傳輸門：第三篇：iOS動畫系列之三：Core Animation。介紹了Core Animation的經常使用屬性和方法。

速度控制一共有四種模式：

kCAMediaTimingFunctionLinear（線性）：勻速，給你一個相對靜態的感受
kCAMediaTimingFunctionEaseIn（漸進）：動畫緩慢進入，而後加速離開
kCAMediaTimingFunctionEaseOut（漸出）：動畫全速進入，而後減速的到達目的地
kCAMediaTimingFunctionEaseInEaseOut（漸進漸出）：動畫緩慢的進入，中間加速，而後減速的到達目的地。這個是默認的動畫行爲。

2.1 抽取建立Layer及動畫的公共方法

爲了可以偷點懶，因此抽取了公共的方法。能夠很方便的建立Layer以及動畫。哈哈，本宅胖要是不懶就不會這麼胖了。

#pragma 抽取建立動畫及Layer的公共方法

//建立CALayer
- (CALayer *)createLayerWithPosition:(CGPoint)position backgroundColor:(UIColor *)backgroundColor{
    //建立CALayer
    CALayer *layer = [CALayer layer];

    //設置位置和大小
    layer.position = position;
    layer.bounds = CGRectMake(0, 0, 100, 100);


    //設置背景顏色
    layer.backgroundColor = backgroundColor.CGColor;

    //把layer添加到UIView的layer上
    [self.view.layer addSublayer:layer];

    return layer;
}

//建立動畫
- (CABasicAnimation *)createBasicAnimationWithFromValue:(CGPoint)fromValue toValue:(CGPoint)toValue timingFunction:(NSString *)timingFunction{
    //建立動畫對象
    CABasicAnimation *basicAni = [CABasicAnimation animation];

    //設置動畫屬性
    basicAni.keyPath = @"position";

    //設置動畫的起始位置。也就是動畫從哪裏到哪裏
    basicAni.fromValue = [NSValue valueWithCGPoint:fromValue];

    //動畫結束後，layer所在的位置
    basicAni.toValue = [NSValue valueWithCGPoint:toValue];

    //動畫持續時間
    basicAni.duration = 2;

    //動畫重複次數
    basicAni.repeatCount = CGFLOAT_MAX;

    //xcode8.0以後須要遵照代理協議
    basicAni.delegate = self;

    basicAni.timingFunction = [CAMediaTimingFunction functionWithName:timingFunction];

    return basicAni;
}複製代碼

2.2 建立Layer和動畫

這裏咱們只建立一個爲例。

//    建立紅色線性運動的Layer
    self.redLayer = [self createLayerWithPosition:CGPointMake(0, 150) backgroundColor:[UIColor redColor]];
    [self.redLayer addAnimation:[self createBasicAnimationWithFromValue:CGPointMake(0, 150) toValue:CGPointMake(300, 150) timingFunction:kCAMediaTimingFunctionLinear] forKey:@"linear"];複製代碼

有朋友可能發現了，爲啥添加動畫的時候後面的forKey怎麼不是以前的nil了呢？
這裏添加一個key值，其實是爲這個動畫對象起了一個名字，經過key值，能夠很方便的取到這個動畫對象

2.3 移除動畫

動畫播放完成以後，咱們經過key值將這個動畫移除掉。
這個方法固然是在動畫結束的時候調用最合適，否則動畫還沒放完就移除了豈不是開天窗啦～
CAAnimationDelegate這個裏面的代理方法終於起到做用了。

//動畫結束的時候調用
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
    [self.redLayer removeAnimationForKey:@"linear"];

    [self.blueLayer removeAnimationForKey:@"easeIn"];

    [self.grayLayer removeAnimationForKey:@"easeOut"];

    [self.greenLayer removeAnimationForKey:@"easeInAndEaseOut"];

}複製代碼

3. Swift版本的部分差別

Swift版本幾乎和OC的如出一轍。略有不一樣的是，swift在加載layer的時候，咱們使用了懶加載的方式。也就是在使用的時候纔去建立這個layer。

源代碼也放在了碼雲上面。

//MARK: - 懶加載

    private lazy var redLayer: CALayer = {
        let layer = self.createLayer(position: CGPoint(x: 0, y: 150), backgroundColor: UIColor.red)

        return layer
    }()複製代碼

今天就到這裏啦。看樣子宏圖偉業打算一篇寫完的CABasic Animation是沒戲啦。下一篇文章寫縮放這些的吧。任性的技術宅。哈哈～

喜歡的話就點個讚唄，或者賞俺點口糧。麼麼噠～愛大家～

OC和Swift的下載地址以下：
git.oschina.net/atypical/CA…

iOS實踐：CABasic-Animation（OC和Swift兩版）