动画之关键帧动画

阅读量

iOS拥有强大的动画特效，今天来说一下动画中的关键帧动画

核心动画类中，关于关键帧动画，主要包含如下三个类

  • CABasicAnimation 基础动画
  • CAKeyframeAnimation 关键帧动画
  • CAAnimationGroup 组合动画

我这里说的 关键帧动画，是指的广义上的一种动画制作方式，并不仅指 CAKeyframeAnimation，CABasicAnimation的实现方式也属于 关键帧动画，而CAAnimationGroup我也放在这里一起说了，它也主要是结合上面两种动画方式。

关键帧

如果我们想实现这么一个动画：一个水杯放在桌子的左边，移动到右边，那么我们实际操作的，只是水杯。
所以动画的实现，只是对运动变化了的部分的处理。

上面的例子，可以变成一个涉及数学和物理的问题：一个杯子初始位置在左边，n秒后匀速运动到右边，那么在每 1/60 秒的时候，这个杯子的位置显然是可以计算出来的了。
所以，我们其实只需要指定一些 关键 信息就能让计算机自己计算出每一帧杯子的位置了：

  • 起始位置，比如一个坐标 (0,0)
  • 结束位置，再比如一个坐标 (100,0)
  • 动画总时间，比如 0.25 秒
  • 匀速运动

这种方式就称之为 关键帧动画。即我们只需要给定几个关键帧的画面信息，关键帧与关键帧之间的过渡帧都将由计算机自动生成。

关于快速入手动画可以看我之前写的这篇文章

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
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
import UIKit

class CABasicAnimationViewController: UIViewController {
    var photoView: UIImageView?
    var photolayer: CALayer?
    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = .white
        for i in 0..<9 {
            let btn = UIButton.init(type: .system)
            self.view.addSubview(btn)
            
            if i > 7 {
                btn.frame = CGRect(x: 25*(i-8) + 80*(i-8), y: 450+30*2, width: 100, height: 30)
            } else if i > 3 {
                btn.frame = CGRect(x: 25*(i-4) + 80*(i-4), y: 450+30, width: 100, height: 30)
            } else {
                btn.frame = CGRect(x: 25*i + 80*i, y: 450, width: 100, height: 30)
            }
            btn.addTarget(self, action: #selector(clickBtn(btn:)), for: .touchUpInside)
            btn.setTitle(["比例缩放","淡入淡出","旋转","背景色变化","内容变化","圆角变化","指定大小变化","位置变化","结束所有动画"][i], for: .normal)
            btn.tag = 100+i
        }
        
        photoView = UIImageView.init(frame: CGRect(x: 50, y: 200, width: 250, height: 140))
        self.view.addSubview(photoView!)
        photoView?.image = UIImage(named: "car.jpg")
        //        photoView?.backgroundColor = .red
        
        //选择角色
        photolayer = CALayer.init()
        photolayer = (photoView?.layer)!
        
    }
    
    @objc func clickBtn(btn: UIButton) {
        switch btn.tag {
        //选择剧本
        case 100:
            //比例缩放
            //x,y同时缩放的
            let basicAnimation = CABasicAnimation(keyPath: "transform.scale")
            basicAnimation.fromValue = 1.0
            basicAnimation.toValue = 1.5
            basicAnimation.repeatCount = MAXFLOAT
            basicAnimation.duration = 2.0
            basicAnimation.autoreverses = true //动画结束时是否执行逆动画
            photolayer?.add(basicAnimation, forKey: "transform")
        case 101:
            //时隐时现，淡入淡出
            let opacityAnimation = CABasicAnimation(keyPath: "opacity")
            opacityAnimation.fromValue = 1.0
            opacityAnimation.toValue = 0.3
            opacityAnimation.repeatCount = 10
            opacityAnimation.duration = 2.0
            opacityAnimation.autoreverses = true
            photolayer?.add(opacityAnimation, forKey: "opacity")
        case 102:
            //旋转
            let rotationAnimation = CABasicAnimation(keyPath: "transform.rotation")
            rotationAnimation.toValue = Double.pi * 2
            rotationAnimation.repeatCount = 10
            rotationAnimation.duration = 2.0
            //            rotationAnimation.timingFunction = CAMediaTimingFunction.init(name: .easeInEaseOut)
            photolayer?.add(rotationAnimation, forKey: "rotation")
        case 103:
            //背景色变化
            let backColorAnimation = CABasicAnimation(keyPath: "backgroundColor")
            backColorAnimation.fromValue = UIColor.blue.cgColor
            backColorAnimation.toValue = UIColor.red.cgColor
            backColorAnimation.repeatCount = 10
            backColorAnimation.duration = 2.0
            backColorAnimation.autoreverses = true
            photolayer?.add(backColorAnimation, forKey: "backColor")
        case 104:
            //内容替换
            let contentAnimation = CABasicAnimation(keyPath: "contents")
            contentAnimation.toValue = UIImage.init(named: "town.jpg")?.cgImage
            contentAnimation.duration = 1.5
            contentAnimation.repeatCount = 3
            contentAnimation.autoreverses = true
            contentAnimation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
            photolayer?.add(contentAnimation, forKey: "contents")
        case 105:
            //圆角变化
            let cornerRadiusAnimation = CABasicAnimation(keyPath: "cornerRadius")
            cornerRadiusAnimation.duration = 1.5
            cornerRadiusAnimation.toValue = 25
            photolayer?.add(cornerRadiusAnimation, forKey: "cornerRadius")
        case 106:
            //bounds只改变大小，中心位置不变，配合position使用
            let frameAnimation = CABasicAnimation(keyPath: "bounds")
            frameAnimation.duration = 1.5
            frameAnimation.repeatCount = 3
            frameAnimation.fromValue = photoView?.frame
            frameAnimation.toValue = CGRect(x: 20, y: 100, width: 40, height: 20)
            frameAnimation.autoreverses = true
            photolayer?.add(frameAnimation, forKey: "bounds")
        case 107:
            //位置变化，position.x/y非图片的中心点
            //            position.x = frame.origin.x + 0.5 * bounds.size.width；
            //            position.y = frame.origin.y + 0.5 * bounds.size.height；
            let positionAnimation = CABasicAnimation(keyPath: "position.x")
            positionAnimation.toValue = 300
            positionAnimation.repeatCount = 10
            positionAnimation.duration = 3.0
            positionAnimation.autoreverses = true
            photolayer?.add(positionAnimation, forKey: "position")
        case 108:
            photolayer?.removeAllAnimations()
        default:
            break
        }
    }

}

CAKeyframeAnimation

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
import UIKit

class CAKeyFrameAnimationViewController: UIViewController {
    var photoView: UIImageView?
    var myLayer: CALayer?
    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = .white
        
        for i in 0..<9 {
            let btn = UIButton.init(type: .system)
            self.view.addSubview(btn)
            
            if i > 7 {
                btn.frame = CGRect(x: 25*(i-8) + 80*(i-8), y: 450+30*2, width: 100, height: 30)
            } else if i > 3 {
                btn.frame = CGRect(x: 25*(i-4) + 80*(i-4), y: 450+30, width: 100, height: 30)
            } else {
                btn.frame = CGRect(x: 25*i + 80*i, y: 450, width: 100, height: 30)
            }
            btn.addTarget(self, action: #selector(clickBtn(btn:)), for: .touchUpInside)
            btn.setTitle(["比例缩放","淡入淡出","旋转","背景色变化","内容变化","圆角变化","指定大小变化","位置变化","结束所有动画"][i], for: .normal)
            btn.tag = 100+i
        }
        
        self.photoView = UIImageView.init(frame: CGRect(x: 50, y: 200, width: 250, height: 140))
        self.view.addSubview(photoView!)
        photoView?.image = UIImage.init(named: "car.jpg")
//        photoView?.backgroundColor = .red
        myLayer = photoView!.layer
        
    }
    

