iOS开发 - 第02篇 - UI进阶 - 13 - 核心动画

实现：幸运转盘

源代码下载地址：点击打开链接

1、CALayer

1.1 基本概念

1> CALayer和UIView的关系：CALayer负责视图中显示的内容和动画；UIView负责监听和响应事件

2> 在iOS中，能看得见摸得着的东西基本上都是UIView，比如一个按钮、一个文本标签、一个文本输入框、一个图标等等，这些都是UIView；

其实UIView之所以能显示在屏幕上，完全是因为它内部的一个图层，在创建UIView对象时，UIView内部会自动创建一个图层(即CALayer对象)，通过UIView的layer属性可以访问这个层

@property(nonatomic,readonly,retain) CALayer *layer;

当UIView需要显示到屏幕上时，会调用drawRect:方法进行绘图，并且会将所有内容绘制在自己的图层上，绘图完毕后，系统会将图层拷贝到屏幕上，于是就完成了UIView的显示，换句话说，UIView本身不具备显示的功能，是它内部的层才有显示功能

3> 通过操作CALayer对象，可以很方便地调整UIView的一些外观属性，比如：阴影、圆角大小、边框宽度和颜色

1.2 基本使用

1> 常用属性

2> UIImageView上面有一个图层CALayer，图层上面有一个contents，专门用来存放图片的，要制作圆形头像效果，可以先设置图层圆角半径，再对contents的进行裁剪即可！

3> CALayer的transform

注：少用KVC的方式来改变transform

2、自定义图层

注1：contents需要传一个id，同时观察其头文件控制需要传一个CGImage (CoreGraphic框架)，把UIImage先转化为CGImage，再桥接成id

注2：关于CALayer

3、position & anchorPoint

4、隐式动画

5、时钟

5.1 界面

5.2 实现思路

1> 搭建界面

2> 创建秒钟CALayer，设置锚点、尺寸、位置、颜色

注1：设置锚点，旋转的时候绕着锚点旋转

注2：在进行旋转的时候不能使用KVC旋转，否则在转到6的位置时会倒转一圈

3> 获取日历对象，获取秒数，计算秒针角度

4> 创建定时器，进行旋转

5> 同理添加分针、时针，注意小角度计算

6、CABasicAnimation

Core Animation，是一组非常强大的动画处理API，使用它能做出非常炫丽的动画效果，Core Animation可以用在Mac OS X和iOS平台，Core Animation的动画执行过程都是在后台操作的，不会阻塞主线程。要注意的是，CoreAnimation是直接作用在CALayer上的，并非UIView。

使用方法：

7、CAKeyPathAnimation

8、图标抖动

9、转场动画

10、动画组

注：核心动画都是假象，不能改变layer的真实属性的值，展示的位置和实际的位置不同，实际位置永远在最开始位置！！！因此如果需要改变控件的位置，最好使用UIView封装的动画！！！核心动画一般使用在转场等场合！！！

11、转盘 --- 重要

11.1 界面

11.2 实现思路

1> 搭建界面

1. 自定义一个转盘WheelView，以后可以直接用

2. 由于转盘的内容固定，采用XIB即可

3. 在XIB中搭建界面(两个UIImageView背景 & 开始选号按钮)

4. 在WheelView中提供类方法从XIB加载View

5. 添加12个按钮，设置锚点来旋转

注1：应在awakeFromNib方法中添加按钮，不能在initWithCoder方法中添加，原因：initWithCoder方法中还不能生成通过连线生成的属性

注2：应该将按钮添加在中间的UIImageView对象中

注3：由于按钮添加在UIImageView中，而UIImageView默认不允许用户交互，因此点击按钮没有反应，事件传递被拦截，需要打开UIImageView的用户交互

注4：在设置按钮Image的时候，进行图片裁剪是按像素进行裁剪，而加载的图片的Retina屏的图片(像素的2倍)，因此裁剪尺寸需要根据[UIScreenmainScreen].scale来改变

注5：此时显示的图片太大，需要对按钮图片进行缩放，修改按钮ImageView的frame属性无用，需要自定义按钮，实现imageRectForContentRect方法

注6：取消highLight

2> 旋转

注1：不能使用核心动画，原因：核心动画都是假象，不能改变layer的真实属性的值，展示的位置和实际的位置不同，实际位置永远在最开始位置！！！

注2：懒加载一个CADisplayLink，定时旋转一定角度

3> 开始选号

不需要和用户交互，使用核心动画即可！

注1：快速旋转核心动画结束后，开启用户交互，并开始慢慢旋转

注2：让选中按钮返回最上面的位置