Animations On Apple Watch With SpriteKit

With the next version of Bikemap, we are adding an Apple Watch app to track bicycle rides and display stats. For showing the heart rate, we wanted a nice animation of a pulsing heart.

Initially we tried to achieve this using the WKInterfaceImage. The basic concept for that is to create a bunch of images and play them like frames. However, the animation was sometimes a bit laggy, and it was very hard to tweak it — an external tool and maybe a designer is needed to modify the images.

We wanted a more realistic animation and more control over its parameters. As we already applied several game development patterns in the project, we turned to SpriteKit.

SpriteKit can also do animations with textures and for complex nodes it is ideal. Nevertheless, for a simple heart there is an easier approach. Various SKActions are available to execute, which can alter the structure and content of the node: scale, fade, rotate, move, resize, colorise, distort and so forth. The parameters of these animations, such as duration, timing function, start time, degrees, are easy to modify right in the interface builder, so the adjustments are visible instantly .

Another great thing about SKActions is that you can create a sequence from several animations and then loop the sequence. This is exactly what we have done with the different stages of the pulsing animation.