iOS上动态绘制曲线

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

   技术分享

   这个效果要如何来完成呢?需要用到这三个类  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"];

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

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。