    @objc func clickBtn(btn: UIButton) {
        switch btn.tag {
        //选择剧本
        case 100:
            //比例缩放
            //x,y同时缩放的
            let basicAnimation = CAKeyframeAnimation(keyPath: "transform.scale")
            basicAnimation.values = [1.0,1.5,1.2,2.0,0.6]
            basicAnimation.repeatCount = MAXFLOAT
            basicAnimation.duration = 2.0
            basicAnimation.autoreverses = true //动画结束时是否执行逆动画
            myLayer?.add(basicAnimation, forKey: "transform")
        case 101:
            //时隐时现，淡入淡出
            let opacityAnimation = CAKeyframeAnimation(keyPath: "opacity")
            opacityAnimation.values = [1.0,0.3,0.8,0.2]
            opacityAnimation.repeatCount = 10
            opacityAnimation.duration = 2.0
            opacityAnimation.autoreverses = true
            myLayer?.add(opacityAnimation, forKey: "opacity")
        case 102:
            //旋转
            let rotationAnimation = CAKeyframeAnimation(keyPath: "transform.rotation")
            rotationAnimation.values = [0,Double.pi,Double.pi/2,Double.pi*2,Double.pi,Double.pi/3]
            rotationAnimation.repeatCount = 10
            rotationAnimation.duration = 6.0
            //            rotationAnimation.timingFunction = CAMediaTimingFunction.init(name: .easeInEaseOut)
            //设置每帧的时间间隔，百分比相减的
            rotationAnimation.keyTimes = [0,0.1,0.3,0.4,0.9,1]
            myLayer?.add(rotationAnimation, forKey: "rotation")
        case 103:
            //背景色变化
            let backColorAnimation = CAKeyframeAnimation(keyPath: "backgroundColor")
            backColorAnimation.values = [UIColor.red.cgColor,UIColor.blue.cgColor,UIColor.green.cgColor,UIColor.white.cgColor,UIColor.black.cgColor]
            backColorAnimation.repeatCount = 10
            backColorAnimation.duration = 3.0
            backColorAnimation.autoreverses = true
            myLayer?.add(backColorAnimation, forKey: "backColor")
        case 104:
            //内容替换
            let keyFrameAnimation = CAKeyframeAnimation(keyPath: "contents")
            let oneImage = UIImage.init(named: "car.jpg")?.cgImage
            let twoImage = UIImage.init(named: "green.jpg")?.cgImage
            let threeImage = UIImage.init(named: "town.jpg")?.cgImage
            keyFrameAnimation.values = [oneImage!,twoImage!,threeImage!]
            keyFrameAnimation.duration = 6.0
            keyFrameAnimation.repeatCount = 10
            keyFrameAnimation.timingFunctions = [.init(name: .easeInEaseOut)]
            myLayer?.add(keyFrameAnimation, forKey: "contents")
        case 105:
            //圆角变化
            let cornerRadiusAnimation = CABasicAnimation(keyPath: "cornerRadius")
            cornerRadiusAnimation.duration = 1.5
            cornerRadiusAnimation.toValue = 25
//            photolayer?.add(cornerRadiusAnimation, forKey: "cornerRadius")
        case 106:
            //bounds只改变大小，中心位置不变，配合position使用
            let frameAnimation = CAKeyframeAnimation(keyPath: "bounds")
            frameAnimation.duration = 1.5
            frameAnimation.repeatCount = 3
            frameAnimation.values = [CGRect(x: 20, y: 100, width: 40, height: 20), CGRect(x: 20, y: 100, width: 200, height: 50), CGRect(x: 20, y: 100, width: 100, height: 100)]
            frameAnimation.autoreverses = true
            myLayer?.add(frameAnimation, forKey: "bounds")
        case 107:
            //位置变化，position.x/y非图片的中心点
            //            position.x = frame.origin.x + 0.5 * bounds.size.width；
            //            position.y = frame.origin.y + 0.5 * bounds.size.height；
            let positionAnimation = CAKeyframeAnimation(keyPath: "position")
            positionAnimation.values = [CGPoint(x: 30, y: 70),CGPoint(x: 80, y: 90),CGPoint(x: 50, y: 150),CGPoint(x: 70, y: 60),CGPoint(x: 220, y: 90)]
            positionAnimation.repeatCount = 10
            positionAnimation.duration = 3.0
            positionAnimation.autoreverses = true
            myLayer?.add(positionAnimation, forKey: "position")
        case 108:
            myLayer?.removeAllAnimations()
        default:
            break
        }
    }

}

CAAnimationGroup

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
import UIKit

class CAAnimationGroupViewController: UIViewController {
    var myLayer: CALayer?
    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = .white
        
