0

I'm trying to shrink a circular CAShapeLayer but using the key path 'path' does not seem to be working.

CGPathRef startPath = [UIBezierPath bezierPathWithOvalInRect:startRect].CGPath;
CGPathRef endPath   = [UIBezierPath bezierPathWithOvalInRect:CGRectInset(startRect, 15, 15)].CGPath;

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"path"];
animation.duration          = 1.0;
animation.fromValue         = (__bridge id)startPath;
animation.toValue           = (__bridge id)endPath;
animation.autoreverses      = YES;
animation.repeatCount       = CGFLOAT_MAX;
animation.timingFunction    = [CAMediaTimingFunction functionWithControlPoints:0.6 :0.3 :0.8 :0.45];

//circleLayer is a CAShapeLayer
[self.circleLayer addAnimation:animation forKey:@"pathAnimation"];

I think i must be misunderstanding about how a path animation works because pretty much identical code seems to work fine if i am try to animate, say, the opacity or the transform.

Any ideas?

Sean Danzeiser
  • 9,141
  • 12
  • 52
  • 90
  • On the top of my mind, I can't spot what is wrong. I have been able to get [very similar code](http://stackoverflow.com/a/18683845/608157) to work before. So, can you verify that the two paths are reasonable and work (mainly verify that startRect is large enough to be inset like that). You could test this by simply assigning the endPath to the circle layer and verify that it works (without an animation) – David Rönnqvist Mar 06 '14 at 08:19
  • What's `startRect`? If it's smaller than 30x30, it will be CGRectZero when inset, thus the `endPath` might be undefined. Because apart of that, everything seems perfect. – Cyrille Mar 18 '14 at 15:55

1 Answers1

1

I recently had the same question and ended up solving it by creating the circle, then animating the scale CGAffineTransform. In the view whose layer is the circle, I simply used

CGAffineTransform transform = CGAffineTransformIdentity;
transform = CGAffineTransformScale(transform, scaleX, scaleY);

[UIView animateWithDuration: 0.5 animations: ^{
    self.transform = transform;
}];

Hope this helps!

Cameron
  • 1,142
  • 8
  • 32