iOS上动态绘制曲线

标签：动画   calayerpath   cgpath   

   近期需要完成一个功能，就是要在屏幕上动态地完成绘制一个曲线。这个曲线可以用来完成描述数据在一定时间内的变化等。大概就是下面这个效果。

   这个效果要如何来完成呢？需要用到这三个类  UIBezierPath  CAShapeLayer  和 CABasicAnimation 。其中UIBezierPath用来绘制相应地曲线路径，CAShapeLayer用来为Path提供展示的位置，并且将CABasicAnimation所创建的动画加入到Path之上。

   首先我们将我们所希望的path创建出来：

UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(0.0,20.0)];
    [path addLineToPoint:CGPointMake(120.0, 500.0)];
[path addLineToPoint:CGPointMake(220, 0)];
    [path addLineToPoint:CGPointMake(310, 40)];
    [path addLineToPoint:CGPointMake(SCREEN_WIDTH, 110)];

    然后我们再为CAShapeLayer创建自己的属性，并且将我们的path赋值给它。如果没有这个赋值的话，这个layer就不能为我们画出这个效果了，并且也是一个不完整的layer.

CAShapeLayer *pathLayer = [CAShapeLayer layer];
    pathLayer.frame = self.view.bounds;
    pathLayer.path = path.CGPath;
    pathLayer.strokeColor = [[UIColor redColor] CGColor];
    pathLayer.fillColor = nil;
    pathLayer.lineWidth = 2.0f;
    pathLayer.lineJoin = kCALineJoinBevel;
    
    [self.view.layer addSublayer:pathLayer];

     最后，我们将动画赋值给我们的layer.我们的动画效果中，可以改变其中的一些参数来控制它的绘画效果。

CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    pathAnimation.duration = 2.0;
    pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
    pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];
    [pathLayer addAnimation:pathAnimation forKey:@"strokeEnd"];

    现在我们运行这些代码，就可以获得前面图片中的效果了~     

iOS上动态绘制曲线

标签：动画   calayerpath   cgpath   

原文地址：http://blog.csdn.net/sinat_21181563/article/details/43762981