圖形繪制

線(xiàn)條繪制

單軌跡線(xiàn)條繪制設(shè)置線(xiàn)寬，動(dòng)畫(huà)進(jìn)可以通過(guò) KeyPath 設(shè)置為 strokeEnd 進(jìn)行渲染，達(dá)到動(dòng)態(tài)渲染的目的

image.png

    // 繪制軌跡
    UIBezierPath *bezierPath = [UIBezierPath bezierPath];
    [bezierPath moveToPoint:CGPointMake(200, 200)];
    [bezierPath addLineToPoint:CGPointMake(150, 100)];

    //  軌跡渲染
    CAShapeLayer * layer = [CAShapeLayer layer];
    layer.fillColor = [UIColor redColor].CGColor;
    layer.strokeColor = [UIColor redColor].CGColor;
    layer.strokeStart = 0;
    layer.strokeEnd = 1;
    layer.zPosition = 1;
    layer.lineWidth = 1;
    layer.path  = bezierPath.CGPath;
    [self.view.layer addSublayer:layer];

  // 軌跡動(dòng)畫(huà)
   CABasicAnimation * pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    pathAnimation.duration = 1.0f;
    pathAnimation.fromValue = @0.0f;
    pathAnimation.toValue = @1.0f;
    pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];//添加動(dòng)畫(huà)樣式

  // 添加動(dòng)畫(huà)
 [layer addAnimation: pathAnimation  forKey:@"strokeEndAnimation"];

三角形繪制

簡(jiǎn)單繪制一個(gè)三角形，bezierPath 調(diào)用 closePath 時(shí), 繪制的線(xiàn)路必須是閉合的，再調(diào)用 closePath 才能閉合，但是動(dòng)畫(huà)設(shè)置為 strokeEnd 卻無(wú)效，需要重新設(shè)置動(dòng)畫(huà)組合 CAAnimationGroup 才能添加渲染動(dòng)畫(huà)

繪制如圖圖形

image.png

    // 繪制三角形
   UIBezierPath *bezierPath = [UIBezierPath bezierPath];
   [bezierPath moveToPoint:CGPointMake(200, 200)];
   [bezierPath addLineToPoint:CGPointMake(150, 100)];
   [bezierPath addLineToPoint:CGPointMake(250, 100)];
   [bezierPath closePath];

    // 填充紅色顏色
    CAShapeLayer * layer = [CAShapeLayer layer];
    layer.fillColor = [UIColor redColor].CGColor;
    layer.strokeColor = [UIColor redColor].CGColor;
    layer.strokeStart = 0;
    layer.strokeEnd = 1;
    layer.zPosition = 1;
    layer.lineWidth = 1;
    layer.path  = bezierPath.CGPath;
    [self.view.layer addSublayer:layer];   

   // 添加動(dòng)畫(huà)
   [layer addAnimation:[self pathAnimation] forKey:@"strokeEndAnimation"];

折線(xiàn)圖繪制

通過(guò)折線(xiàn)圖繪制，可以滿(mǎn)足部分柱狀圖的需求，同時(shí)添加延展動(dòng)畫(huà)

image.png

image.png

   // 起始位置
    CGFloat lastPointX = 100;
    // 單位寬度
    CGFloat itemWidth = 40;
    // 相鄰間隙
    CGFloat itemPadding = 10;
    // 圖標(biāo)高度
    CGFloat chartHeight = 100;
    // 數(shù)據(jù)
    NSArray *dataArray = @[@180,@160,@140,@120,@160,@180,@200];
    // 最大值
    CGFloat maValue = [[dataArray valueForKeyPath:@"@max.floatValue"] floatValue];
    
    for (NSInteger index = 0; index < dataArray.count; index++) {
        NSInteger value = [dataArray[index] integerValue];
        CGFloat height = value  *  1.0 / maValue * chartHeight;
        CGFloat y =  200 - height;
        CGFloat x = lastPointX + itemWidth;
        // 軌跡繪制
        [bezierPath addLineToPoint:CGPointMake(lastPointX, y)];
        [bezierPath addLineToPoint:CGPointMake(x, y)];
        if (index != dataArray.count-1) {
            [bezierPath addLineToPoint:CGPointMake(x, 200)];
            [bezierPath moveToPoint:CGPointMake(x + itemPadding, 200)];
        } else {
            [bezierPath addLineToPoint:CGPointMake(x, 200)];
        }
        lastPointX = x+itemPadding;
    }
    
    //添加CAShapeLayer
    CAShapeLayer * layer = [CAShapeLayer layer];
    layer.fillColor = [UIColor redColor].CGColor;
    layer.strokeColor = [UIColor redColor].CGColor;
    layer.strokeStart = 0;
    layer.strokeEnd = 1;
    layer.zPosition = 1;
    layer.lineWidth = 1;
    layer.path  = bezierPath.CGPath;
    [self.view.layer addSublayer:layer];

    // 添加動(dòng)畫(huà)  animationGroup 為動(dòng)畫(huà)代碼 
    [layer addAnimation:[self pathAnimation] forKey:@"strokeEndAnimation"];

動(dòng)畫(huà)復(fù)用

- (CAAnimationGroup *)pathAnimation {
 
    // 延展方向
    CABasicAnimation * pathAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale.y"];
    pathAnimation.fromValue = @0.0f;//動(dòng)畫(huà)開(kāi)始位置
    pathAnimation.toValue = @1.0f;//動(dòng)畫(huà)停止位置

    // 延展值
    CABasicAnimation *posAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
    posAnimation.fromValue = [NSValue valueWithCGPoint:CGPointMake(0,200)];
    posAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(0,0)];

    // 動(dòng)畫(huà)組合
    CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
    animationGroup.animations = @[pathAnimation,posAnimation];
    animationGroup.duration = 0.3f;
    animationGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
    animationGroup.removedOnCompletion = NO;
    animationGroup.fillMode = kCAFillModeForwards;
    return animationGroup;
}