wordpress 进站插件/广州网站建设正规公司

有个朋友需要写个抽奖大转盘的功能，就让我帮忙写了下。我用了2种方法实现了效果，在这里和大家一起分享下。

一、一键转动大转盘

我一开始拿到手的是一堆的图片，然后自己花了点时间，搭建出美工要求的UI，接下来就开始分析如何让它转动了。如下图：

demo1没转之前

demo1转动之后

首先，大家先到做旋转的动画，肯定是用到系统自带的CABasicAnimation框架下面的方法，确实用这个做十分的方便，只需要我们设置相关属性就可以搞定的。

可以看到上图中，所有的奖励是把大圆给八等分了，而中奖的指针是一直停留在正上面不变的，我们所改变的是转盘和对应的奖励的位置。

那思路接下来是比较相对清晰了，我们只需要把角度也八等分，让指针对准每一个奖励区域的中心即可。如果让转盘顺时针旋转，那么第一个“500”对应的是0°或者360°，左侧“一束鲜花”对应的则是45°，以此类推。我们事先可以把奖励按这样的顺序放到数组中，0°对应的是数组中第一个的奖励，45°对应的是第二个的奖励......好了，思路有了，就可以直接写代码，边写边调整了，下面我附上点击“Go”之后的动画效果代码

-(void)startAnimaition

{

NSInteger turnAngle;//8个奖励分别对应的角度

NSInteger randomNum = arc4random()%100;//控制概率

NSInteger turnsNum = arc4random()%5+1;//控制圈数

if (randomNum>=0 && randomNum<20) {//80%的概率 就是0-80

if (randomNum < 10) {

turnAngle = 0;

}else{

turnAngle = 135;

}

self.labelText = self.turntable.numberArray[0];

NSLog(@"抽中了500");

} else if (randomNum>=20 && randomNum<40) {

if (randomNum < 35) {

turnAngle = 45;

}else{

turnAngle = 225;

}

self.labelText = self.turntable.numberArray[3];

NSLog(@"抽中了鲜花");

} else if (randomNum >=40 && randomNum<60) {

turnAngle = 315;

self.labelText = self.turntable.numberArray[1];

NSLog(@"抽中了2000");

} else if(randomNum >=60 && randomNum<80){

if (randomNum < 75) {

turnAngle = 90;

}else{

turnAngle = 270;

}

self.labelText = self.turntable.numberArray[2];

NSLog(@"抽中了5000");

}else{

turnAngle = 180;

self.labelText = self.turntable.numberArray[4];

NSLog(@"抽中了20000");

}

CGFloat perAngle = M_PI/180.0;

CABasicAnimation* rotationAnimation;

rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];

rotationAnimation.toValue = [NSNumber numberWithFloat:turnAngle * perAngle + 360 * perAngle * turnsNum];

rotationAnimation.duration = 3.0f;

rotationAnimation.cumulative = YES;

rotationAnimation.delegate = self;

//由快变慢

rotationAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];

rotationAnimation.fillMode=kCAFillModeForwards;

rotationAnimation.removedOnCompletion = NO;

[self.turntable.rotateWheel.layer addAnimation:rotationAnimation forKey:@"rotationAnimation"];

// 转盘结束后调用，显示获得的对应奖励

self.label.text = [NSString stringWithFormat:@"恭喜您抽中%@",self.labelText];

}

1.预先算好8个区域，区域中心每个对应的角度(比如，“500”对应的是0°和135°；“2000”对应了135°)

2.用随机数 NSInteger randomNum = arc4random()%100; 来控制转动事件的概率，如果你想让“一束鲜花”的概率有20%，那么你可以给它设置随机数20-40都停留在鲜花的区域(当然也可以是30-50的数字啦)

3.因为鲜花有2个区域，为了都可以有机会停留，那么久20-30的时候，停留在第一块鲜花的区域；30-40的时候，停留在第二块鲜花的区域

4.你可以用一个随机数控制转动的圈数 NSInteger turnsNum ，也可以定死多少圈

