CoreAnimation研究(1)

来源:互联网 发布:曼德拉毁了南非知乎 编辑:程序博客网 时间:2024/05/16 04:56

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);
0 0
原创粉丝点击