iOS 餅狀圖(扇形圖)動畫效果的實現(xiàn)

先上效果圖:


23.gif

Demo在此陶耍,休得撒野2稀3磷馈!求冷!

1.怎么用

/**
 *  Pie
 *
 *  @param frame      frame
 *  @param dataItems  數(shù)據源拯坟,此Demo是紅、綠韭山、藍比例為1:4:5
 *  @param colorItems 對應數(shù)據的pie的顏色塞琼,如果colorItems.count < dataItems 或
 *                      colorItems 為nil 會隨機填充顏色
 *
 */
- (id)initWithFrame:(CGRect)frame
          dataItems:(NSArray *)dataItems
         colorItems:(NSArray *)colorItems;
/**
 *  開始動畫
 */
- (void)stroke;

2.算法分析

圖層分析

以紅色部分開始為例計算
r:扇形半徑
center:PieView中心位置
start:開始位置派近,范圍[0,1]
end:結束位置,范圍[0,1]
?:相對于y軸(-π/2)扇形中間位置的角度
  ? = 2 * π * (start + 1/2.0 * (end - start)) = π * (start + end)
??x:labelCenter到y(tǒng)軸距離
  ??x = 1/2.0 * r * sin(?)
??y:labelCenter到y(tǒng)軸距離
  ??y = 1/2.0 * r * cos(?)
labelCenter:百分比label的center
  labelCenterX = center.x + ??x
  labelCenterY = center.y - ??y

3. PieView.m部分

- (id)initWithFrame:(CGRect)frame dataItems:(NSArray *)dataItems colorItems:(NSArray *)colorItems
{
    self = [super initWithFrame:frame];
    if (self) {
        
        self.hidden = YES;
        self.backgroundColor = kPieBackgroundColor;
       
        //1.pieView中心點
        CGFloat centerWidth = self.frame.size.width * 0.5f;
        CGFloat centerHeight = self.frame.size.height * 0.5f;
        CGFloat centerX = centerWidth;
        CGFloat centerY = centerHeight;
        CGPoint centerPoint = CGPointMake(centerX, centerY);
        CGFloat radiusBasic = centerWidth > centerHeight ? centerHeight : centerWidth;
        
        //計算紅綠藍部分總和
        _total = 0.0f;
        for (int i = 0; i < dataItems.count; i++) {
            _total += [dataItems[i] floatValue];
        }
        
        //線的半徑為扇形半徑的一半,線寬是扇形半徑尿招,這樣就能畫出圓形了
        //2.背景路徑
        CGFloat bgRadius = radiusBasic * 0.5;
        UIBezierPath *bgPath = [UIBezierPath bezierPathWithArcCenter:centerPoint
                                                              radius:bgRadius
                                                          startAngle:-M_PI_2
                                                            endAngle:M_PI_2 * 3
                                                           clockwise:YES];
        _bgCircleLayer = [CAShapeLayer layer];
        _bgCircleLayer.fillColor   = [UIColor clearColor].CGColor;
        _bgCircleLayer.strokeColor = [UIColor lightGrayColor].CGColor;
        _bgCircleLayer.strokeStart = 0.0f;
        _bgCircleLayer.strokeEnd   = 1.0f;
        _bgCircleLayer.zPosition   = 1;
        _bgCircleLayer.lineWidth   = bgRadius * 2.0f;
        _bgCircleLayer.path        = bgPath.CGPath;
        
        
        //3.子扇區(qū)路徑
        CGFloat otherRadius = radiusBasic * 0.5 - 3.0;
        UIBezierPath *otherPath = [UIBezierPath bezierPathWithArcCenter:centerPoint
                                                                 radius:otherRadius
                                                             startAngle:-M_PI_2
                                                               endAngle:M_PI_2 * 3
                                                              clockwise:YES];
        
        CGFloat start = 0.0f;
        CGFloat end = 0.0f;
        for (int i = 0; i < dataItems.count; i++) {
            //4.計算當前end位置 = 上一個結束位置 + 當前部分百分比
            end = [dataItems[i] floatValue] / _total + start;
            
            //圖層
            CAShapeLayer *pie = [CAShapeLayer layer];
            [self.layer addSublayer:pie];
            pie.fillColor   = kPieFillColor;
            if (i > colorItems.count - 1 || !colorItems  || colorItems.count == 0) {//如果傳過來的顏色數(shù)組少于item個數(shù)則隨機填充顏色
                pie.strokeColor = kPieRandColor.CGColor;
            } else {
                pie.strokeColor = ((UIColor *)colorItems[i]).CGColor;
            }
            pie.strokeStart = start;
            pie.strokeEnd   = end;
            pie.lineWidth   = otherRadius * 2.0f;
            pie.zPosition   = 2;
            pie.path        = otherPath.CGPath;
            
            
            //計算百分比label的位置
            CGFloat centerAngle = M_PI * (start + end);
            CGFloat labelCenterX = kLabelLoctionRatio * sinf(centerAngle) + centerX;
            CGFloat labelCenterY = -kLabelLoctionRatio * cosf(centerAngle) + centerY;
            UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, radiusBasic * 0.7f, radiusBasic * 0.7f)];
            label.center = CGPointMake(labelCenterX, labelCenterY);
            label.text = [NSString stringWithFormat:@"%ld%%",(NSInteger)((end - start + 0.005) * 100)];
            label.textAlignment = NSTextAlignmentCenter;
            label.textColor = [UIColor whiteColor];
            label.layer.zPosition = 3;
            [self addSubview:label];
            
            
            //計算下一個start位置 = 當前end位置
            start = end;
        }
        self.layer.mask = _bgCircleLayer;
        
    }
    return self;
}

