Expand in place animation in CAShapeLayer

Question

I'm trying hard to animate a CAShape Layer but couldn't get it right.I have a layer. In a UIView subclass i create CALayer as follows -

CAShapeLayer *shape1 = [CAShapeLayer layer];
shape1.fillColor = [[UIColor clearColor] CGColor];
shape1.strokeColor = [[UIColor purpleColor] CGColor];

CGRect frame1 = CGRectMake(13, 13, self.bounds.size.width - 26, self.bounds.size.height - 26);
shape1.frame = frame1;
shape1.position = CGPointMake(0,0);
shape1.anchorPoint = CGPointMake(self.tableContainerView.frame.size.width/2.0,
                                 self.tableContainerView.frame.size.height/2.0);
shape1.path = [self pathForFrame:frame1];
shape1.strokeEnd = 0.0f;
shape1.lineWidth = 1.0;

[self.layer addSublayer:shape1];

I want to animate it so that it reaches some where it looks slightly bigger than initial while maintaining the center, this would create expand in place effect. My scaling animation code is -

CABasicAnimation *animation2 = [CABasicAnimation animationWithKeyPath:@"transform.scale"];

//animation2.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];
animation2.toValue =  [NSValue valueWithCATransform3D:CATransform3DMakeScale(1.1, 1.1, 1.1)];
animation2.repeatCount = 1;
animation2.removedOnCompletion = NO;
animation2.fillMode = kCAFillModeForwards;
animation2.duration = 10;
animation2.beginTime = CACurrentMediaTime() + 4;
[shape1 addAnimation:animation2 forKey:nil];

Any help appreciated. Thanks in advance.

Answer 1

You can use CAKeyFrameAnimation to have better control over the animation.

You can simply do:

 CAMediaTimingFunction *linearTiming = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
 CAKeyframeAnimation *scaleXAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale.x"];
    scaleXAnimation.duration = 0.300;
    scaleXAnimation.values = @[@(0.100), @(0.120), @(0.140), @(0.160)];
    scaleXAnimation.keyTimes = @[@(0.000), @(0.333), @(0.667), @(1.000)];
    scaleXAnimation.timingFunctions = @[linearTiming, linearTiming, linearTiming];
    scaleXAnimation.beginTime = 0;
    scaleXAnimation.fillMode = kCAFillModeBoth;

    [[self.yourView layer] addAnimation: scaleXAnimation forKey:@"ScaleUp_ScaleX"];

     //or if you are subclassing the uiview

     [[self layer] addAnimation: scaleXAnimation forKey:@"ScaleUp_ScaleX"];