1.搭建界面
把转盘View给封装起来. 由于界面是固定不变的,可以弄一个Xib展示界面.
外界使用时直接来一个类方法直接调用.
-(void)awakeFromNib {
self.contentV.userInteractionEnabled = YES;
//添加转盘的按钮
CGFloat btnW = 68;
CGFloat btnH = 143;
CGFloat angle = 0;
//加载原始大图片
UIImage *oriImage = [UIImage imageNamed:@"LuckyAstrology"];
//加载原始选中的大图片
UIImage *oriSelImage = [UIImage imageNamed:@"LuckyAstrologyPressed"];
NSLog(@"%@",NSStringFromCGSize(oriImage.size));
CGFloat X = 0;
CGFloat Y = 0;
CGFloat clipW = oriImage.size.width / 12.0 * 2;
CGFloat clipH = oriImage.size.height * 2;
for(int i = 0; i < 12; i++) {
WheelBtn *btn = [WheelBtn buttonWithType:UIButtonTypeCustom];
btn.bounds = CGRectMake(0, 0, btnW, btnH);
//[btn setBackgroundColor:[UIColor redColor]];
//设置按钮选中状态下的背景图片
[btn setBackgroundImage:[UIImage imageNamed:@"LuckyRototeSelected"] forState:UIControlStateSelected];
//给定一张图片,截取指定区域范围内的图片,
X = i * clipW;
//CGImageCreateWithImageInRect,使用的坐标都是以像素点,
//在ios当中使用的都是点坐标.
CGImageRef clipImage = CGImageCreateWithImageInRect(oriImage.CGImage, CGRectMake(X, Y, clipW, clipH));
//设置按钮正常状态下显示的图片
[btn setImage:[UIImage imageWithCGImage:clipImage] forState:UIControlStateNormal];
CGImageRef clipSelImage = CGImageCreateWithImageInRect(oriSelImage.CGImage, CGRectMake(X, Y, clipW, clipH));
//设置按钮选中状态下显示的图片
[btn setImage:[UIImage imageWithCGImage:clipSelImage] forState:UIControlStateSelected];
//设置按钮位置
btn.layer.anchorPoint = CGPointMake(0.5, 1);
btn.layer.position = CGPointMake(self.bounds.size.width * 0.5, self.bounds.size.height * 0.5);
//让第一个按钮在上一个基础上面旋转30.
btn.transform = CGAffineTransformMakeRotation(angle2Rad(angle));
angle += 30;
//监听按钮的点击
[btn addTarget:self action:@selector(btnClick:) forControlEvents:UIControlEventTouchUpInside];
[self.contentV addSubview:btn];
//默认让第一个成为选中状态
if (i == 0) {
[self btnClick:btn];
}
}
}
2.让转盘进行旋转.
在封装的View内部提供一个开始旋转的方法和结束旋转的方法,供外界直接调用.
在View内部实现方法.
开始旋转:
添加核心动画.动画要添加到里面的背景图片上.不能够直接添加到View.
CABasicAnimation *anim = [CABasicAnimation animation];
anim.keyPath = @"transform.rotation";
anim.toValue = @(M_PI * 3);
anim.duration = 5;
anim.repeatCount = MAXFLOAT;
[self.contentV.layer addAnimation:anim forKey:nil];
3.添加按钮.
- 1.分析按钮的位置.每一个都是倾斜的.想要办到这种效果,可以先把所有的按钮都给添加到圆盘的最上方
然后让每一个按钮绕着圆盘的中心点进行旋转.
想要让按钮绕着圆盘中心点进行旋转,要选把每个按钮的锚点设置到按钮底部中心位置(0.5,1)
再让按钮显示到中心的位置,设置按钮的position为圆盘的中心即可. - 2.添加按钮时,让每一个按钮进行旋转,要计算出每一个按钮旋转的角度.总共有12个按钮,正好占圆的一圈,
那每一个按钮占30.那一个按钮在上一个按钮的基础上加上30.即可算出每一个按钮旋转的角度.
4.给按钮添加点击事件.让按钮成为选中状态,取消按钮的高亮状态.
1.在添加按钮时, 给每一个按钮添加选中状态.
添加按钮事件的时候要注意.我们每一个按钮都是添加到UIImageView上的.UIImageView默认是不接收事件的.
所以需要手动把UIImageView的设置为可接收事件.2.让按钮成为选中状态.
在事件处理方法当中,我们要先定义一个成员属性记录上一个按钮的选中状态.
先把上一个按钮的选中状态取消选中.
让当前点击的按钮成为选中状态.
把当前的按钮赋值上一个按钮.
5.设置按钮每一个按钮的图片
1.查看美工提供的资料文件.发现所有的按钮都在一张图片上面.
这个时候我们就得需要把这一张图片做一个裁剪.
首先要确定裁剪的每一张图片的宽,高
每一张图片的高度, 为原始图片的高度
每一张图片的宽度, 为整个图片的宽度除以总共要裁剪多少张图片.这里我们总共有12张图片, 所以总宽度除以12.
用下面这个方法做裁剪.
参数说明:
image:为要裁剪的图片,既原始图片.它的类型为CGImageRef,类型,所以要转成CGImage
rect:为裁剪的范围.这时需要确定每一个X的位置.
每一个x为它当前的角标 * 要裁剪的宽度.
CGImageCreateWithImageInRect(image, rect);
这个方法它会返回一个图片.图片类型为CGImageRef imgR.
所要我们在设置背景图片的时候,要把这张图片给转成UIImage.
转的方法为:
UIImage *image = [UIImage imageWithCGImage:imgR];2.运行时只能看见图片的一部分
运行的时候只能看到图片的一部分.这个是因为我们加载图片,加载的是@2X的图片.
而我们CGImageCreateWithImageInRect这个方法它是C语言的方法.它裁剪的区域是一个像素点.
所以导致我们看到的只有这一部分内容
解决办法为把裁剪的宽高都乘上一个像素比例.
获得像素比例
[UIScreen mainScreen].scale
这样裁剪出来的图片就是整个图片了.3.但是运行的时候还是发现裁剪的图片尺寸比较大.
这个时候我们要修改按钮内部图片的尺寸大小.
在按钮当中实现一个方法.在这个方法当中重新计算图片的尺寸
-(CGRect)imageRectForContentRect:(CGRect)contentRect{
CGFloat btnW = 40;
CGFloat btnH = 47;
CGFloat btnY = 20;
CGFloat btnX = (contentRect.size.width - btnW) * 0.5;
return CGRectMake(btnX, btnY, btnW, btnH);
}
6.在按钮旋转的时候,还要点击按钮所以这个时候就不能够用核心动画.
这个时候我们就要用UIView动画.
方法为:添加一个定时器, 每次在原来基础上添加一个旋转角度.
定时器我们只需要添加一次, 我们就采用懒加载的方法.我们采用CADisplayLink的方法.
因为这个定时器可以让它很方便的暂停,开始.
-(CADisplayLink *)link{
if (_link == nil) {
_link = [CADisplayLink displayLinkWithTarget:self selector:@selector(rotationChange)];
[_link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
}
return _link;
}
- (void)update {
self.contentV.transform = CGAffineTransformRotate(self.contentV.transform, M_PI / 300.0);
}
在定时器方法当中,做一个旋转,每次让它在原来的基础上旋转一个角度.
7.实现中间点击按钮.
中间点击按钮为逻辑为,快速的让圆盘旋转几圈,动画完成时,让选择的按钮指上最上方.
快速旋转几圈, 这个时候不需要与用户进行交互,所以我们可以使用核心动画.
在动画开始的时候,停止定时器.
得要监听动画完成.在动画完成的时候,来做事情.
想要坚听动画的完成.我们可以设置核心动画的代理.
核心动画代理方法比较特殊.它不需要遵守协议,它是NSObject的一个分类.也称它是非常式协议.
直接实现它的方法就可以了.
在这个方法当中要实现的思路为.
看当前选中的按钮之前是旋转多少度旋转到当前位置的.
然后再让转盘倒着旋转回去就可以了.
可以通过当前按钮的transform求出当前按钮的旋转角度
方法为:
CGFloat angel = atan2(self.selectBtn.transform.b, self.selectBtn.transform.a);
-(void)animationDidStop:(nonnull CAAnimation *)anim finished:(BOOL)flag{
CGAffineTransform transform = self.selectBtn.transform;
CGFloat angel = atan2(self.selectBtn.transform.b, self.selectBtn.transform.a);
self.innerCircle.transform = CGAffineTransformMakeRotation(-angel);
}