</br>

- (void)stroke
{
    //畫圖動畫
    self.hidden = NO;
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation.duration  = kAnimationDuration;
    animation.fromValue = @0.0f;
    animation.toValue   = @1.0f;
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    animation.removedOnCompletion = YES;
    [_bgCircleLayer addAnimation:animation forKey:@"circleAnimation"];
}

4. 結束

頗多不足捆愁,敬請指教!窟却!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末昼丑,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子夸赫,更是在濱河造成了極大的恐慌菩帝,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,185評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異呼奢,居然都是意外死亡宜雀,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,652評論 3 393
  • 文/潘曉璐 我一進店門握础,熙熙樓的掌柜王于貴愁眉苦臉地迎上來辐董,“玉大人,你說我怎么就攤上這事禀综〖蚝妫” “怎么了?”我有些...
    開封第一講書人閱讀 163,524評論 0 353
  • 文/不壞的土叔 我叫張陵定枷,是天一觀的道長孤澎。 經常有香客問我,道長依鸥,這世上最難降的妖魔是什么亥至? 我笑而不...
    開封第一講書人閱讀 58,339評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮贱迟,結果婚禮上,老公的妹妹穿的比我還像新娘絮供。我一直安慰自己衣吠,他們只是感情好,可當我...
    茶點故事閱讀 67,387評論 6 391
  • 文/花漫 我一把揭開白布壤靶。 她就那樣靜靜地躺著缚俏,像睡著了一般。 火紅的嫁衣襯著肌膚如雪贮乳。 梳的紋絲不亂的頭發(fā)上忧换,一...
    開封第一講書人閱讀 51,287評論 1 301
  • 那天,我揣著相機與錄音向拆,去河邊找鬼亚茬。 笑死,一個胖子當著我的面吹牛浓恳,可吹牛的內容都是我干的刹缝。 我是一名探鬼主播,決...
    沈念sama閱讀 40,130評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼颈将,長吁一口氣:“原來是場噩夢啊……” “哼梢夯!你這毒婦竟也來了?” 一聲冷哼從身側響起晴圾,我...
    開封第一講書人閱讀 38,985評論 0 275
  • 序言:老撾萬榮一對情侶失蹤颂砸,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體人乓,經...
    沈念sama閱讀 45,420評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡梗醇,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,617評論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了撒蟀。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片叙谨。...
    茶點故事閱讀 39,779評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖保屯,靈堂內的尸體忽然破棺而出手负,到底是詐尸還是另有隱情,我是刑警寧澤姑尺,帶...
    沈念sama閱讀 35,477評論 5 345
  • 正文 年R本政府宣布竟终,位于F島的核電站,受9級特大地震影響切蟋,放射性物質發(fā)生泄漏统捶。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,088評論 3 328
  • 文/蒙蒙 一柄粹、第九天 我趴在偏房一處隱蔽的房頂上張望喘鸟。 院中可真熱鬧,春花似錦驻右、人聲如沸什黑。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,716評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽愕把。三九已至,卻和暖如春森爽,著一層夾襖步出監(jiān)牢的瞬間恨豁,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,857評論 1 269
  • 我被黑心中介騙來泰國打工爬迟, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留橘蜜,地道東北人骡澈。 一個月前我還...
    沈念sama閱讀 47,876評論 2 370
  • 正文 我出身青樓音婶,卻偏偏與公主長得像跪呈,于是被迫代替她去往敵國和親钧敞。 傳聞我的和親對象是個殘疾皇子蘸嘶,可洞房花燭夜當晚...
    茶點故事閱讀 44,700評論 2 354

推薦閱讀更多精彩內容

  • 扇形易畫悯许,扇形的中心點不易找傍药。 找扇形中心點的算法分析 ****注意****:此找扇形中點算法嘿般,是從-π/2開始畫...
    孟圓的筆記閱讀 838評論 0 4
  • ¥開啟¥ 【iAPP實現(xiàn)進入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個線程活箕,因...
    小菜c閱讀 6,404評論 0 17
  • 一力麸、實驗目的 學習使用 weka 中的常用分類器,完成數(shù)據分類任務。 二克蚂、實驗內容 了解 weka 中 explo...
    yigoh閱讀 8,527評論 5 4
  • 文|張小魚 總覺得表達愛也要給個截止日期闺鲸, 不然要拖到什么時候才能變成你的唯一。 最近著實感受到了deadline...
    張小魚716閱讀 774評論 0 2
  • 我不應該要苛求太完美埃叭,本來是想開播的摸恍,房東很快就回來了,所以沒來得及赤屋,就不播了立镶,沒啥意思了,都是拯救的人类早,就休會兒...
    東方不敗哈哈哈哈閱讀 121評論 0 1