CoreAnimation研究(1)

CoreAnimation研究(1)

demo git地址
关于ios动画，之前只是简单地用过UIView，对于CoreAnimation，大名虽然早就有耳闻，但一直没机会研究。最近因为项目原因，深入接触了下CoreAnimation，真是一入豪门深似海啊！相比于UIView，CoreAnimation的功能实在强大太多（貌似UIView的动画 就是基于CoreAnimation封装的）

基本概念

1. Core Animation是直接作用在CALayer上的跨Mac OS X和iOS平台的动画处理API，Core Animation的动画执行过程都是在后台操作的，不会阻塞主线程。
2. 如果是Xcode6之前的版本，要导入QuartzCore/QuartzCore.h框架（并不存在什么CoreAnimation 框架）

CAAnimation的一些属性：

• duration：动画的持续时间
• repeatCount：重复次数，无限循环可以设置HUGE_VALF或者MAXFLOAT
• repeatDuration：重复时间
  removedOnCompletion：默认为YES，代表动画执行完毕后就从图层上移除，图形会恢复到动画执行前的状态。如果想让图层保持显示动画执行后的状态，那就设置为NO，不过还要设置fillMode为kCAFillModeForwards
• beginTime：可以用来设置动画延迟执行时间，若想延迟2s，就设置为CACurrentMediaTime()+2，CACurrentMediaTime()为图层的当前时间
• timingFunction：速度控制函数，控制动画运行的节奏
• delegate：动画代理
• fillMode决定当前对象在非active时间段的行为。（要想fillMode有效，最好设置removedOnCompletion =
  NO）
• kCAFillModeRemoved 这个是默认值，也就是说当动画开始前和动画结束后，动画对layer都没有影响，动画结束后，layer会恢复到之前的状态
• kCAFillModeForwards 当动画结束后，layer会一直保持着动画最后的状态
• kCAFillModeBackwards 在动画开始前，只需要将动画加入了一个layer，layer便立即进入动画的初始状态并等待动画开始。
• kCAFillModeBoth 这个其实就是上面两个的合成.动画加入后开始之前，layer便处于动画初始状态，动画结束后layer保持动画最后的状态
• CAMediaTimingFunction:速度控制函数
• kCAMediaTimingFunctionLinear（线性）：匀速，给你一个相对静态的感觉
• kCAMediaTimingFunctionEaseIn（渐进）：动画缓慢进入，然后加速离开
• kCAMediaTimingFunctionEaseOut（渐出）：动画全速进入，然后减速的到达目的地

• kCAMediaTimingFunctionEaseInEaseOut（渐进渐出）：动画缓慢的进入，中间加速，然后减速的到达目的地。这个是默认的动画行为。

  基本动画：CABasicAnimation

  属性说明:

• keyPath ：要改变的属性名称
• fromValue：keyPath相应属性的初始值
• toValue：keyPath相应属性的结束值
  一言不合上代码：

        let a = CABasicAnimation();

        a.fromValue = UIColor.red.cgColor;
        a.toValue = UIColor.blue.cgColor;

//        a.keyPath = "backgroundColor";

        a.duration = 3;

//        a.isRemovedOnCompletion = false;
//        a.fillMode = kCAFillModeForwards;

        view.layer.add(a, forKey: "backgroundColor");

关键帧动画:CAKeyframeAnimation

属性说明：

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

        self.view.addSubview(rV);        
        let a = CAKeyframeAnimation();
        a.values = [UIColor.red.cgColor, UIColor.blue.cgColor, UIColor.orange.cgColor]; 
        a.duration = 10;
        a.isRemovedOnCompletion = false;
        a.fillMode = kCAFillModeForwards;
        a.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut); 
        a.calculationMode = kCAAnimationLinear;
        rV.layer.add(a, forKey: "backgroundColor");

动画组:CAAnimationGroup

动画组可以保存一组动画对象，将CAAnimationGroup对象加入层后，组中所有动画对象可以同时并发运行

属性说明：

• animations：用来保存一组动画对象的NSArray

        self.view.addSubview(rV);

        //变色动画
        let aB = CAKeyframeAnimation();
        aB.values = [UIColor.red.cgColor, UIColor.blue.cgColor, UIColor.orange.cgColor];
        aB.isRemovedOnCompletion = false;
        aB.fillMode = kCAFillModeForwards;
        aB.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut);
        aB.keyPath = "backgroundColor";

        //位移动画
        let aM = CAKeyframeAnimation();
        let aMP = CGMutablePath();
        aMP.move(to: CGPoint(x: 20, y: 20));
        aMP.addCurve(to: CGPoint(x: 20, y: 20), control1: CGPoint(x: 160, y: 30), control2: CGPoint(x: 220, y: 220));
        aM.path = aMP;
        aM.isRemovedOnCompletion = false;
        aM.fillMode = kCAFillModeForwards;
        aM.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut);
        aM.rotationMode = "auto";
        aM.keyPath = "position";

        //两个动画添加到一个组里，运行后会看到一个一边变色一边位移的view
        let aG = CAAnimationGroup();
        aG.duration = 10;
        aG.animations = [aB, aM];

        rV.layer.add(aG, forKey: nil);

CATransition:转场动画

CATransition用于做转场动画，能够为层提供移出屏幕和移入屏幕的动画效果。

属性说明：

• type：动画过渡类型
  
  • fade : 交叉淡化过渡
  • push : 新视图把旧视图推出去
  • moveIn: 新视图移到旧视图上面
  • reveal: 将旧视图移开,显示下面的新视图
  • cube : 立方体翻滚效果
  • oglFlip : 上下左右翻转效果
  • suckEffect : 收缩效果，如一块布被抽走
  • rippleEffect: 水滴效果
  • pageCurl : 向上翻页效果
  • pageUnCurl : 向下翻页效果
  • cameraIrisHollowOpen : 相机镜头打开效果
  • cameraIrisHollowClos : 相机镜头关闭效果
• subtype：动画过渡方向
  
  • fromLeft,
  • fromRight,
  • fromTop
  • fromBottom
• startProgress：动画起点(在整体动画的百分比)
• endProgress：动画终点(在整体动画的百分比)

        rV.backgroundColor = UIColor.red;
        self.view.addSubview(rV);

        let t = CATransition();

        t.duration = 3;

        t.type = "cube";

        t.subtype = "fromLeft";

        rV.layer.add(t, forKey: "animation");

        rV.removeFromSuperview();

//        self.performSegue(withIdentifier: "transitionS", sender: self);

        let nV = UIView(frame: CGRect(x: 10, y: 10, width: 40, height: 40));
        nV.backgroundColor = UIColor.blue;

        self.view.addSubview(nV);