实现:幸运转盘
源代码下载地址:点击打开链接
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:让选中按钮返回最上面的位置