IOS 转盘 抽奖 轮盘

IMG_0545.PNG

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);
         
      }