The Apple Watch will be available this Spring 2015 and an important consideration for building apps will be performance. 

The SDK for building apps, called WatchKit, was unveiled in late November 2014. One of the most surprising things about WatchKit is that there is no Core Animation. To achieve an animation effect, you instead use a sequence of images, flipbook-style. On Twitter, a question was posed:

I couldn't find documentation. But, the answer I was able to determine is: 30 frames per second (fps)Update: Apple employee @behrens says that the frame rate will be 8-10 frames per second if you push form the phone. If you play the animation form that bundle on the watch, it will run at full speed.

Research

A few things we know:

So in order to test this, I made some numbered images in Photoshop. Then I imported them to Xcode, and had WatchKit animate them. I used the Stopwatch on my iPhone to time how long the full loop took, and then calculated the frames per second.

If you'd like to try this for yourself, watch the video tutorial or read on for the written tutorial. 

Video Tutorial

Written Tutorial

Generating Numbered Images in Photoshop

The first step is to create 1024 images, each with its own number smack dab in the center. To do this, we can use Photoshop's Variables and Data Sets features.

Open Photoshop. Go File\New.

Name the file number. Set Height to 312, Width to 312. (The resolution of the 42mm Apple Watch is 312px wide) Press OK.

Press 'D' to get the default foreground/background colors. Press Alt+Delete to fill the layer with Black.

Press 'T' for the Type tool.

Set your Font to Avenir Next Condensed Heavy. Size to 145. Color to White. Alignment to Center.

Click anywhere on the canvas. Type '1024'. Press Enter.

Press 'V' to activate the Move tool. Drag the layer to position it in the center of the canvas.

SETTING UP A VARIABLE IN PHOTOSHOP

Go Image\Variables\Define.

Check Text Replacement. Name the variable, number. Click OK.

Generating a Data Set with Numbers

The next step is to generate the data set. To do this we'll make a spreadsheet in Numbers, the iWork app for Mac.

Open the Numbers app. One way to do this is to use Spotlight. Hit Command+[Spacebar] and begin typing the app name. In this case that is Numbers. Press Enter when you see it.

Go File\New.

Select Blank. Click Choose.

In the Format sidebar, change the Header columns to 0.

Drag the handle in the lower right to change the rows and columns to Row: 1025, Column: 1.

In the header row, type number. In the first two cells, enter 1 and 2.

Select the first two cells. Then drag the middle handle all the way to the bottom to fill in the rest of the numbers.

You'll end up with data like this: 1 to 1024.

Go File\Export To\CSV.

Click Next.

Save the file as numbers. Click Export.

Importing the Data Set into Photoshop

Switch back to Photoshop. Go Image\Variables\Data Sets.

Click Import.

Select the numbers.csv file you created. Click OK.

Click OK again.

Exporting multiple images from the data set in Photoshop

Go File\Export\Data Sets as Files.

Choose a folder. You might want to browse to Downloads. Make a new folder named, watchkit-anim-numbers.

Ensure the File Naming is set to Document Name + Data Set Number. Click OK.

Photoshop will begin generating all the files. After a while, it will finish and you can view the finished PSD files in Finder in the watchkit-anim-numbers folder. There will be 1024 images. The problem is, these are PSD files, but what we need for Xcode are PNG files.

Creating an action to save as PNG in Photoshop

In Photoshop, open the Actions panel. Click the button for New Action.

Name the action, save-png-and-close.

Go File\Save for Web.

Ensure it is set to PNG-24. Click Save.

You might want to make a new folder called, watchkit-anim-png, inside Downloads.

Click Save. (without changing the name of the file)

Hit Command+W to close the file. Click Don't Save.

Click the button to Stop recording the action.

CONVERTING MULTIPLE IMAGES FROM PSD TO PNG in Photoshop

Go File\Automate\Batch.

Use your save-png-and-close action. Choose your watchkit-anim-numbers folder as the Source. For Destination, select None. Click OK.

Photoshop will begin opening, saving, and closing all your files. After a while, it will finish and you can check your watchkit-anim-png folder in Finder.

Running the Animation in Xcode's Apple Watch iOS Simulator

Open Xcode. Go File\New\Project.

Select Single View Application. Click Next.

Name the Product watchkit-anim-test. Click Next.

With the project selected in the Project Navigator, go File\New\Target.

Select WatchKit App. Click Next.

Ensure Include Notification Scene and Include Glance Scene are unchecked. You won't need them. Hit Finish.

A confirmation dialog for the new scheme will pop up. Click Activate. This will allow you to run your Watch app in the Simulator.

In the Project Navigator, open the WatchKit App group. Hit Images.xcassets. Open Finder. Select all the images (Command+A). Drag them into the sidebar in Xcode.

drag-image-files-finder-xcode-xcassets-screenshot

Move into Interface.storyboard. From the Object Library drag an Image onto the interface.

Open the Assistant Editor. Control-drag from your image to right below the class definition in the InterfaceController. Name the outlet, numberImage.

Add the following code into the awakeWithContext function:

numberImage.setImageNamed("number")
numberImage.startAnimating()

Run by pressing the Play button.

The images start flying by. If you time the full loop from start to finish with a stopwatch, you'll get 34 seconds.

1024 frames / 34 seconds  30 fps

I've posted the code to GitHub. If you think of a fancy way to display the fps number, please submit a pull request.

Hope you enjoyed this tutorial. Let us know about your experiences with WatchKit animation in the comments.