title: Animating a circular UIBezierPath
body: <p>I've got a project where I'm animating a UIBezierPath based on a set progress. The BezierPath is in the shape of a circle and lies in a UIView and animation is done in drawRect using CADisplayLink right now. Simply put, based on a set progress <code>x</code> the path should radially extend (if <code>x</code>is larger than before) or shrink (if <code>x</code> is smaller). </p>
  
  <pre><code>self.drawProgress = (self.displayLink.timestamp - self.startTime)/DURATION;
  
  CGFloat startAngle = -(float)M_PI_2;
  CGFloat stopAngle = ((self.x * 2*(float)M_PI) + startAngle);
  CGFloat currentEndAngle = ((self.oldX * 2*(float)M_PI) + startAngle);
  CGFloat endAngle = currentEndAngle-((currentEndAngle-stopAngle)*drawProgress);
  
  UIBezierPath *guideCirclePath = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startAngle endAngle:endAngle clockwise:YES];
  </code></pre>
  
  <p>This is in the case of <code>x</code> shrinking since our last update. The issues I'm experiencing are actually a few:</p>
  
  <ol>
  <li>The shape <strong>always</strong> starts drawing at 45º (unless I rotate the view). I have not found any way to change this, and setting the <code>startAngle</code>to -45º makes no difference really because it always "pops" to 45. Is there anything I can do about this, or do I have to resort to other methods of drawing?</li>
  <li>Is there any other way that one should animate these things? I've read much about using <code>CAShapeLayer</code> but I haven't quite understood the actual difference (in terms of drawbacks and benefits) in using these two methods. If anyone could clarify I would be very much obliged!</li>
  </ol>
  
  <p><strong>UPDATE:</strong> I migrated the code over to CAShapeLayer instead, but now I'm facing a different issue. It's best described with this image: </p>
  
  <p><img src="https://i.stack.imgur.com/83N18.png" alt="enter image description here"></p>
  
  <p>What's happening is that when the layer is supposed to shrink, the thin outer line is still there (regardless of direction of movement). And when the bar shrinks, the delta of 1-<code>x</code>isn't removed unless I explicitly make a new white shape over it. The code for this follows. Any ideas?</p>
  
  <pre><code>UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startAngle endAngle:stopAngle clockwise:YES];
  CAShapeLayer *circle = [CAShapeLayer layer];
  circle.path = [circlePath CGPath];
  circle.strokeStart = 0;
  circle.strokeEnd = 1.0*self.progress;
  
  // Colour and other customizations here.
  
  if (self.progress &gt; self.oldProgress) {
      drawAnimation.fromValue = @(1.0*self.oldProgress);
      drawAnimation.toValue = @(circle.strokeEnd);
  } else { 
      drawAnimation.fromValue = @(1.0*self.oldProgress);
      drawAnimation.toValue = @(1.0*self.progress);
      circle.strokeEnd = 1.0*self.progress;
  }
  
  drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; //kCAMediaTimingFunctionEaseIn
  [circle addAnimation:drawAnimation forKey:@"strokeEnd"];
  </code></pre>
  
  <p><strong>UPDATE 2:</strong> I've ironed out most of the other bugs. Turned out it was just me being rather silly the whole time and overcomplicating the whole animation (not to mention multiplying by 1 everywhere, what?). I've made a gif of the bug I can't solve:</p>
  
  <p><img src="https://i.imgur.com/BOjgW0Z.gif" alt="radial control glitch"></p>
  
  <p>Any ideas?</p>
  
  <p><strong>UPDATE 3:</strong> (and closure). I managed to get rid of the bug by calling</p>
  
  <pre><code>[self.layer.sublayers makeObjectsPerformSelector:@selector(removeFromSuperlayer)];
  </code></pre>
  
  <p>And now everything works as it should. Thanks for all the help!</p>