CoreAnimation

Posted Alex_sun

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CoreAnimation相关的知识,希望对你有一定的参考价值。

CoreAnimation备忘

CoreAnimation是专门处理动画的,它可以实现强大炫目的动画功能,Core Animation的动画执行过程都是在后台操作的,不会阻塞主线程。需要注意的是Core Animation作用在CALayer上的,并不是UIView

 

动画常用类/结构图

 

CABasicAnimation -- 实例

        // 创建动画,keyPath是一个路径,代表动画将修改的属性
        let basicAnimation = CABasicAnimation(keyPath: "position")
        let fromPosition = layer?.position
        let toPositon = CGPointMake(200, 200)
        basicAnimation.fromValue = NSValue(CGPoint: fromPosition!)
        basicAnimation.toValue = NSValue(CGPoint: toPositon)
        basicAnimation.duration = 0.5
        basicAnimation.repeatCount = MAXFLOAT
        basicAnimation.removedOnCompletion = false
        basicAnimation.fillMode = kCAFillModeForwards
        basicAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)
        basicAnimation.autoreverses = true
        basicAnimation.beginTime = CACurrentMediaTime() + 5
        
        // 创建动画后 添加到图层上
        layer?.addAnimation(basicAnimation, forKey: nil)    

 属性介绍:

  • fromValue:起点的值。
  • toValue:终点的值,这是一个绝对的值,意思是动画最终会到达这个值。
  • byValue:终点的值,这是一个相对的值,意思以起点为准增加多少值。
  • duration:动画时长。
  • repeatCount:重复次数,如果重复无数次使用 MAXFLOAT。
  • removedOnCompletion:动画结束后,是否删除动画。
  • fillMode:填充模式,当赋值kCAFillModeForwards 并且 removedOnCompletion为false时,动画执行完毕后不会回到初始状态。
  • timingFunction:动画的速度变化,比如:先快后慢,或先慢后快。
  • beginTime:动画开始时间。
  • autoreverses:是否执行逆动画

初始化方法的keypath设置:

  • let basicAnimation = CABasicAnimation(keyPath: "position"):位移动画
  • let basicAnimation = CABasicAnimation(keyPath: "transform.rotation.z"):旋转动画,x,y,z三个轴都可以
  • let basicAnimation = CABasicAnimation(keyPath: "transform.scale"):缩放动画
  • let basicAnimation = CABasicAnimation(keyPath: "alpha"):透明动画

这些只是常用的,更多属性进入父类查看。

 

CAAnimationGroup -- 实例

        // 创建位移动画
        let animation1 = CABasicAnimation(keyPath: "position")
        animation1.byValue = NSValue(CGPoint: CGPointMake(100, 100))
        
        // 创建旋转动画
        let animation2 = CABasicAnimation(keyPath: "transform.rotation.z")
        animation2.toValue = NSNumber(double: M_PI * 2)
        
        // 创建动画组
        let group = CAAnimationGroup()
        // 设置一些属性
        group.duration = 2.0
        group.autoreverses = true
        group.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)
        group.animations = [animation1, animation2]
        group.repeatCount = MAXFLOAT
        
        // 添加动画组
        layer?.addAnimation(group, forKey: nil)

 注意:动画组中的动画是一起执行的。

顺序动画的执行:

    // 1、懒加载 只执行一次,并设置动画代理
    lazy var animations: [CAAnimation] = {
        // 创建位移动画
        let animation1 = CABasicAnimation(keyPath: "position")
        animation1.byValue = NSValue(CGPoint: CGPointMake(100, 100))
        animation1.duration = 1.0
        animation1.removedOnCompletion = false
        animation1.fillMode = kCAFillModeForwards
        animation1.delegate = self
        
        // 创建旋转动画
        let animation2 = CABasicAnimation(keyPath: "transform.rotation.z")
        animation2.toValue = NSNumber(double: M_PI * 2)
        animation2.duration = 1.0
        animation2.removedOnCompletion = false
        animation2.fillMode = kCAFillModeForwards
        animation2.delegate = self

        var array = [animation1, animation2]
        return array
    }()

    // 2、添加第一个动画
    layer?.addAnimation(animations[0], forKey: nil)

    // 3、实现代理方法
    // MARK: 动画代理
    override func animationDidStart(anim: CAAnimation) {
        animations.removeFirst()
    }
    
    override func animationDidStop(anim: CAAnimation, finished flag: Bool) {
        guard let animation = animations.first else { return }
        layer?.addAnimation(animation, forKey: nil)
    }

 

 CAKeyframeAnimation -- 实例

