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:

MinionSoccerFrame

There was a total of 131 frames!

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

Interface_storyboard Animation

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.

Interface_storyboard

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!

Animate Images WatchKit

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.

Enjoy the article? Join over 20,000+ Swift developers and enthusiasts who get my weekly updates.