Core Animation中类继承关系

简单的移动

  • 新建一个CALayer。

     1
 2
 3
 4
 5
 6
 7
 8
 9
10

      lazy var redLayer: CALayer = {
      return self.createLayer()
  }()
  func createLayer() -> CALayer {
      let redLayer = CALayer()      
      redLayer.position = CGPoint(x: 200, y: 200)
      redLayer.bounds = CGRect(x: 0, y: 0, width: 100, height: 100)
      redLayer.backgroundColor = UIColor.red.cgColor
      return redLayer
  }

  • 把新建的CALayer添加的view的layer中。

    view.layer.addSublayer(redLayer)

  • 遵守协议CAAnimationDelegate

      class BasicPostionViewController: UIViewController, CAAnimationDelegate {

  • 创建动画CABasicAnimation,并添加的CALayer中。

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

      func createCABasicAnimation() -> CABasicAnimation {
      let basicAni = CABasicAnimation()
      // 设置动画属性
      basicAni.keyPath = "position"

      basicAni.fromValue = NSValue.init(cgPoint: CGPoint(x: 0, y: 0))

      basicAni.toValue = NSValue.init(cgPoint: CGPoint(x: 300, y: 300))

      basicAni.duration = 2

      basicAni.fillMode = kCAFillModeForwards

      basicAni.isRemovedOnCompletion = false

      basicAni.delegate = self

      return basicAni
  }

    1
2

          let basicAni = createCABasicAnimation()
      self.redLayer.add(basicAni, forKey: "basicPosition")
    • forKey 是动画对象的名字，只是用来标识，没有特殊意义。

稍微复杂的移动

原理和上面相同，都是先创建CALayer，然后添加CABasicAnimation。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

class BasicPostion2ViewController: UIViewController, CAAnimationDelegate{

    lazy var redLayer: CALayer = {
        return self.createLayer(postion: CGPoint(x: 0, y: 150), backgroundColor: UIColor.red)
    }()
    
    lazy var greenLayer: CALayer = {
        return self.createLayer(postion: CGPoint(x: 0, y: 250), backgroundColor: UIColor.green)
    }()
    
    lazy var cyanLayer: CALayer = {
        return self.createLayer(postion: CGPoint(x: 0, y: 350), backgroundColor: UIColor.cyan)
    }()
    
    lazy var blueLayer: CALayer = {
        return self.createLayer(postion: CGPoint(x: 0, y: 450), backgroundColor: UIColor.blue)
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        redLayer.add(createBasicAnimation(fromValue: CGPoint(x: 0, y: 150), toValue: CGPoint(x: 300, y: 150), timingFunction: kCAMediaTimingFunctionLinear), forKey: "basicAnimation")
        view.layer.addSublayer(redLayer)
        
        greenLayer.add(createBasicAnimation(fromValue: CGPoint(x: 0, y: 250), toValue: CGPoint(x: 300, y: 250), timingFunction: kCAMediaTimingFunctionEaseIn), forKey: "basicAnimation")
        view.layer.addSublayer(greenLayer)
        
        cyanLayer.add(createBasicAnimation(fromValue: CGPoint(x: 0, y: 350), toValue: CGPoint(x: 300, y: 350), timingFunction: kCAMediaTimingFunctionEaseOut), forKey: "basicAnimation")
        view.layer.addSublayer(cyanLayer)
        
        blueLayer.add(createBasicAnimation(fromValue: CGPoint(x: 0, y: 450), toValue: CGPoint(x: 300, y: 450), timingFunction: kCAMediaTimingFunctionEaseInEaseOut), forKey: "basicAnimation")
        view.layer.addSublayer(blueLayer)
    }

    func createLayer(postion: CGPoint, backgroundColor: UIColor) -> CALayer {
        let layer = CALayer()
        layer.position = postion
        layer.bounds = CGRect(x: 0, y: 0, width: 100, height: 100)
        layer.backgroundColor = backgroundColor.cgColor
        return layer
    }
    
    func createBasicAnimation (fromValue: CGPoint, toValue: CGPoint, timingFunction: String) -> CABasicAnimation {
        let basicAni = CABasicAnimation()
        
        basicAni.keyPath = "position"
        
        basicAni.fromValue = fromValue
        
        basicAni.toValue = toValue
        
        basicAni.duration = 2
        
//        basicAni.fillMode = kCAFillModeForwards
        
//        basicAni.isRemovedOnCompletion = false
        // 1
        basicAni.timingFunction = CAMediaTimingFunction(name: timingFunction)
        
        basicAni.delegate = self

        return basicAni
    }

}
  • 1 timingFunction代表移动模式：
    • kCAMediaTimingFunctionLinear（线性）：匀速，给你一个相对静态的感觉
    • kCAMediaTimingFunctionEaseIn（渐进）：动画缓慢进入，然后加速离开
    • kCAMediaTimingFunctionEaseOut（渐出）：动画全速进入，然后减速的到达目的地
    • kCAMediaTimingFunctionEaseInEaseOut（渐进渐出）：动画缓慢的进入，中间加速，然后减速的到达目的地。

代码： 89-Animation/CABasic Animation

参考：