Fork me on GitHub

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

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添加的viewlayer中。

    1
    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

参考:

坚持原创技术分享,您的支持将鼓励我继续创作!
  • 本文标题: iOS动画(二):核心动画中的基础移动(Swift)
  • 本文作者: AndyRon
  • 发布时间: 2017年09月05日 - 13:04
  • 最后更新: 2018年09月20日 - 02:49
  • 本文链接: http://andyron.com/2017/ios-animation-2.html
  • 版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!