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两版）