WatchKit: Let’s Animate!

Posted on November 24th, 2014

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.

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.
- Natasha Murashev
  
  I haven’t done much with Local Notifications, but try having a button in your iPhone app that sends out a UILocalNotification and see if it works. https://developer.apple.com/library/iOs/documentation/iPhone/Reference/UILocalNotification_Class/index.html.
  - Rono
    
    I tried to send a local notification, but I did not manage to make it work. Have you been more successful?
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.
fbartolom

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

Thanks, I’ve been looking for something like this for several hours