Preparing for the Apple Watch: a Prototype Heartbeat App

Animating the Heartbeat

The final thing is to do something interesting in those eight seconds, namely a little animation to make the heartbeat look realistic. Remember, the watch will have sensors to detect the actual heart rate, so showing live data like this is a nice touch!

Add two more properties to the class:

let shrinkFactor = CGFloat(2.0 / 3)
var expandFactor: CGFloat {
  return 1.0 / shrinkFactor
}

The shrinkFactor is how much the heart will contract in an animation. The expandFactor is just the inverse of the shrinkFactor, which you’ll use for the second half of the animation.

By doing it this way you ensure that the heart never looks pixelated. Imagine you have an image that is 500 pixels. If you shrink it down to 300 and then return to to 500, you never go beyond the original resolution and you keep the image sharp. Although Emoji is a vector font, when it is rendered in the label, it gets treated as pixels just like any other image.

Next, add the following method to the class to perform the actual animation:

func beat() {
  // 1
  UIView.animateWithDuration(currentBeatPattern.duration / 2,
    delay: 0.0,
    options: .CurveEaseInOut,
    animations: {
      // 2
      self.iconLabel.transform = CGAffineTransformScale(
        self.iconLabel.transform, self.shrinkFactor, self.shrinkFactor)
    },
    completion: { _ in
      // 3
      UIView.animateWithDuration(self.currentBeatPattern.duration / 2,
        delay: 0.0,
        options: .CurveEaseInOut,
        animations: {
            // 4
            self.iconLabel.transform = CGAffineTransformScale(
              self.iconLabel.transform, self.expandFactor, self.expandFactor)
        },
        completion: { _ in
          // 5
          self.beat()
        }
      )
    }
  )
}

There are animations nested in animations here for the full effect! Here’s what’s going on in this method:

1. The outer animation is the first half of the whole effect, so its duration is half the total duration. You also use .CurveEaseInOut animation easing because it makes the beat feel more natural.
2. Inside the animation closure, transform the heart to it’s shrunken size.
3. When the expand animation completes you want to kick off the second half, which is another animation. This again has half the total duration.
4. Inside the second animation closure, the difference is you’ll use the expandFactor instead of the shrinkFactor.
5. Finally, in the completion block of the second animation you have a recursive call to beat(). After one cycle completes, another begins.

All that’s left is to start the animation. Add the following line to the end of viewDidAppear:

beat()

That will kick off the recursive beat as soon as the view appears.

Build and run. When the simulator opens, you’ll see the heart beating. And again, after eight seconds it will move on to a new pattern.

Notice how the animation speed scales to the current heart rate too. Very realistic!

Where to Go From Here?

You can download the final project for this tutorial in case you got stuck along the way.

There are many additions you could make to this sample app:

1. Add another label for the description of the beat pattern.
2. Give the heart a random beat instead of going in through the beat patterns in order
3. Add and handle an erratic heartbeat. Hint: use a random duration each beat
4. Give the user a view of their average heartbeat over time
5. And finally, if you want a real challenge, draw a rhythm strip graph of the beats

The simulator is a great tool to get you thinking about what kinds of apps you can build on such a small screen. You can use the empty starter project for this tutorial, or check out the Watch Simulator project on GitHub, which has a simple tap counter as a starter app.

You can use the Watch Simulator project to practice your ideas ahead of the release of WatchKit. WatchKit is rumoured to be released soon after this post.Update: It was released on November 18, 2014! The community challenged ourselves at the WatchKit Hackathon that same week. Since this first version of WatchKit has a few notable limitations, you can still use the Watch Simulator project to prototype ideas for the future. If you would like to learn more about the real WatchKit check out our video tutorial series.

I hope you’ve enjoyed this tutorial, and welcome to the world of WATCH! :]