Draw line then delete it

Question

with Xcode for iOS, I have animated a drawn line. I wish to delete it (or fade away) almost immediately. I have tried to repeat the code with the colour set to clear (red for the tests) as my background is a grid pattern. But I only get the last colour line drawn. Any ideas on drawing the lines in sequence one after each other?

{
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0.0,100.0)];
[path addLineToPoint:CGPointMake(150.0, 100.0)];
[path addLineToPoint:CGPointMake(155.0, 50.0)];
[path addLineToPoint:CGPointMake(160.0, 150.0)];
[path addLineToPoint:CGPointMake(165.0, 100.0)];
[path addLineToPoint:CGPointMake(350.0, 100.0)];


CAShapeLayer *pathLayer = [CAShapeLayer layer];
pathLayer.frame = self.view.bounds;
pathLayer.path = path.CGPath;
pathLayer.strokeColor = [[UIColor greenColor] CGColor];
pathLayer.fillColor = nil;
pathLayer.lineWidth = 2.0f;
pathLayer.lineJoin = kCALineJoinBevel;

[self.view.layer addSublayer:pathLayer];

CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pathAnimation.duration = 1.0;
pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];
[pathLayer addAnimation:pathAnimation forKey:@"strokeEnd"];
}

Thanks

See the answer to this for animating a fade in and out on a layer: http://stackoverflow.com/questions/8707104/coreanimation-opacity-fade-in-and-out-animation-not-working — Jenn, Apr 18 '14 at 15:18
Thanks, but can't seem to enter any of the cade in the link without lots of errors. `Implicit declaration of function 'CMTimeGetSeconds is invalid in C99` & `Implicit declaration of function `CMTimeAdd' is invalid in C99` & `Use of undeclared identifier 'img'` & `Use of undeclared identifier '_timeline'; did you mean 'timezone'?' & `Use of undeclared identifier 'titleLayer'` — user2963333, Apr 21 '14 at 06:48

score 1 · Answer 1 · answered Apr 18 '14 at 15:23

Add:

    pathAnimation.autoreverses = true;
    pathAnimation.removedOnCompletion = false;
    pathAnimation.fillMode = kCAFillModeForwards;

You'll also probably want to use the animation delegate functions to remove the layer on completion.

Alternatively, if you want a delay (even slight) before the animation reverses, or want to fade it out in a different manner than reversing the animation, you can use a CAAnimationGroup to execute a series of animations on the same timeline.

Thanks, but can't get this code to do anything no matter where I put it, sorry. Don't know what I'm doing wrong. — user2963333, Apr 21 '14 at 06:52

score 0 · Answer 2 · answered Apr 21 '14 at 07:36

Thanks for all the help. I managed to find and successfully use code from the "Core Animation" Apple documentation. This is the first time I've managed that. Sorry for being slow, learning all the time. I had to replace "titleLayer" with "pathLayer". I'm sure that would have helped some of the suggestions. Thanks again.

Here's my working code. Added after the code I posted above, before the last curly bracket.

 CABasicAnimation* fadeAnim = [CABasicAnimation animationWithKeyPath:@"opacity"];

fadeAnim.fromValue = [NSNumber numberWithFloat:1.0];

fadeAnim.toValue = [NSNumber numberWithFloat:0.0];

fadeAnim.duration = 1.5;

[pathLayer addAnimation:fadeAnim forKey:@"opacity"];



// Change the actual data value in the layer to the final value.

pathLayer.opacity = 0.0;

Draw line then delete it

2 Answers2