Programatically Set UIImage Animation with WatchKit

Question

I can't seem to figure out how to programmatically set a new image, via the outlet, and make it start animating.

Sequence

zeroEntering0.png
zeroEntering1.png
zeroEntering2.png
zeroEntering3.png
zeroEntering4.png

I imported the sequence of images into the Image.xcassets inside the WatchKit App

enter image description here

I can set the image in the interface builder to "zeroEntering" and set animating to "Yes" and it works correctly.

enter image description here

However, I want something more dynamic, I need a button press to choose a new animation sequence and start it off. If I try and set the image programmatically using the same name from the interface builder, the UIImage is nil.

enter image description here

What naming convention should I use when programmatically setting the UIImage? "zeroEntering", "zeroEntering0", "zeroEntering.png" or "zeroEntering0.png"

I tried using the two non-nil options and the image did not animate and went black.

anders anders · Accepted Answer · 2015-04-16T19:57:58

The answer is subtle and definitely got my wheels spinning for too long.

According to this beautiful article,

You should use setImageNamed(:) when the image you want to display is either cached on the watch on is in an asset catalog in the watch app’s bundle, and use setImage(:) when the image isn’t cached — this will transfer the image data to the Apple Watch over the air!

So, I kept my images in the assets catalog on the watch app, and switch to use,

[self.testImage setImageNamed:@"zeroEntering"];
[self.testImage startAnimatingWithImagesInRange:NSMakeRange(0, 4) duration:0.2 repeatCount:100];

Programatically Set UIImage Animation with WatchKit

2 Answers