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

非典型技術宅發表於2019-02-28
iOS動畫

就像我們們之前說的，所有的動畫都是在CALayer上面的。所以在做動畫之前我們就要先建立一個CALayer，然後把動畫作用在自己建立的這個CALayer上。如果不知道CALyer是啥，可以看看前面的分享哈。傳輸門：第一篇：iOS動畫系列之一：通過實戰學習CALayer和透視的原理。做一個帶時分秒指標的時鐘動畫(上)

最終實現的效果：

基礎動畫之平移效果
基礎動畫之平移效果

1. 基礎版的平移

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

最終實現的效果：

BasicAnimation.gif
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兩版）

相關文章