iOS动画(二)：核心动画中的基础移动(Swift)

参考：

• 第三篇：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

欢迎您访问我的的微信公众号：欣欣向戎（微信号: andy_ron1587 ）！