Animate line segment in iOS

Question

In iOS, I would like to create a line segment object and animate its start and end points (I can do this in Microsoft's WPF).

Currently, I create a line segment object as a tiny CALayer that I stretch and rotate using a transform.

+(LayLine*) layLineWithStartPoint:(CGPoint)ptStart andEndPoint:(CGPoint)ptEnd{
    LayLine* line = [[LayLine alloc] init]; 
    line.backgroundColor = [UIColor blackColor].CGColor;
    line.frame = CGRectMake(0,-1,1,2);  // Line 1 pixel long and 2 pixel wide line segment
    line.anchorPoint = CGPointMake(0,0);

    line.affineTransform = [LayLine affineTransformationForLineSegment:ptStart to:ptEnd];   
    return line;
}

I can animate this line segment by changing its transform.

This works semi-good, but not perfectly, since, during the animation, the end points does not follow straight lines, as I would like. I therefore wonder if there is a better method to create a line segment object that I can animate?

What sort of animation are you talking about? Do the two points travel on different paths or are they just different locations on the same, constant path? — Tommy, Mar 01 '13 at 21:07
@Tommy, I am not sure I understand your question, but ptStartA-ptEndA should move to ptStartB-ptEndB (line segment B may be perpendicular to line segment A). — ragnarius, Mar 01 '13 at 21:12

score 3 · Accepted Answer · edited May 23 '17 at 12:03

3

You can use a CAShapeLayer and create a CGPath containing only two control points. The path property of CAShapeLayer itself actually is animatable (as long as the new path has the same number of points) plus you get all the transform capabilities of CALayer. And as Tommy just mentioned, you can play with strokeStart and strokeEnd for some pretty cool animations (there also is lineDashPatternwhich animates nicely with lineDashPhasebut i guess you won't need that).

Code Sample from this question:

CAShapeLayer *lineShape = nil;
CGMutablePathRef linePath = nil;
linePath = CGPathCreateMutable();
lineShape = [CAShapeLayer layer];

lineShape.lineWidth = 1.0f;
lineShape.lineCap = kCALineJoinMiter;
lineShape.strokeColor = [[UIColor redColor] CGColor];

CGPathMoveToPoint(linePath, NULL, x, y);
CGPathAddLineToPoint(linePath, NULL, toX, toY);

lineShape.path = linePath;
CGPathRelease(linePath);

edited May 23 '17 at 12:03

Community

1
1

answered Mar 01 '13 at 21:10

Martin Ullrich

94,744
25
252
217

2

... and the question I asked is relevant because `strokeEnd` and `strokeStart` properties are animatable too, so you can leave the path alone and just animate which portion of it you draw if that's what you're interested in. E.g. I use this for a circular progress bar in one of my apps — it's just a circular path with a fat stroke and I let Core Animation do the work on `strokeEnd`. – Tommy Mar 01 '13 at 21:31
To animate the path I must convert it to an NSValue somehow? – ragnarius Mar 01 '13 at 21:54
1

i don't know how you animate.. but CGPathRef can be bridged to an `id` type. see http://stackoverflow.com/questions/9513082/cashapelayer-animating-path-glitches-flickers-from-ellipse-to-rect-and-back – Martin Ullrich Mar 01 '13 at 22:05

Animate line segment in iOS

1 Answers1