animationCAShapeLayer

我用这个代码绘制一个图表：

CAShapeLayer *curentGraph = [CAShapeLayer new]; CGMutablePathRef linePath = CGPathCreateMutable(); curentGraph.lineWidth = 3.0f; curentGraph.fillColor = [[UIColor clearColor] CGColor]; curentGraph.strokeColor = [colorGraph CGColor]; for (NSValue *value in arrOfPoints) { CGPoint pt = [value CGPointValue]; CGPathAddLineToPoint(linePath, NULL, pt.x,pt.y); }; curentGraph.path = linePath;CGPathRelease(linePath); [self.layer addSublayer:curentGraph]; 

看起来像这样

但是我有一个问题。 我需要animation显示graphics。 每一个点都应该从y = 0到y = pt.y 就像他们在这个网站上的图表一样。

我该如何为我的graphics制作animation？

Answer 1

这里是一个CAShapeLayer子类，它允许你隐式地animation它的path （而不必声明一个CABasicAnimation ）：

接口：

 @interface CAShapeLayerAnim : CAShapeLayer @end 

---

执行：

 @implementation CAShapeLayerAnim - (id<CAAction>)actionForKey:(NSString *)event { if ([event isEqualToString:@"path"]) { CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:event]; animation.duration = [CATransaction animationDuration]; animation.timingFunction = [CATransaction animationTimingFunction]; return animation; } return [super actionForKey:event]; } @end 

Answer 2

CAShapeLayer上的path属性是可以animation的。 这意味着您可以创build一个path，其中每个y值为0.0并且从该path到实际graphics的animation。 只要确保path具有相同的点数。 这应该很容易，因为你已经有了循环。

 CGMutablePathRef startPath = CGPathCreateMutable(); for (NSValue *value in arrOfPoints) { CGPoint pt = [value CGPointValue]; CGPathAddLineToPoint(startPath, NULL, pt.x, 0.0); } 

然后，您可以通过为@"path"键创buildCABasicAnimation来为path设置animation。

 CABasicAnimation *pathAppear = [CABasicAnimation animationWithKeyPath:@"path"]; pathAppear.duration = 2.0; // 2 seconds pathAppear.fromValue = (__bridge id)startPath; pathAppear.toValue = (__bridge id)linePath; [yourShapeLayer addAnimation:pathAppear forKey:@"make the path appear"]; 

Answer 3

对于animation，您需要使用strokeStart和strokeEnd属性。

在Ole Begemann博客文章中查看示例CAShapeLayeranimation。

从文档strokeStart ：

此属性的值必须在0.0到1.0的范围内。 此属性的默认值是1.0。

结合strokeEnd属性，该属性定义中风path的子区域。 此属性中的值指示沿着开始抚摸的path的相对点，而strokeEnd属性定义结束点。 值为0.0表示path的开始，而值为1.0表示path的结束。 中间的值沿path长度线性解释。