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 14,500+ Swift developers and enthusiasts who get my weekly updates.

  • Shrimant Nikate

    How can we simulate the Local Notificaiton in Watch App ?

    I will be able to simulate the Remote Notification by using .json file.

  • Antonio

    how i can execute something else after animation? if i update the text inside a label after the animation, the label is updated when animation start…

  • Nick Walter

    If you don’t want to rename everything manually here is how you can do it in Yosemite http://lifehacker.com/easily-batch-rename-files-in-yosemite-1648423222

  • Mark

    Great post. Thanks.

    I just love the minions. I can watch that clip over and over and over again and I still laugh every time.

  • Pingback: A quick guide to designing the UI for Apple Watch - Nitin Nain()

  • andre

    You could write this same code in Objective-C? Thank you, Andre.

  • Mike Kelly

    thank you, Natasha!!!!!! you saved my app with this animation code!!!

  • Brian Rojas

    Thanks!! I knew I should have googled it first

  • Tim

    for continuous animation, Apple’s documentation states you should use repeatCount:0 for indefinite animations. Int.max technically speaking will not loop forever.

  • Neither solution works. Both by using the storyboard and the programmatic solution, the image remains blank.