CAKeyframeAnimation-关键帧动画,它有两个重要的属性(二选一):

  • path:CGPathRef对象,默认为nil,顾名思义 当设置path时、动画会按照这个路径执行动画,当设置了values时 这个属性就会被覆盖。
  • values:一个数组,提供关键帧的值(一组),当设置path时 不必设置设个属性。
        // 使用path
        let keyframe = CAKeyframeAnimation(keyPath: "position")
        // 创建路径
        let path = CGPathCreateMutable()
        // 移动到原点
        CGPathMoveToPoint(path, nil, 50, 100)
        // 添加直线路径
        CGPathAddLineToPoint(path, nil, 300, 80)
        CGPathAddLineToPoint(path, nil, 150, 250)
        // 添加曲线
        CGPathAddCurveToPoint(path, nil, 49.0, 200, -100, 0, 150, 150)
        
        keyframe.path = path
        keyframe.duration = 3.0
        
        layer?.addAnimation(keyframe, forKey: nil)

        /* ----------------------------分割线---------------------------- */

        // 使用values
        let keyframe = CAKeyframeAnimation(keyPath: "position")
        // 创建point
        let p1 = layer?.position
        let p2 = CGPointMake(50, 50)
        let p3 = CGPointMake(100, 300)
        let p4 = CGPointMake(150, 150)
        
        // 转换成NSValue
        let v1 = NSValue(CGPoint: p1!)
        let v2 = NSValue(CGPoint: p2)
        let v3 = NSValue(CGPoint: p3)
        let v4 = NSValue(CGPoint: p4)
        
        let values = [v1, v2, v3, v4]
        keyframe.values = values
        keyframe.duration = 4.0
        
        layer?.addAnimation(keyframe, forKey: nil)

 控制每一帧的时间:

算法:总时间 / (总帧数 - 1),也就是说如果指定了3帧、10秒的总时间,10 / (3 - 1) = 5

        // 使用values
        let keyframe = CAKeyframeAnimation(keyPath: "position")
        // 创建point
        let p1 = layer?.position
        let p2 = CGPointMake(50, 50)
        let p3 = CGPointMake(100, 300)
        let p4 = CGPointMake(150, 150)
        
        // 转换成NSValue
        let v1 = NSValue(CGPoint: p1!)
        let v2 = NSValue(CGPoint: p2)
        let v3 = NSValue(CGPoint: p3)
        let v4 = NSValue(CGPoint: p4)
        
        let values = [v1, v2, v3, v4]
        keyframe.values = values
        keyframe.duration = 4.0
        // 取值在0 ~ 1.0之间
        keyframe.keyTimes = [NSNumber(double: 0.0), NSNumber(double: 0.8), NSNumber(double: 1.0), NSNumber(double: 0.2)]
        // 每一帧的计算模式
        keyframe.calculationMode = kCAAnimationLinear
        
        layer?.addAnimation(keyframe, forKey: nil)

 

CATransition -- 实例

        let transition = CATransition()
        transition.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)
        transition.duration = 0.5
        transition.removedOnCompletion = false
        transition.fillMode = kCAFillModeForwards
        // 过渡类型
        transition.type = kCATransitionReveal
        // 过渡方向
        transition.subtype = kCATransitionFromTop
        
        layer?.addAnimation(transition, forKey: nil)
        layer?.backgroundColor = UIColor.blackColor().CGColor

 过渡类型(type):

  • kCATransitionFade:交叉淡化过渡 
  • kCATransitionMoveIn:新视图移到旧视图上面 
  • kCATransitionPush:新视图把旧视图推出去 
  • kCATransitionReveal:将旧视图移开,显示下面的新视图
  • "pageCurl":向上翻一页 
  • "pageUnCurl":向下翻一页 
  • "rippleEffect":滴水效果 
  • "suckEffect":收缩效果,如一块布被抽走 
  • "cube":立方体效果
  • "oglFlip":上下翻转效果

过渡方向(subType):

  • kCATransitionFromLeft:由左向右(默认)
  • kCATransitionFromRight:由右向左
  • kCATransitionFromTop:由下向上
  • kCATransitionFromBottom:由上向下

以上是关于CoreAnimation的主要内容,如果未能解决你的问题,请参考以下文章