I am attempting to use CALayer for animations. What I want is the circle to shrink and bounce back (which works) and a stroked circle to expand and fade out like this. Unfortunately the second ring on the subLayer doesnt animate. I am not sure why.
I setup my layers like so
- (void)setLayerProperties {
//The view’s Core Animation layer used for rendering.
CAShapeLayer *layer = (CAShapeLayer *)self.layer;
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)
byRoundingCorners:UIRectCornerAllCorners
cornerRadii:self.frame.size];
layer.path = bezierPath.CGPath;
layer.fillColor = _Color.CGColor;
rippleLayer = [[CAShapeLayer alloc] init]; // update from Andrea's answer
layer.path = bezierPath.CGPath;
layer.strokeColor = [UIColor blueColor].CGColor;
[layer addSublayer:rippleLayer];
}
I then animate then using these functions
- (void)pop{
CABasicAnimation *animation = [self animationWithKeyPath:@"transform.scale"];
[animation setFromValue:[NSNumber numberWithFloat:1.0f]];
[animation setToValue:[NSNumber numberWithFloat:0.8f]];
[animation setRemovedOnCompletion:YES];
[animation setDuration:0.15];
[animation setAutoreverses:YES];
[self.layer addAnimation:animation forKey:animation.keyPath];
rippleLayer.anchorPoint = CGPointMake(1, 1);
CABasicAnimation *scale = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
[scale setFromValue:[NSNumber numberWithFloat:1.0f]];
[scale setToValue:[NSNumber numberWithFloat:2.0f]];
[scale setRepeatCount:1];
[scale setDuration:1.0f];
//r[scale setRemovedOnCompletion:YES];
[scale setFillMode:kCAFillModeForwards];
[rippleLayer addAnimation:scale forKey:scale.keyPath];
}
It seems that you are creating rippleLayer as a normal CALayer, not a CAShapeLayer. path is not a property of CALayer as far as I remember, and you are giving path to the same layer as before. So you are adding a simple layer with no content at all.