核心动画 (Core Animation)

• 如果不是xcode5之后的版本，使用它需要先添加QuartzCore.framework和引入对应的框架<QuartzCore/QuartzCore.h>
• 开发步骤:
  • 1.首先得有CALayer
  • 2.初始化一个CAAnimation对象，并设置一些动画相关属性
  • 3.通过调用CALayer的addAnimation:forKey:方法，增加CAAnimation对象到CALayer中，这样就能开始执行动画了
  • 4.通过调用CALayer的removeAnimationForKey:方法可以停止CALayer中的动画

CALayer上动画的暂停和恢复

OC语法

#pragma mark 暂停CALayer的动画
-(void)pauseLayer:(CALayer*)layer
{
    CFTimeInterval pausedTime = [layer convertTime:CACurrentMediaTime() fromLayer:nil];

    // 让CALayer的时间停止走动
      layer.speed = 0.0;
    // 让CALayer的时间停留在pausedTime这个时刻
    layer.timeOffset = pausedTime;
}

#pragma mark 恢复CALayer的动画
-(void)resumeLayer:(CALayer*)layer
{
    CFTimeInterval pausedTime = layer.timeOffset;
    // 1. 让CALayer的时间继续行走
      layer.speed = 1.0;
    // 2. 取消上次记录的停留时刻
      layer.timeOffset = 0.0;
    // 3. 取消上次设置的时间
      layer.beginTime = 0.0;
    // 4. 计算暂停的时间(这里也可以用CACurrentMediaTime()-pausedTime)
    CFTimeInterval timeSincePause = [layer convertTime:CACurrentMediaTime() fromLayer:nil] - pausedTime;
    // 5. 设置相对于父坐标系的开始时间(往后退timeSincePause)
      layer.beginTime = timeSincePause;
}

swift语法

import UIKit

extension CALayer {
    func pauseAnimation() {
        let pauseTime = convertTime(CACurrentMediaTime(), fromLayer: nil)
        speed = 0.0
        timeOffset = pauseTime
    }

    func resumeAnimation() {
        // 1.取出时间
        let pauseTime = timeOffset

        // 2.设置动画的属性
        speed = 1.0
        timeOffset = 0.0
        beginTime = 0.0

        // 3.设置开始动画
        let startTime = convertTime(CACurrentMediaTime(), fromLayer: nil) - pauseTime
        beginTime = startTime
    }
}

CAKeyframeAnimation 的简单使用

• 关键帧动画，也是CAPropertyAnimation的子类，与CABasicAnimation的区别是：
  CABasicAnimation只能从一个数值（fromValue）变到另一个数值（toValue），而CAKeyframeAnimation会使用一个NSArray保存这些数值

• 属性说明：

  • values：上述的NSArray对象。里面的元素称为“关键帧”(keyframe)。动画对象会在指定的时间（duration）内，依次显示values数组中的每一个关键帧
  • path：可以设置一个CGPathRef、CGMutablePathRef，让图层按照路径轨迹移动。path只对CALayer的anchorPoint和position起作用。如果设置了path，那么values将被忽略
  • keyTimes：可以为对应的关键帧指定对应的时间点，其取值范围为0到1.0，keyTimes中的每一个时间值都对应values中的每一帧。如果没有设置keyTimes，各个关键帧的时间是平分的

• CABasicAnimation可看做是只有2个关键帧的CAKeyframeAnimation

示例代码

- (NSArray *)fishArray {

    if (_fishArray == nil) {

        //加载图片
        NSMutableArray *tempArray = [NSMutableArray array];
        for (int i= 0; i < 10; i++) {
            NSString *name = [NSString stringWithFormat:@"fish%d",i];
            UIImage *image = [UIImage imageNamed:name];
            [tempArray addObject:image];
        }
        _fishArray = tempArray;
    }
    return _fishArray;
}


- (void)viewDidLoad {
    [super viewDidLoad];

    // 创建背景图片
    self.view.layer.contents = (id)[UIImage imageNamed:@"bg"].CGImage;

    //创建一个layer
    CALayer *fishL = [CALayer layer];
    fishL.frame = CGRectMake(100, 288, 89, 40);
    fishL.contents = (id)[UIImage imageNamed:@"fish0"].CGImage;
    [self.view.layer addSublayer:fishL];
    self.fishL = fishL;

    [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(change) userInfo:nil repeats:YES];



}

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {

    //添加动画
    CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
    anim.keyPath = @"position";

    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(100, 288)];
    [path addLineToPoint:CGPointMake(100, 100)];
    [path addQuadCurveToPoint:CGPointMake(300, 400) controlPoint:CGPointMake(300, 20)];
    [path addLineToPoint:CGPointMake(100, 288)];
    //根据一个路径做动画
    anim.path = path.CGPath;
    //设置旋转模式
//    anim.rotationMode = @"autoReverse";
    anim.rotationMode = kCAAnimationRotateAutoReverse;
    //设置时间模型
    anim.calculationMode = @"cubicPaced";

    anim.repeatCount = HUGE;

    anim.duration = 5;

    //添加动画
    [self.fishL addAnimation:anim forKey:@"fish"];


}

static int _fishIndex = 0;
- (void)change {
    _fishIndex++;
    if (_fishIndex == 10) {
        _fishIndex = 0;
    }
    UIImage *image = self.fishArray[_fishIndex];
    self.fishL.contents = (id)image.CGImage;
}