title: Make a chronometer iOS animation with CABasicAnimation and CAShapeLayer
body: <p>I have made an animation for a chronometer in a quiz game.
  I want show in animation the background in the UIImageView *cronometro but my animation show the entire UIImageView.</p>
  
  <p>I want make this in animation:</p>
  
  <p><img src="https://i.stack.imgur.com/AkvKz.png" alt="Chrono OK"></p>
  
  <p>but i have this:</p>
  
  <p><img src="https://i.stack.imgur.com/gugHr.png" alt="Chrono wrong"></p>
  
  <p>This is my code:</p>
  
  <pre><code>//Chrono animation
  
  -(void) startCronometro{
  
      //Set timer
      contoAllaRovescia = TIME;
  
      [cronometro setImage:[UIImage imageNamed:@"cronoStart.png"]];
  
      maskLayer = [CAShapeLayer layer];
  
      CGFloat maskHeight = cronometro.frame.size.height;
      CGFloat maskWidth = cronometro.frame.size.width;
  
      CGPoint centerPoint;
      centerPoint = CGPointMake(cronometro.frame.size.width/2, (cronometro.frame.size.height/2) + 3);//+3 because the image is not centered in UIImageView
  
      //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 = 30;
  
      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.1;
  
      CFRelease(arcPath);
  
      //Install the mask layer into out image view's layer.
      cronometro.layer.mask = maskLayer;
  
      //Set our mask layer's frame to the parent layer's bounds.
      cronometro.layer.mask.frame = cronometro.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 = TIME;
      swipe.delegate = self;
      // [swipe setValue:@"string" forKey:@"key"];
      swipe.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
      swipe.fillMode = kCAFillModeForwards;
      swipe.removedOnCompletion = NO;
      swipe.toValue = [NSNumber numberWithFloat: 1.0];
  
      [maskLayer addAnimation: swipe forKey: @"strokeEnd"];
  
      //Aggiorno l'etichetta del conto alla rovescia ogni 0.1 millisecondi
      timer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(whileCronometro) userInfo:nil repeats:YES];
  
  }
  </code></pre>
  
  <p>Thank you.</p>