真正强大的核心动画（Core Animation）

Core Animation简路径介

• Core Animation，中文翻译为核心动画，它是一组非常强大的动画处理API，使用它能做出非常绚丽的动画效果，而且往往是事半功倍，也就是说，使用少量的代码就可以实现非常强大的功能
• Core Animation可以用在Mac OS X和iOS平台
• Core Animation的动画执行过程都是在后台操作的，不会堵塞主线程
• 需要注意的是：Core Animation是直接作用在CALayer上的，并非UIView

Core Animation的使用步骤

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

CABasicAnimation动画

//1.生成Core Animation（它当中有很多种）
CABasicAnimation *anim = [CABasicAnimation animation];
//2.设置属性（位置属性）
anim.keyPath = @"position.x";
anim.toValue = @300;

注意：在动画完成的时候会自动删除动画，我们要制止，并且将动画停在前面的一个位置（回到原来的位置叫做后面的位置）

//是否删除动画
anim.removeOnCompletion = NO;
//将动画保存到前面的位置(fillMode枚举属性，点进去看一下)
anim.fillMode = @"forwards";

3.添加动画
[self.redView.layer addAnimation:anim forKey:nil];

• 第一个属性：你需要添加的动画名称
• 第二个属性：因为我们以后不止添加一个动画，所以需要给动画一个标识（这里举例子就一个，所以暂时写nil）

CAKeyframeAnimation动画（帧动画）

    //创建动画
    CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
    //设置动画属性
    anim.keyPath = @"transform.rotation";
    anim.values = @[@(angle2Rad(3)),@(angle2Rad(-3)),@(angle2Rad(3))];
    //设置执行次数
    anim.repeatCount = MAXFLOAT;
    //设置执行间隔
    anim.duration = 0.5;
    //添加动画
    [self.imageV.layer addAnimation:anim forKey:nil];

• 此动画可以跟随路径移动

    //创建动画
    CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
    //创建路径
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(10, 10)];
    [path addLineToPoint:CGPointMake(10, 200)];
    //设置属性（路径）
    anim.keyPath = @"position";
    anim.path = path.CGPath;
    //设置动画时间
    anim.duration = 2;
    //添加动画
    [self.imageV.layer addAnimation:anim forKey:nil];

CATransition动画（转场动画）

• 图片的名字从1到3

//转场代码
if (_i==4) {
      _i=1;
  }
    //设置图片
      self.imageV.image = [UIImage imageNamed:[NSString stringWithFormat:@"%d",_i]];
          _i++;
 //转场代码
    //创建转场动画
    CATransition *anim = [CATransition animation];
    //设置动画样式
    anim.type = @"cube";
   //动画时长
    anim.duration =1;
    //添加动画
    [self.imageV.layer addAnimation:anim forKey:nil];

注意：转场动画和转场代码必须在同一个方法中

• 转场动画过度效果
  1.fade：交叉淡化过渡
  2.push：新
  3.moveIn：新视图移到旧视图上面
  4.reveal：将旧视图移开，显示下面的新视图
  5.cube：立方体翻滚效果
  6.oglFlip：上下左右翻转效果
  7.suckEffect：收缩效果，如一块布被抽走
  8.rippleEffect：水滴效果
  9.pageCurl：向上翻页效果
  10.pageUnCurl：向下翻页效果
  11.cameraIrisHollowOpen：相机镜头打开效果
  12.cameraIrisHollowClose：相机镜头关闭效果

CAAnimationGroup动画(动画组)

//创建两个动画
    //第一个动画
    CABasicAnimation *anim1 = [CABasicAnimation animation];
    //设置anim1的属性
    anim1.keyPath = @"transform.scale";
    anim1.toValue = @0.5;
    //第二个动画
    CABasicAnimation *anim2 = [CABasicAnimation animation];
    //设置属性
    anim2.keyPath = @"position.y";
    anim2.toValue = @300;
    //创建动画组
    CAAnimationGroup *group = [CAAnimationGroup animation];
    //将动画添加到动画组中
    group.animations = @[anim1,anim2];
    //设置动画组的属性（让他不是默认情况并且保持在动画后）
    group.removedOnCompletion = NO;
    group.fillMode = kCAFillModeForwards;
    //添加动画组
    [self.imageV.layer addAnimation:group forKey:nil];

• 动画组可以在需要给图片多个动画效果的时候添加在一起，之后统一设置动画时长，动画是否默认情况，保持在动画前或者后的效果，避免了写多条重复代码

属性

调用属性的时候一定要是对象.属性

• 动画执行次数(最大)

repeatCount = MAXFOLAT;

• 动画间隔时长(3S)

duration = 3;

• 自动翻转（怎么去，怎么回来）

autoreverses = YES;

• 动画开始的位置和结束的位置（0到1）

startProgress = 0.2;
endProgress = 0.5;

代理

//动画结束的时候调用

-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
}

在设置属性keypath的时候可能用到的值

可用 Key Path	示意
transform.rotation.x	按x轴旋转的弧度
transform.rotation.y	按y轴旋转的弧度
transform.rotation.z	按z轴旋转的弧度
transform.rotation	按z轴旋转的弧度, 和transform.rotation.z效果一样
transform.scale.x	在x轴按比例放大缩小
transform.scale.y	在y轴按比例放大缩小
transform.scale.z	在z轴按比例放大缩小
transform.scale	整体按比例放大缩小
transform.translation.x	沿x轴平移
transform.translation.y	沿y轴平移
transform.translation.z	沿z轴平移
transform.translation	x,y 坐标均发生改变
transform	CATransform3D 4xbounds4矩阵
bounds	layer大小
position	layer位置
anchorPoint	锚点位置
cornerRadius	圆角大小
zPosition	z轴位置

删除动画

[self.dotLayer removeAllAnimations];

删除路径

[self.path removeAllPoints];

• 注意：通过transform进行的形变，他修改的是frame，并没有修改他的center（中心）