iOS 控件沿椭圆旋转

作者: _Waiting_ | 来源:发表于2017-06-30 15:01 被阅读170次

人生总是这么的无奈,有一个奇葩的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

相关文章

  • iOS 控件沿椭圆旋转

    人生总是这么的无奈,有一个奇葩的UI给你提供奇葩的原型图,让你软件写出来效果。这就是我们苦逼的程序员。 项目需求:...

  • iOS-星球沿椭圆轨迹旋转

    先看效果: 什么?太模糊!来一张高清无码 背景旋转 星星的闪烁 轨迹动画 绘制椭圆 下面是demo地址链接: ht...

  • svg实现沿椭圆轨迹旋转动画

    需求1.实现元素沿椭圆轨迹均匀旋转2.鼠标点击事件、移入暂停运动3.元素由远到近逐渐增大 旋转动画的实现思路:1....

  • css3实现沿椭圆轨迹旋转动画

    需求1.实现元素沿椭圆轨迹均匀旋转2.鼠标点击事件、移入暂停运动3.元素由远到近逐渐增大 网上关于css3实现旋转...

  • 3D变形(css3)transform

    rotateX() 就是沿着 x 立体旋转. 沿X轴旋转 沿Z轴旋转: 透视(perspective) persp...

  • Android-小球沿路径移动(Path+PathMeasure

    前言 在项目中遇到了这样一个需求,一个Imageview围绕另一个Imageview沿倾斜的椭圆路径旋转,具体效果...

  • iOS 控件旋转动作

    以uibutton为例 - (void)btnbtnbtnbtn:(UIButton *)btn{ //假设控件初...

  • 关于Android动画的

    RotateAnimation 是典型的2D动画,可以沿x,y点进行旋转,不能沿轴旋转 setInte...

  • 漂亮刷新控件-iOS

    漂亮刷新控件-iOS 漂亮刷新控件-iOS

  • iOS刷新控件的旋转效果

    思想:用一个贝塞尔曲线画一个圆,然后用一个CAShapLayer对象的路径等于贝塞尔曲线的路径。将这个layer对...

网友评论

    本文标题:iOS 控件沿椭圆旋转

    本文链接:https://www.haomeiwen.com/subject/meobcxtx.html