最近公司項(xiàng)目在某一個(gè)模塊當(dāng)中需要用到一個(gè)“圓弧”菜單，起初在網(wǎng)上找了很多Demo，都沒(méi)有想要的效果，最后就自己摸索寫(xiě)了一個(gè)，其中有一個(gè)簡(jiǎn)單的從左到右連續(xù)出現(xiàn)的動(dòng)畫(huà)，效果如圖：（代碼在末尾）

圓弧菜單.png

1.繪制圓弧

LineWidth ：圓弧寬度
OutRadius：圓弧半徑

底層圓弧（淺色）：

- (void)drawRect:(CGRect)rect {
   
    //一個(gè)不透明類(lèi)型的Quartz 2D繪畫(huà)環(huán)境,相當(dāng)于一個(gè)畫(huà)布,你可以在上面任意繪畫(huà)
    CGContextRef context = UIGraphicsGetCurrentContext();
   //void CGContextAddArc(CGContextRef c,CGFloat x, CGFloat y,CGFloat radius,CGFloat startAngle,CGFloat endAngle, int clockwise)
    //x,y為圓點(diǎn)坐標(biāo)，radius半徑，startAngle為開(kāi)始的弧度，endAngle為 結(jié)束的弧度，clockwise 0為順時(shí)針，1為逆時(shí)針。
    /*--------繪制底層圓弧--------*/
    //畫(huà)線筆顏色
    CGContextSetStrokeColorWithColor(context, [UIColor colorWithRed:224/255.0 green:246/255.0 blue:243/255.0 alpha:1].CGColor);
    //線的寬度
    CGContextSetLineWidth(context, LineWidth);
    //添加一個(gè)圓（弧)
    CGContextAddArc(context, self.bounds.size.width/2, self.bounds.size.height, OutRadius, -M_PI, 0, 0);
    //繪制路徑
    CGContextDrawPath(context, kCGPathStroke);
  
}

外層圓?。ㄉ钌?br> 說(shuō)明一下，我在用CGContextSetLineCap方法設(shè)置圓弧的端點(diǎn)為圓角時(shí)，圓弧的首尾兩端都會(huì)同時(shí)設(shè)置，由于沒(méi)有找到只設(shè)置一邊的方法，所以我在初始化view的時(shí)候遮住了首端的圓角，這樣就看著只有尾端才有圓角效果。

/*--------繪制外層圓弧--------*/

    CGContextSetStrokeColorWithColor(context, [UIColor colorWithRed:0/255.0 green:201/255.0 blue:171/255.0 alpha:1.0].CGColor);
    //設(shè)置圓弧的端點(diǎn)形狀 (圓角)
    CGContextSetLineCap(context, kCGLineCapRound);
    CGContextSetLineWidth(context, LineWidth);
    CGContextAddArc(context, self.bounds.size.width/2, self.bounds.size.height, OutRadius, -M_PI, -M_2_PI, 0);
    CGContextDrawPath(context, kCGPathStroke);

2.確定圖標(biāo)和菜單的位置

主要方法：

#pragma mark 計(jì)算圓圈上點(diǎn)在IOS系統(tǒng)中的坐標(biāo)
/*
 center 中心點(diǎn)坐標(biāo)，angle 角度 ，radius 半徑
由角度(x)轉(zhuǎn)換弧度：(M_PI * (x) / 180.0)
由弧度(x)轉(zhuǎn)換角度：(x*180.0)/(M_PI)
 */
-(CGPoint) calcCircleCoordinateWithCenter:(CGPoint) center  andWithAngle : (CGFloat) angle andWithRadius: (CGFloat) radiusNumber{
    
    CGFloat x2 = radiusNumber*cosf(angle*M_PI/180);
    CGFloat y2 = radiusNumber*sinf(angle*M_PI/180);
    return CGPointMake(center.x-x2, center.y-y2);
}

以小圖標(biāo)的位置為例，首先根據(jù)上面的方法計(jì)算出坐標(biāo)，再將坐標(biāo)作為圖標(biāo)的中心點(diǎn)，這樣就搞定了。

//角度
#define Angle 180/8

CGPoint point = [self calcCircleCoordinateWithCenter:CGPointMake(self.bounds.size.width/2, self.bounds.size.height) andWithAngle:Angle*(i+1) andWithRadius: OutRadius];
iconBtn.center = point;

完整代碼如下：

#pragma mark -- 圓弧內(nèi)小圖標(biāo)數(shù)組
/*
array：表示裝有圖標(biāo)的數(shù)組，從外部傳值獲得
*/
-(void)addIconSubView:(NSArray *)array{
    
    for (int i = 0; i < array.count; i++) {
        
        UIButton *iconBtn = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 22, 22)];
        
        [iconBtn setImage:[UIImage imageNamed:array[i]] forState:UIControlStateNormal];
        iconBtn.tag=100+i;
        
        CGPoint point = [self calcCircleCoordinateWithCenter:CGPointMake(self.bounds.size.width/2, self.bounds.size.height) andWithAngle:Angle*(i+1) andWithRadius: OutRadius];
        
        iconBtn.center = point;
        
        iconBtn.alpha = 0;
        
        [self addSubview:iconBtn];
        
        //動(dòng)畫(huà)，連續(xù)出現(xiàn)
        [UIView animateWithDuration:0.5 delay:i*0.1 options:UIViewAnimationOptionCurveLinear animations:^{
            
            iconBtn.alpha = 1;
        } completion:^(BOOL finished) {
            
        }];
    }
    
}

菜單跟圖標(biāo)一樣，完整的Demo可以通過(guò)以下鏈接下載：
https://github.com/BeginnerF/CLArcMenu