AppleWatch circle progress (or radial arc progress) with images error

Question

I'm developing an app for Apple Watch using WatchKit and I need to implement a circular progress while recording audio, similar to Apple demos.

I don't know if WatchKit includes something to do it by default so I have created my own images (13 for 12 seconds [209 KB in total]) that I change with a timer.

This is my source code:

Button action to start/stop recording

- (IBAction)recordAction {
   NSLogPageSize();
   NSLog(@"Recording...");

   if (!isRecording) {
      NSLog(@"Start!");
      isRecording = YES;

      _timerStop = [NSTimer scheduledTimerWithTimeInterval:12.0
                                                  target:self
                                                selector:@selector(timerDone)
                                                userInfo:nil
                                                 repeats:NO];

      _timerProgress = [NSTimer scheduledTimerWithTimeInterval:1.0
                                                      target:self
                                                    selector:@selector(progressChange)
                                                    userInfo:nil
                                                     repeats:YES];
   } else {
       NSLog(@"Stop :(");
       [self timerDone];
   }

}

Action when timer is finished or if tap again on the button

-(void) timerDone{
   NSLog(@"timerDone");
   [_timerProgress invalidate];
   _timerProgress = nil;
   [recordButtonBackground setBackgroundImageNamed:[NSString stringWithFormat:@"ic_playing_elipse_12_%d", 12]];
   counter = 0;
   isRecording = NO;
 }

Method to change progress

- (void)progressChange
{
  counter++;
   NSLog(@"%d", counter);
   NSString *image = [NSString stringWithFormat:@"ic_playing_elipse_12_%d", counter];
   [recordButtonBackground setBackgroundImageNamed:image];
   NSLog(image);
}

This is a gif showing the bug. It starts to show but change the image randomly until it gets a pair of seconds. (Note: I have already checked that the first images have the right progress)

Update (other solution): using startAnimating

There is a new way to show a circle progress using startAnimatingWithImagesInRange:duration:repeatCount

You need to specify the images range and the duration for your animation. See an example below:

[self.myElement startAnimatingWithImagesInRange:NSMakeRange(0, 360) duration:myDuration repeatCount:1];

Answer 1

I believe this is a side-effect of the way WatchKit interprets image names.

Image names ending in numbers are used to represent frames in an animated image, so "ic_playing_elipse_12_10" is being interpreted as the first frame of the image named "ic_playing_eclipse_12_1" and your 10th image gets displayed when you want it to display your first one.

You should be able to just change your image names so the number isn't the last part of the image name and it will fix it.