用CAShapeLayer和UIBezierPath和CABaseAnimation制作动画折线图

 // 创建layer并设置属性
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.fillColor = [UIColor clearColor].CGColor;
    layer.lineWidth =  2.0f;
    layer.lineCap = kCALineCapRound;
    layer.lineJoin = kCALineJoinRound;
    layer.strokeColor = [UIColor redColor].CGColor;
    [self.view.layer addSublayer:layer];
    
    // 创建贝塞尔路径~
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(10, 100)];
    [path addLineToPoint:CGPointMake(100, 200)];
    [path addLineToPoint:CGPointMake(200, 50)];
    [path addLineToPoint:CGPointMake(240, 150)];
    [path addLineToPoint:CGPointMake(300, 120)];
    
    // 关联layer和贝塞尔路径~
    layer.path = path.CGPath;
    
    // 创建Animation
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation.fromValue = @(0.0);
    animation.toValue = @(1.0);
    layer.autoreverses = NO;
    animation.duration = 2.0;
    
    // 设置layer的animation
    [layer addAnimation:animation forKey:nil];
    
    // 第一种设置动画完成,不移除结果的方法
    //    animation.fillMode = kCAFillModeForwards;
    //    animation.removedOnCompletion = NO;
    
    // 第二种
    layer.strokeEnd = 1;

 

posted @ 2015-02-05 20:34  784692237  阅读(2248)  评论(0编辑  收藏  举报