动画CAShapeLayer [英] Animation CAShapeLayer

问题描述

我使用以下代码绘制图表：

I draw a graph with this code:

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];

看起来像这样

< img src =https://i.stack.imgur.com/Zgnhz.pngalt =图表截图>

但是我遇到了问题。我需要为图表显示动画。每个点应该从位置 y = 0 上升到 y = pt.y 。就像他们在本网站上的图表中所做的那样。

But I have a problem. I need to animate the graph as it appears. Every point should move up from position y = 0 to y = pt.y. Like they do in the graph on this site.

如何为我的图形设置动画？

How do I animate my graph like that?

推荐答案

CAShapeLayer上的路径属性是可动画的。这意味着您可以创建一个路径，其中每个y值 0.0 以及从该路径到实际图形的动画。只需确保路径具有相同的点数。这应该很简单，因为你已经有了循环。

The path property on CAShapeLayer is animatable. This means that you can create one path where every y value is 0.0 and the animate from that path to the real graph. Just make sure that the paths have the same number of points. This should be easy, since you already have the loop.

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

然后你可以通过创建 CABasicAnimation为路径设置动画表示 @path键。

Then you can animate the path by creation a CABasicAnimation for the @"path" key.

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"];

这篇关于动画CAShapeLayer的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！