參考：

• 第三篇：iOS動畫系列之三：Core Animation。介紹了Core Animation的常用屬性和方法。
• 第四篇：CABasic Animation。iOS動畫系列之四：基礎動畫之平移篇

Core Animation中類繼承關系

簡單的移動

• 新建一個CALayer。

    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中。

    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
    }
  

        let basicAni = createCABasicAnimation()
        self.redLayer.add(basicAni, forKey: "basicPosition")    
  

  • forKey 是動畫對象的名字，只是用來標識，沒有特殊意義。

稍微復雜的移動

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

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