AppleWatch 圆形进度（或径向弧形进度）出现图像错误

Question

我正在使用 WatchKit 为 Apple Watch 开发一个应用程序，我需要在录制音频时实现一个循环进度，类似于 Apple 演示。

我不知道 WatchKit 是否包含默认情况下执行此操作的功能，所以我创建了自己的图像（13 秒 12 秒 [总共 209 KB]），我使用计时器进行更改。

这是我的源代码：

按钮操作 start/stop 录音

- (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];
   }

}

计时器结束或再次点击按钮时的动作

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

改变进度的方法

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

这是一张显示错误的 gif 动图。它开始显示但随机更改图像，直到它得到几秒钟。（注意：我已经检查过第一张图片是否有正确的进度）

更新（其他解决方案）：使用 startAnimating

有一种使用 startAnimatingWithImagesInRange:duration:repeatCount

显示循环进度的新方法

您需要指定动画的图像范围和持续时间。请参阅下面的示例：

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

Answer 1

我认为这是 WatchKit 解释图像名称的方式的副作用。

以数字结尾的图像名称用于表示动画图像中的帧，因此 "ic_playing_elipse_12_10" 被解释为名为 "ic_playing_eclipse_12_1" 的图像的第一帧，当您希望它显示您的第一个。

您应该可以只更改图片名称，这样数字就不会出现在图片名称的最后部分，它会修复它。

Answer 2

我知道这个问题已经回答了，但我想更好地解释一下 startAnimating 的解决方案。

[myElement startAnimatingWithImagesInRange:NSMakeRange(imageIdBegin, imageIdEnd) duration:duration repeatCount:repetitions];

为了使用它，您需要一组按您想要的名称命名但具有顺序 ID 的图像。例如：progress_0.png、progress_1.png、progress_2.png、..、progress_n.png

您可以使用 NSMakeRange(imageIdBegin, imageIdEnd) 中的值来决定开始索引和结束索引，仅指示数字 ID（而不是完整的图像名称）

当然，您需要以秒为单位指示动画的持续时间，WatchKit 会为您插值以在初始索引和结束索引之间为您的图像设置动画。

最后，您可以指明是否要重复此动画（例如加载操作）。不想重复的就得标1.

我希望这可以帮助更多人在他们的 AppleWatch 应用程序中执行圆形进度或其他动画:)

AppleWatch 圆形进度（或径向弧形进度）出现图像错误

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

iphone

objective-c

ios

apple-watch