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"];
现在我们运行这些代码,就可以获得前面图片中的效果了~
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。