Apple Watch Animations 101: A Complete Guide

• Core Animation does not exist in WatchKit, this is by far the biggest limitation and maybe the biggest pain.
• You are designing animations for a 38mm-42mm screen so all those subtle animations that you love will not work on a screen of this size, think big, bold, bright animations.
• File size – every animation that you create will now take up a lot of space in your app so whenever you come up with an animation make sure that it is really necessary.

In Watchkit you have to use a series of images to create your animations, very similar to how you would animate a sprite in a game. This means you can not animate dynamic content so all your animations have to be based on fixed pieces of UI. Lets take a look at how we implement an animation on WatchKit:

WKInterfaceImage *animatedImage = [WKInterfaceImage new];

[animatedImage setImageNamed:@“loadingIndicator-”];

[animatedImage startAnimatingWithImagesInRange:NSMakeRange(0, 49) duration:1.0 repeatCount:INFINITY];

This creates an animated image that transitions through 50 images until stopped.

• Firstly we create a WKInterfaceImage, we would normally add this to our storyboard file and link it to a property, but this is better for demo purposes.
• Next, we set the image name to “loadingIndicator-”. WatchKit will look for images in numerical order after the “-” so our first image would be named “loadingIndicator-0”, the second named “loadingIndicator-1” and so on.

• To start the animation we give it a NSRange, duration and a repeat count.

If you’re an expert iOS developer you’re probably thinking that this way of making watch animations is very basic and tedious to what you’re used to and you would be right, it is! If you’re anything like me you will be thinking you can make your own solution rather then using this. Trust me on this I have tried and nothing I made was efficient enough.

I tried to create an animation renderer using UIKit and CoreAnimation to create a UIView the size of the watch interface off screen that would render an animation and snapshot it into images. I got it all working but no matter what frame rate I captured the animation frames at it was simply too inefficient and wouldn’t generate the images and get them on screen quick enough. Don’t even get me started on the UI bugs it caused. I really wish it had worked, it would have been beautiful.

All though this animation framework is extremely limited this doesn’t mean you have to stop creating awesome Apple Watch animations.

Here is one we made ourselves:

To create the animation above we used Adobe After Effects. It is the simplest way to create Apple Watch animations and export them in the format that WatchKit requires. Hopefully as an app designer you should be pretty familiar with this.

Good news! You can use Core Animation to make your animations and render your WatchKit images, here is the Github project to do it: Flip Book. If you are anything like me and you have no idea how to use animation software but love Core Animation then this is the right tool for you! If not feel free to give Adobe After Effects a try.

This is what has worked best for us but feel free to use whatever you feel most comfortable using.

This form of animating majorly increases the size of your app. Every second of animation can take up to 2mb’s depending on how large or detailed your images are. As an app developer you should be trying to make your apps as small as they can be, so please be conservative with what you animate and how complex your animations are. As I have said many times really think how much each animation enhances your app and how necessary it really is.

Maybe one day we will get Core Animation on the watch and be able to make all the animations we desire but for now we have to make the best of what we have got.

Developing for the watch is kind of like going back to iOS 3 again but all developers like a challenge right?