StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POAnimating the drawing of a line
text
Body
copied!<p>I'm trying to animate the drawing of a line by the following way:</p> <h2>.h</h2> <pre><code>CAShapeLayer *rootLayer; CAShapeLayer *lineLayer; CGMutablePathRef path; </code></pre> <h2>.m</h2> <pre><code> path = CGPathCreateMutable(); CGPathMoveToPoint(path, nil, self.frame.size.width/2-100, 260); CGPathAddLineToPoint(path, nil, self.frame.size.width/2+100.0, 260); CGPathCloseSubpath(path); self.rootLayer = [CALayer layer]; rootLayer.frame = self.bounds; [self.layer addSublayer:rootLayer]; self.lineLayer = [CAShapeLayer layer]; [lineLayer setPath:path]; [lineLayer setFillColor:[UIColor redColor].CGColor]; [lineLayer setStrokeColor:[UIColor blueColor].CGColor]; [lineLayer setLineWidth:1.5]; [lineLayer setFillRule:kCAFillRuleNonZero]; [rootLayer addSublayer:lineLayer]; [self performSelector:@selector(startTotalLine) withObject:nil afterDelay:1.5]; - (void)startTotalLine { CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"animatePath"]; [animation setDuration:3.5]; animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; [animation setAutoreverses:NO]; [animation setFromValue:(id)path]; [animation setToValue:(id)path]; [lineLayer addAnimation:animation forKey:@"animatePath"]; } </code></pre> <p>The line had drawn before the <code>startTotalLine</code> method is invoked. Also, the <code>startTotalLine</code> method doesn't affect the line.</p> <p>I want it to animate the the line drawing from right to left.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload