title: animating the length of circular arrow mask in Core Animation
body: <p>I've created a circular animation using CAShapeLayer and masking.
  Here is my code:</p>
  
  <pre><code>- (void) maskAnimation{
  
  
      animationCompletionBlock theBlock;
      imageView.hidden = FALSE;//Show the image view
  
      CAShapeLayer *maskLayer = [CAShapeLayer layer];
  
      CGFloat maskHeight = imageView.layer.bounds.size.height;
      CGFloat maskWidth = imageView.layer.bounds.size.width;
  
  
      CGPoint centerPoint;
      centerPoint = CGPointMake( maskWidth/2, maskHeight/2);
  
      //Make the radius of our arc large enough to reach into the corners of the image view.
      CGFloat radius = sqrtf(maskWidth * maskWidth + maskHeight * maskHeight)/2;
  
      //Don't fill the path, but stroke it in black.
      maskLayer.fillColor = [[UIColor clearColor] CGColor];
      maskLayer.strokeColor = [[UIColor blackColor] CGColor];
  
      maskLayer.lineWidth = 60;
  
      CGMutablePathRef arcPath = CGPathCreateMutable();
  
      //Move to the starting point of the arc so there is no initial line connecting to the arc
      CGPathMoveToPoint(arcPath, nil, centerPoint.x, centerPoint.y-radius/2);
  
      //Create an arc at 1/2 our circle radius, with a line thickess of the full circle radius
      CGPathAddArc(arcPath,
                   nil,
                   centerPoint.x,
                   centerPoint.y,
                   radius/2,
                   3*M_PI/2,
                   -M_PI/2,
                   NO);
  
  
  
      maskLayer.path = arcPath;//[aPath CGPath];//arcPath;
  
      //Start with an empty mask path (draw 0% of the arc)
      maskLayer.strokeEnd = 0.0;
  
  
      CFRelease(arcPath);
  
      //Install the mask layer into out image view's layer.
      imageView.layer.mask = maskLayer;
  
      //Set our mask layer's frame to the parent layer's bounds.
      imageView.layer.mask.frame = imageView.layer.bounds;
  
      //Create an animation that increases the stroke length to 1, then reverses it back to zero.
      CABasicAnimation *swipe = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
      swipe.duration = 5;
      swipe.delegate = self;
      [swipe setValue: theBlock forKey: kAnimationCompletionBlock];
      swipe.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
      swipe.fillMode = kCAFillModeForwards;
      swipe.removedOnCompletion = NO;
      swipe.autoreverses = YES;
      swipe.toValue = [NSNumber numberWithFloat: 1.0];
  
      [maskLayer addAnimation: swipe forKey: @"strokeEnd"];
  
  
  }
  </code></pre>
  
  <p>This is my background image:
  <img src="https://i.stack.imgur.com/j7dtW.png" alt="enter image description here"></p>
  
  <p>This what is looks like when I run the animation:
  <img src="https://i.stack.imgur.com/8oF72.png" alt="enter image description here"></p>
  
  <p>But what I want, the arrow head is missing how to add this? 
  <img src="https://i.stack.imgur.com/v0Zqy.png" alt="enter image description here"></p>