Transformation of CAShapeLayer

Question

I am drawing a quarter circle using CAShapeLayer.On single tap i want to transform it by 90 degree.But when i do it,layer is transforming and is going out of screen.I need the rotation around the centre point.Let's assume the centre point is (100,100). Here is my code :

CGMutablePathRef path = CGPathCreateMutable();
//CGPathMoveToPoint(path, NULL, self.bounds.size.width/2, self.bounds.size.height/2);
CGPathAddArc(path, NULL, self.bounds.size.width/2, self.bounds.size.height/2, 100, (0), (M_PI_2), NO);
CGPathAddArc(path, NULL, self.bounds.size.width/2, self.bounds.size.height/2, 100-50, (M_PI_2), (0), YES);
CGPathCloseSubpath(path);

CAShapeLayer* arcLayer = [[CAShapeLayer alloc]init];
arcLayer.path = path;
arcLayer.fillColor = [UIColor yellowColor].CGColor;

[self.layer addSublayer:arcLayer];

Animation code :

  CABasicAnimation *spin = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];

        spin.removedOnCompletion = NO;

        spin.fillMode = kCAFillModeForwards;

        [spin setByValue:[NSNumber numberWithFloat:M_PI_2]];
        //layer.affineTransform = CGAffineTransformMakeRotation(M_PI_2);
        [spin setDuration:1.0];
        [layer addAnimation:spin forKey:@"transform.rotation"];

Please help me.

Answer 1

The problem you are seeing happens because the layer doesn't have a size. You still see the path because it is not clipped to the bounds of the layer. The rotation is applied relative to the center of the layer but without a size that will be (0,0) in it's own coordinate system (same coordinate system as the path uses).

You can see what I mean by setting a strong background color (not fill color) and giving the layer an arbitrary frame. The final frame you want is very likely the bounding box of the path.

At this point you should see that the view rotates around the expected point. Now you can remove the background color again.

Answer 2

try setting anchor point of layer before the animation. eg:

    layer.anchorPoint = CGPointMake(0.5f, 0.5f);

(0,0) is top left corner of layer and (1,1) is bottom right.