參考:
簡單的移動
-
新建一個
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)
-
遵守協(xié)議
CAAnimationDelegate
class BasicPostionViewController: UIViewController, CAAnimationDelegate {
-
創(chuàng)建動畫
CABasicAnimation
,并添加的CALayer
中秋忙。func createCABasicAnimation() -> CABasicAnimation { let basicAni = CABasicAnimation() // 設(shè)置動畫屬性 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 是動畫對象的名字,只是用來標(biāo)識构舟,沒有特殊意義灰追。
稍微復(fù)雜的移動
原理和上面相同,都是先創(chuàng)建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
(線性):勻速,給你一個相對靜態(tài)的感覺 -
kCAMediaTimingFunctionEaseIn
(漸進(jìn)):動畫緩慢進(jìn)入努咐,然后加速離開 -
kCAMediaTimingFunctionEaseOut
(漸出):動畫全速進(jìn)入苦蒿,然后減速的到達(dá)目的地 -
kCAMediaTimingFunctionEaseInEaseOut
(漸進(jìn)漸出):動畫緩慢的進(jìn)入,中間加速渗稍,然后減速的到達(dá)目的地佩迟。
-