        let photoView = UIImageView.init(frame: CGRect(x: 50, y: 200, width: 250, height: 140))
        photoView.image = UIImage.init(named: "car.jpg")
        self.view.addSubview(photoView)
        
        myLayer = photoView.layer
    }
    
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        //旋转
        let rotaitonAnimation = CABasicAnimation(keyPath: "transform.rotation")
        rotaitonAnimation.fromValue = 0
        rotaitonAnimation.toValue = Double.pi * 2
//        rotaitonAnimation.byValue = 0
//        rotaitonAnimation.duration = 4.0
//        rotaitonAnimation.autoreverses = true
//        rotaitonAnimation.isRemovedOnCompletion = false
//        rotaitonAnimation.fillMode = .forwards
        
        //缩放
        let scaleAnimation = CAKeyframeAnimation(keyPath: "transform.scale")
        scaleAnimation.values = [1.0,1.5,1.0] //这里用CABasicAnimation的话，配合group使用就会出问题，无法单独设置autoreverses，0.0
//        scaleAnimation.fromValue = 1.0
//        scaleAnimation.toValue = 1.5
////        scaleAnimation.duration = 4
////        scaleAnimation.repeatCount = 4
//        scaleAnimation.autoreverses = true
        
        //按多个点移动
        let moveAnimation = CAKeyframeAnimation(keyPath: "position")
        moveAnimation.values = [CGPoint(x: 150, y: 200), CGPoint(x: 150, y: 350), CGPoint(x: 60, y: 290), CGPoint(x: 50, y: 200)]
//        moveAnimation.duration = 4.0
        
        let groupAnimation = CAAnimationGroup()
        groupAnimation.animations = [rotaitonAnimation,scaleAnimation,moveAnimation]
        groupAnimation.duration = 4
        groupAnimation.repeatCount = 4
        groupAnimation.isRemovedOnCompletion = false
        groupAnimation.fillMode = .forwards
//        groupAnimation.autoreverses = true
        myLayer?.add(groupAnimation, forKey: "group")
    }

}

最后

具体代码较为简单，细节不多说了，提一下关于关键帧动画类对象初始化时候的keyPath，该属性是根据CALayer类的属性来的，所以需要什么属性可以去CALayer类中查找。

在这里列一下常用属性如下：

值 说明 使用形式
transform.scale 比例转化 @(0.8)
transform.scale.x 宽的比例 @(0.8)
transform.scale.y 高的比例 @(0.8)
transform.rotation.x 围绕x轴旋转 @(M_PI)
transform.rotation.y 围绕y轴旋转 @(M_PI)
transform.rotation.z 围绕z轴旋转 @(M_PI)
cornerRadius 圆角的设置 @(50)
backgroundColor 背景颜色的变化 (id)[UIColor purpleColor].CGColor
bounds 大小，中心不变 [NSValue valueWithCGRect:CGRectMake(0, 0, 200, 200)];
position 位置(中心点的改变) [NSValue valueWithCGPoint:CGPointMake(300, 300)];
contents 内容，比如UIImageView的图片 imageAnima.toValue = (id)[UIImage imageNamed:@”to”].CGImage;
opacity 透明度 @(0.7)
contentsRect.size.width 横向拉伸缩放 @(0.4)最好是0~1之间的

fillMode属性：

  • kCAFillModeRemoved 设置为该值，动画将在设置的 beginTime 开始执行（如没有设置beginTime属性，则动画立即执行），动画执行完成后将会layer的改变恢复原状。
  • kCAFillModeForwards 设置为该值，动画即使之后layer的状态将保持在动画的最后一帧，而removedOnCompletion的默认属性值是 YES，所以为了使动画结束之后layer保持结束状态，应将removedOnCompletion设置为NO。
  • kCAFillModeBackwards 设置为该值，将会立即执行动画的第一帧，不论是否设置了 beginTime属性。观察发现，设置该值，刚开始视图不见，还不知道应用在哪里。
  • kCAFillModeBoth 该值是 kCAFillModeForwards 和 kCAFillModeBackwards的组合状态

参考文章

解析iOS动画原理与实现

iOS核心动画高级技巧

赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码
本站总访问量次

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

<br><br>目前就职于比心陪练<br>iOS开发<br><br>能力一般，水平有限<br>待秋实果茂，与君共勉。