5.接下来直接上旋转动画的代码，这里需要注意的是，我们在考虑问题或者看得时候，都是用角度来算的。而实际动画中的属性，是用弧度来算的。 1弧度=180/π度；1度=π/180弧度，自己可以换算下。

二、手动旋转大转盘

手指滑动旋转屏幕

这个动画，是捕捉到手指在屏幕上的起始点和重点，然后计算让转盘跟着转动。主要方法如下：

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event；

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event；

-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event

主要用了这三个触摸屏幕相关的方法

小弟不才，有点丑

需要注意，我们捕捉到的点是屏幕左上角为起始点的坐标，我们需要转化成相对于圆心的坐标

3.角度和弧度的转换，依旧需要注意

extern float atan2f(float, float);

这个是C语言中的数学函数库，意思是以弧度为单位计算并返回点 y/x 的角度，该角度从圆的 x 轴(其中，0,0 表示圆心)沿逆时针方向测量

5，为了让旋转有快到慢，直至停止，所以需要每次都把旋转的角度慢慢变小。

然后配合着我下面的代码看吧：

- (void)viewDidLoad

{

_updateEnable = NO;

_angle = 0;

[super viewDidLoad];

self.view.backgroundColor = [UIColor whiteColor];

_turntable = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, screenW-50, screenW-50)];

_turntable.image = [UIImage imageNamed:@"turntable.jpeg"];

_turntable.center = self.view.center;

[self.view addSubview:_turntable];

//将NSTimer添加到NSRunloop

NSRunLoop* runLoop = [NSRunLoop currentRunLoop];

_timer =[ NSTimer timerWithTimeInterval:1.0f/60 target:self selector:@selector(updateMyAngle) userInfo:nil repeats:YES];

[runLoop addTimer:_timer forMode:NSDefaultRunLoopMode];

}

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event

{

_updateEnable = NO;

_angle = 0;

}

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event

{

UITouch *touch = [touches anyObject];

//1.捕捉起始点

//2.算出相对与转盘中点的坐标

//3.点(也就是坐标)转换成弧度

//4.弧度转换成角度

CGPoint previousLocation = [touch previousLocationInView:touch.view];

CGPoint previousPoint = [self relativePoint:previousLocation and:_turntable.center];

CGFloat previousVector = [self toAngle:previousPoint];

CGFloat previousDrgress = RADIAN_TO_DEGREE(previousVector);

//捕捉终点

CGPoint nowLocation = [touch locationInView:touch.view];

CGPoint nowPoint = [self relativePoint:nowLocation and:_turntable.center];

CGFloat nowVector = [self toAngle:nowPoint];

CGFloat nowDrgress = RADIAN_TO_DEGREE(nowVector);

//得出相对角度

_angle = -(nowDrgress - previousDrgress);

NSLog(@"angle = %f",_angle);

[self setRotate:_angle];

}

-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event

{

_updateEnable = YES;

}

- (void)setRotate:(CGFloat)degress

{

CGFloat rotate = DEGREE_TO_RADIAN(degress);

CGAffineTransform transform = _turntable.transform;

transform = CGAffineTransformRotate(transform, rotate);

_turntable.transform = transform;

}

- (CGPoint)relativePoint:(CGPoint)point1 and:(CGPoint)point2

{

CGPoint point;

point.x = point1.x - point2.x;

point.y = point1.y - point2.y;

return point;

}

- (float)toAngle:(CGPoint)point

{

//是C语言中的数学函数库

//以弧度为单位计算并返回点 y/x 的角度值

//该角度从圆的 x 轴(其中，0,0 表示圆心)沿逆时针方向测量

return atan2f(point.x, point.y);

}

//为了让旋转持续下去，并且越来越慢，每次的角度都是上一次啊的0.99

- (void)updateMyAngle

{

if(_updateEnable)

{

if(fabs(_angle)>1)

{

[self setRotate:_angle];

_angle = 0.99 * _angle;

}

else

{

_angle = 0;

}

}

}