Animation for Layer in iOS

Question

I masked an image with BezierPath. I want to animate that mask image.

My code is as follow:

    UIBezierPath* bezierPath = [UIBezierPath bezierPath];
    [bezierPath moveToPoint: CGPointMake(84.95, 205.11)];
    [bezierPath addCurveToPoint: CGPointMake(122.89, 232.14) controlPoint1: CGPointMake(84.95, 205.11) controlPoint2: CGPointMake(110.81, 223.56)];
    [bezierPath addCurveToPoint: CGPointMake(124.33, 233.04) controlPoint1: CGPointMake(123.37, 232.46) controlPoint2: CGPointMake(123.85, 232.78)];
    [bezierPath closePath];

    CAShapeLayer *maskImage = [CAShapeLayer layer];
    maskImage.path = bezierPath.CGPath;
    maskImage.fillColor = [[UIColor blackColor] CGColor];
    _myImageView.layer.mask = maskImage;

    CAShapeLayer *border = [CAShapeLayer layer];
    border.path = bezierPath.CGPath;
    border.strokeColor = [UIColor redColor].CGColor;
    border.fillColor = [[UIColor clearColor] CGColor];
    border.lineWidth = 5;
    [_myImageView.layer addSublayer:border];

How can I animate this?

Thank you

Answer 1

Use following piece of code:

@property (nonatomic, retain) CAShapeLayer *animationLayer;

- (IBAction)drawPattern:(id)sender{
[self setup];

[self.animationLayer removeAllAnimations];

CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pathAnimation.duration = 10.0;
pathAnimation.fromValue = @(0);
pathAnimation.toValue = @(1);
[self.animationLayer addAnimation:pathAnimation forKey:@"strokeEnd"];
}

- (void)setup{
[self.animationLayer removeFromSuperlayer];
self.animationLayer = nil;

UIBezierPath* bezierPath = [UIBezierPath bezierPath];
[bezierPath moveToPoint: CGPointMake(84.95, 205.11)];
[bezierPath addCurveToPoint: CGPointMake(122.89, 232.14) controlPoint1: CGPointMake(84.95, 205.11) controlPoint2: CGPointMake(110.81, 223.56)];
[bezierPath addCurveToPoint: CGPointMake(124.33, 233.04) controlPoint1: CGPointMake(123.37, 232.46) controlPoint2: CGPointMake(123.85, 232.78)];

CAShapeLayer *pathLayer = [CAShapeLayer layer];

// provide frame & bounds so that path can be drawn over that.
pathLayer.frame = CGRectMake(35, 100, 250, 200);
pathLayer.bounds = CGRectMake(35, 100, 250, 200);
pathLayer.path = bezierPath.CGPath;
pathLayer.strokeColor = [UIColor redColor].CGColor;
pathLayer.fillColor = [[UIColor clearColor] CGColor];
pathLayer.lineWidth = 6.f;
pathLayer.lineJoin = kCALineJoinRound;

[self.view.layer addSublayer:pathLayer];
[self setAnimationLayer:pathLayer];
}

Please let me know if this works for you & also if anything else comes up.

Answer 2

At the end of your code try below one

CAShapeLayer *pathLayer;
CAShapeLayer *shapeLayer = [CAShapeLayer layer];

shapeLayer.path = [aPath CGPath];
shapeLayer.strokeColor = [[UIColor greenColor] CGColor];
shapeLayer.fillColor = nil;
shapeLayer.lineWidth = 5.0f;
shapeLayer.lineJoin = kCALineJoinBevel;

[myImageView.layer addSublayer:shapeLayer];
pathLayer = shapeLayer;
CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
pathAnimation.duration = 3.0;
pathAnimation.fromValue = @(0.0f);
pathAnimation.toValue = @(1.0f);
[pathLayer addAnimation:pathAnimation forKey:@"strokeEnd"];

Answer 3

We can animate the image with path using CABasicAnimation.

CABasicAnimation has position,path,transform,opacity,shadow......which including all layers keypaths,shape layer keypaths,CA layer keypaths,Text layer keypaths,Mask layer keypaths,UIView layer keypaths,Effect,Emit and replicator keypaths.

According to your question for drawing path we can use path and strokeEnd.But most prepare strokeEnd for accessing shape style properties.

So I think strokeEnd is the best one for animating the mask image with bezier path.

Below I give the code for path and strokeEnd also I diffrecicate both.

If I use animationWithKeyPath is path

The shape to be rendered and animatable.It is specifying the shape path.

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"];
animation.fromValue = @(0);
animation.toValue = @(1);
animation.duration = 6.0f;
[maskImage addAnimation:animation forKey:@"animatePath"];

The Path is a collection of individual components like lines and arcs that can be drawn and also animated.It is fundamental concept of Quartz 2D.

In below code I use strokeEnd

Generally if we want to access the shape style properties we can use strokeEnd

The relative location at which to stop stroking the path and animatable.

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation.fromValue = @(0);
animation.toValue = @(1);
animation.duration = 6.0f;
[maskImage addAnimation:animation forKey:@"strokeEnd"];

The value of this property must be in the range 0.0 to 1.0. The default value of this property is 1.0.

Also strokeEnd defines following thing

Combined with the strokeStart property, this property defines the subregion of the path to stroke. The value in this property indicates the relative point along the path at which to finish stroking while the strokeStart property defines the starting point .