CAAnimation(七) 利用CATransaction完成动画平滑过度

任意值动画的平滑需求

在上文利用SubLayer完成线性动画中我们提到了可以使用SubLayer完成线性动画，主要的好处是

  1. 不用手动去处理动画PresentTree的控制(避免闪烁)
  2. 不用考虑动画的中间状态(不用考虑动画过程)

以下是一个相机Capture按键的的需求

用户操作 动画状态
按下Press 按键缩小
未抬起Hold 按键缩小到最小值保持尺寸
抬起Trick 按键放大，并且开始Loading动画
拍摄Loading 按键尺寸在最大和最小值之间过度
拍摄完成 无论按键处于哪个过程，马上返回原始尺寸

平滑动画面临的问题

这里最难处理的就是，在拍摄完成时，按键的动画 有可能处于 大—>小 也有可能处于 小—>大 这里需要根据当前的Present Tree处于哪个过程来决定

  1. 大—>小: 此时需要马上停止动画，返回最大的尺寸
  2. 小—>大: 此时需要继续执行动画到最大尺寸

如果采用雷达动画中的Property Animation 我们很难去界定动画的 fromValue

根据Property的动画原理可以知道当前的显示由PresentTree决定，网上的回答都提到了该方法

但是上文也提到了两个不可避免的问题

  1. 通过 PresentLayer 拿到当前的显示值很难准确定位
  2. 如何控制剩余的动画时间

根据面临的问题下文给出 CATransaction解决方案 以及 失败的 Property的尝试

创建一个自定义的控件

函数 目的
touchesBegan 在开始触摸时进入hold状态
touchesEnded 在触摸结束时，进入摄像状态，并且尝试返回normal状态
interrupt 无论动画处于何种状态，都打断动画返回normal状态 
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
class CaptureButton: UIControl {

    let capture = CaptureLayer(color: nil)

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.layer.addSublayer(capture)
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        self.layer.addSublayer(capture)
    }

    public func interrupt() {
        capture.shooting = false
        capture.normalState()
    }

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        capture.holdState()
    }

    override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
        capture.shooting = true
        capture.normalState()
    }
}

CATransaction解决方案

根据文章隐式动画的原理，注意completion的书写顺序，可以完成两个状态的动画控制 对比Property动画明显可以发现控制逻辑更加简单

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
class CaptureLayer: CALayer {

    private let backgroundLayer: CALayer = CALayer()
    private let holdLayer: CALayer = CALayer()
    public var shooting: Bool = false

    convenience init(color: UIColor?) {
        self.init()
        self.frame = CGRect(x: 0, y: 0, width: 50, height: 50)
        self.addSublayer(backgroundLayer)
        backgroundLayer.addSublayer(holdLayer)
        //
        backgroundLayer.backgroundColor = UIColor.purple.cgColor
        backgroundLayer.cornerRadius = 25
        backgroundLayer.frame = self.bounds
        //
        holdLayer.backgroundColor = color?.cgColor ?? UIColor.yellow.cgColor
        holdLayer.cornerRadius = 20
        holdLayer.bounds = CGRect(x: 0, y: 0, width: 40, height: 40)
        holdLayer.position = backgroundLayer.position

    }

    //SubLayer
    public func normalState() {
        CATransaction.begin()
        if shooting {
            CATransaction.setCompletionBlock({
                self.holdState()
            })
        }
        CATransaction.setAnimationDuration(1)
        backgroundLayer.opacity = 1
        backgroundLayer.transform = CATransform3DIdentity

        CATransaction.commit()
    }

    public func holdState() {
        CATransaction.begin()
        if shooting {
            CATransaction.setCompletionBlock({
                self.normalState()
            })
        }
        CATransaction.setAnimationDuration(1)
        backgroundLayer.opacity = 0.5
        backgroundLayer.transform = CATransform3DScale(CATransform3DIdentity, 0.5, 0.5, 1.0)
        CATransaction.commit()
    }

}

Property的尝试(失败，如果谁能找到解决方法希望留言)

使用Property动画我们明显可以发现，由于AnimateGroup的创建，我们明显需要更多的代码来控制逻辑

并且在 interrupt 函数触发时，很难控制动画的闪烁效果

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
class CaptureProperty: UIControl, CAAnimationDelegate {

    private let backgroundLayer: CALayer = CALayer()
    private let holdLayer: CALayer = CALayer()
    public var shooting: Bool = false

    private let normalAnim: CAAnimationGroup = CAAnimationGroup()
    private let holdAnim: CAAnimationGroup = CAAnimationGroup()


    convenience init(color: UIColor?) {
        self.init(frame:  CGRect(x: 100, y: 100, width: 50, height: 50))
        self.layer.addSublayer(backgroundLayer)
        self.layer.addSublayer(holdLayer)
        //
        backgroundLayer.backgroundColor = UIColor.purple.cgColor
        backgroundLayer.cornerRadius = 25
        backgroundLayer.frame = self.bounds
        //
        holdLayer.backgroundColor = color?.cgColor ?? UIColor.yellow.cgColor
        holdLayer.cornerRadius = 20
        holdLayer.bounds = CGRect(x: 0, y: 0, width: 40, height: 40)
        holdLayer.position = backgroundLayer.position
        //
        normalAnimation(group: normalAnim)
        holdAnimation(group: holdAnim)

    }


    public func normalState() {
        self.layer.add(normalAnim, forKey: "Anim")
    }

    public func holdState() {
        self.layer.add(holdAnim, forKey: "Anim")
    }


    public func normalAnimation(group: CAAnimationGroup) {

        let scale: CABasicAnimation = CABasicAnimation(keyPath: "transform.scale.xy")
        let opcity: CABasicAnimation = CABasicAnimation(keyPath: "opacity")


        scale.toValue = 1.0
        opcity.toValue = 1.0

        group.animations = [scale,opcity]
        group.duration = 1.0
        group.delegate = self
        group.fillMode = kCAFillModeForwards
        group.isRemovedOnCompletion = false
    }

    public func holdAnimation(group: CAAnimationGroup) {

        let scale: CABasicAnimation = CABasicAnimation(keyPath: "transform.scale.xy")
        let opcity: CABasicAnimation = CABasicAnimation(keyPath: "opacity")

        scale.toValue = 0.5
        opcity.toValue = 0.5

        group.animations = [scale,opcity]
        group.duration = 1.0
        group.delegate = self
        group.fillMode = kCAFillModeForwards
        group.isRemovedOnCompletion = false
    }

    func animationDidStop(_ anim: CAAnimation, finished flag: Bool) {
        let group:CAAnimationGroup = (anim as! CAAnimationGroup)
        if (group.animations?.elementsEqual(holdAnim.animations!))! {
            self.layer.opacity = 0.5
            self.layer.transform = CATransform3DScale(CATransform3DIdentity, 0.5, 0.5, 1.0)
            if shooting {
                self.layer.add(normalAnim, forKey: "Anim")
            }
        }else if (group.animations?.elementsEqual(normalAnim.animations!))!  {
            self.layer.opacity = 1
            self.layer.transform = CATransform3DIdentity
            if shooting {
                self.layer.add(holdAnim, forKey: "Anim")
            }
        }
    }

    public func interrupt() {
        self.shooting = false

        let group: CAAnimationGroup = CAAnimationGroup()
        let scale: CABasicAnimation = CABasicAnimation(keyPath: "transform")
        let opcity: CABasicAnimation = CABasicAnimation(keyPath: "opacity")

        scale.fromValue = self.layer.presentation()?.transform
        opcity.fromValue = self.layer.presentation()?.opacity
        scale.toValue = 1.0
        opcity.toValue = 1.0

        group.animations = [scale,opcity]
        group.duration = 1.0
        group.fillMode = kCAFillModeForwards
        group.isRemovedOnCompletion = false
        self.layer.add(group, forKey: "Anim")

    }

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        holdState()
    }

    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {

    }

    override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
        shooting = true
        normalState()
    }
}

赏

请问老板还招人么(/ω＼)

支付宝
微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

我写的，大概率是错的。。。。。