Animations on the Apple Watch are completely different from what we use on the phone, not just from a technical point of view but also from a design point of view. I know that you love your crazy spring animations here, there and everywhere, but for the watch you’re going to have to give them up.
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.
• To start the animation we give it a NSRange, duration and a repeat count.
If you’re an iOS developer you’re probably thinking that this 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:
Not bad right? Just make sure you really think about how necessary your animation is and whether it really will enhance your app.
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?
Published on August 11, 2015, last updated on April 9, 2019