WatchKit: Let’s Animate!

One of the most surprising things about WatchKit is that we no longer get to use our favorite UIKit components. Instead, we’re dealing with Interfaces, which do not have a layer property for us to animate with. Instead, to animate on the Watch, we have to essentially flip through many images.

To test out this functionality, I took a fun gif of Minions playing soccer, and used a random Gif Splitter I found online to extract the individual frames from the gif. I then renamed the results to be all of the same name, but with the frame number at the end, ending with @2x.pngs, and imported them into my Watch App Images.xcassets folder:

There was a total of 131 frames!

I then added an image into my Interface Controller, and set up the animation right there!

That’s it! When I run my app, it animates!

You can also do the animation in code if you’d like more control, such as specifying which frames you actually want to animate.

Notice that this time I set the duration of the entire animation to 15 seconds – now my animation is in slow motion!

As you might have noticed, the animation keeps looping. That’s because I set the repeat count to Int.max. To have the animation run only once, set the repeatCount to 1!

You also have full control in stopping the animation at any time. Just call stopAnimating() on your InterfaceImage.

Enjoy animating on the Apple Watch!

You can view the sourcecode on Github here.