Simple Animation with WatchOS 2.0

In this tutorial I walk you through how to make a simple spinning fan animation using Motion app for your watch, then we load the animation in Xcode and using Interface Builder we setup the necessary setting for the animation to work on the watch.

Fist you need a fan Image : which can be downloaded here .
Credit to Exhaust System by Krish from the Noun Project . (side note, I really love the Noun Project, you can find really cool stuff in there). for the sake of visibility, I changed the background to white.

Now start Motion and open project browser and select Motion Project.
in the left panel do following changes before clicking open :

Preset : Custom 
Resolution : 100x100 (You can change this to whatever you want) 
Aspect Ratio : Square 
Frame Rate : 30 fps (you can choose 60 if you want to have a smoother animation but I am pretty satisfied with the 30fps, plus you will be dealing with half number of frames compared to 60)

Your project panel should look like this :

Project Browser

Next open up finder and drag and drop you image into the timeline.

click on your imported image on the timeline and on the right side of the timeline select Settings > Basic Motion > Spin

Basic Motion

Now on the left side panel, select Inspector. here you have the option to change various settings of your image, but for now we want to concentrate on the Behaviour tab.

Select the behaviour tab and enable the Spin animation if it’s not already enabled and set the Sping Rate to 300 Degrees. you can play with this to change the spinning speed of the animation.

Now go to the timeline and hit play and you got yourself a nice spinning fan :].

Our work in Motion is almost over, we just need to find the best way to export this animation, but before going further, lets do a quick dive into Apple HIG for watch and checkout platform requirements first.

According to Apple we need a sequences of two or more PNG images (can also be JPG) to achieve animation on the watch. Lucky for us, Motion app has exactly the right export function that does the job for us. On toolbar click Share and select Export Image Sequence. I used all the default configuration and clicked next, but I’m sure you can do some fine tunings using the render tab.
Save the image set in a folder and open up the folder to inspect exported files, You need to take care of two things here which is a bit of hassle but I found no quick way around it.

  • First you need to carefully select your start and end frame. selecting the wrong ending frame will make your animation look laggy.
  • You also need to rename the file name since Motion exports with lots of zeros and “frame” as prefix, which might not look good in your project.
  • If you want to make things easier for yourself in Xcode, add @2x prefix to your filename.

for this project I selected the sequence 0 to 36 so your first file should be [email protected] and [email protected] should be last one.

o.k that renaming took a looong time and I’m sure someone will come up with a way smarter solution for this problem but lets start Xcode and finish up our animation.

Click on the Assets folder inside the Watch group in your project and drag and drop your Motion exported folder into the Asset Catalogue.

remember that @2x extension you added earlier? Well now the image is in proper location since watch reads 2x images from your catalogue.

Next go into interface builder and add an Image from Object Library to the canvas.

Select attribute inspector and do following changes

Image : fan 
// note the image name has no sequence number!
Mode : Aspect Fit
Animate : Yes 
Animate on the Load : Enabled 
Horizontal Alignment : Center 
Vertical Alignment : Center 
Size : Height > Relative to container

Select the watch target and hit run…

And Voila
You got yourself a nice watch Animation.

You can also take things a bit further by using

startAnimationWithImagesInRange

Apple has a good talk on WatchKit Animation that I recommend checking out.