人生总是这么的无奈,有一个奇葩的UI给你提供奇葩的原型图,让你软件写出来效果。这就是我们苦逼的程序员。
项目需求:
1.控件沿椭圆旋转。
2.近大远小。
3.近上远下。
效果如下图:
具体实现方法:
1.算椭圆上一点的坐标。
先装波B,来上一节几何课。一般情况下我们都是知道要在椭圆上放多少个点的。这样我们就会知道角度 360/N,特别注意这个角度是∠AOX 而不是∠MOX,哈哈,学霸请自动忽略我这种学渣。已知长半轴 a 短半轴 b ∠AOX,好了,现在我们就可以算出M点的(x,y)的坐标了。 x = b * sin(∠AOX) y = a * cos(∠AOX) ,到此我们的几何课就结束了,根据自己实际的坐标,写一下简单的加减法就可以得到M在屏幕上的坐标了。
2.近大远小
我利用了transform 的 CGAffineTransformScale 进行放缩的,注意,先还原再放缩。
self.transform = CGAffineTransformIdentity;
self.transform = CGAffineTransformScale(self.transform, 0.8, 0.8);
3.近上远下
这个就简单了,利用layer.zPosition 就达到近上远下的效果,注意添加的时候要把视图和layer同时添加到父视图上。
[self.view.layer addSublayer:btn.layer];
[self.view addSubview:btn];
4.让视图动起来
我用了很傻的方法,开了一个timer,每次去增加角度来达到旋转的效果。如果各位大大知道什么好的方法,请赐教一下。
_tim=[NSTimer scheduledTimerWithTimeInterval:.03 target:self selector:@selector(changeSize:) userInfo:sender repeats:YES];
- (void)changeSize:(NSTimer *)timer
{
UIButton *btn1 = (UIButton *)[timer userInfo];
if ([btn1.btnAngle floatValue] == 270)
{
self.view.userInteractionEnabled = YES;
[_tim invalidate];
_tim=nil;
return;
}
float x = 50;
float y = 100;
float a = 300;
float b = 150;
for (UIButton *btn in _btnArray)
{
btn.btnAngle = [NSNumber numberWithFloat: [btn.btnAngle floatValue] + 6];
int cx = x + a/2 + a/2 * cos([btn.btnAngle floatValue] * M_PI/180.0);
int cy = y + a/2 - b/2 * sin([btn.btnAngle floatValue] * M_PI/180.0);
btn.center = CGPointMake(cx, cy);
[btn zp];
[btn changeSize];
}
}
CSDN下载地址:http://download.csdn.net/detail/qq_14827361/9885261
GitHub下载地址:https://github.com/HanWait/TheEllipse