watchOS 2: The Power of Animations

The new operating system for Apple Watch, watchOS 2, was introduced a couple of weeks ago at WWDC 2015. It brings a lot of improvements, mostly for developers looking to create an Apple Watch app. These are the things that I find to be most important for developers:

• WatchKit apps are now running natively on the watch. This brings the much needed improvement in speed, resulting in a better user experience.
• The new Watch Connectivity framework enables all sorts of communication and data sharing between the parent iOS app and the watchOS app.
• watchOS 2 apps have access to hardware data, such as data from the motion sensor, audio recording, and they can even access heart rate data.
• watchOS 2 also introduced animations. On watchOS 1, the only option to perform an animation was to generate a series of images and then iterate through them. watchOS 2 brings true animations to the Apple Watch. You can animate the user interface by changing layout properties inside an animation block. That’s where this tutorial comes in.

1. Why Care About Animations?

Before we get to the nuts and bolts, I’d like to spend a minute talking about the purpose of animations on Apple Watch apps.

The obvious reason is that they make the user interface more enjoyable if used appropriately. And when it comes to Apple Watch, that is a big if. Since most app interactions only last for a few seconds, you really don’t want to go overboard with animations.

The second, and I believe more important reason, is that they allow for custom navigation hierarchies inside Apple Watch apps. Let's suppose you need to present a screen that the user can only leave by taking a specific action. Normally, Apple Watch apps always have a cancel button in the top left corner when a modal interface controller is presented. With animations and clever layout manipulation, you could create your own "present view controller" routine that shows your app's content full-screen, dismissing it by that specific action. That is one of the things you’ll learn in this tutorial.

2. Prerequisites

Before you delve into this tutorial, you should have a basic knowledge of how the layout system works on WatchKit. Even if you are an experienced iOS developer, the group-based layout in WatchKit is very different than what you are used to on iOS. You need to think about the layout in a very different way. But once you get used to it, you will be able to create most layouts without much effort.

If you are new to layout on WatchKit, there is a great tutorial on Tuts+ by my friend Patrick Balestra, Understanding the WatchKit Layout system. Using an example app, he explains everything you need to know to get up to speed.

Also, there are many WWDC sessions that touch onto this subject. The session that I recommend the most and that covers WatchKit animations is this titled Layout and Animation Techniques for WatchKit.

3. Basics

The principle of animations on watchOS 2 is simple, you set one or more of the animatable properties inside an animation block. The following example illustrates how this works.

[self animateWithDuration:0.5 animations:^{
    [self.circleGroup setHorizontalAlignment:WKInterfaceObjectHorizontalAlignmentRight];
}];

This method causes the circleGroup to be aligned to the right, with an animation with a duration of 0.5 seconds. As you can see, we are calling animateWithDuration:animations: on self, which is an instance of WKInterfaceController. This is different from iOS where the animation methods are class methods on UIView.

The below list shows which properties are animatable:

• opacity
• alignment
• width and height
• background color
  
• color and tint color

Bear in mind that it’s still not possible on watchOS 2 to create user interface elements at runtime. But since you can hide them or set their alpha to 0 in the storyboard, this shouldn’t be that big of a problem.

That’s it. Armed with your knowledge about the WatchKit layout system, you are now ready to start working with native animations on watchOS. Let’s get started by creating a sample app so I can show you a couple of examples of how this all fits together.

4. Basic Animations

We are going to create a simple watchOS 2 app that will introduce a couple of these animation concepts. It is by no means trying to provide a complete overview of all the things that are possible. Instead, it shows the basic idea, which will hopefully enable you to come up with solutions to what you need.

Step 1: Create the Project

At the time of writing, Xcode 7 is still in beta. To create a watchOS 2 app, you need to use Xcode 7 so that’s what I am going to use.

• Launch Xcode and select File > New > Project….
• Choose iOS Application with Single View Application template and click Next.
• When asked for Product Name, enter WatchAnimations. You can uncheck Include Unit Testsand Include UI Tests as we won’t be needing those for this tutorial.

• Click Next, choose a location to save the project, and click Create.

Step 2: Add WatchKit Target

• In Xcode, select File > New > Target….
• From the list of templates, choose WatchKit App from the watchOS > Application section and click Next to continue.

• For Product name, you can choose anything you like. I have named mine WatchApp.
• Uncheck Include Notification Scene, because we won’t need it. When you click Finish, your WatchKit target will be created.

• When prompted to activate the WatchApp scheme, click Activate. Just note that you can change the scheme at any time in the top left of your Xcode window.

Step 3: Create the User Interface

Open Interface.storyboard in the WatchApp group as shown below.

Add a group to the interface by dragging it from the Object Library on the right. In the Attributes Inspector on the right, change its layout to Vertical and set its height to Relative to Container.

Add a second group to the group we just added. In the Attributes Inspector, set its vertical position to Bottom.

Add four buttons to the second group. For each button, set Size to Relative to Container with a value of 0.25. Set the titles of the buttons to ←, →, ↑, and ↓. After this step, the user interface should look like this:

To finish the first part of the user interface, add one more group to the main group and configure it as follows:

The following screenshot shows you how the circle should be configured.

Step 4: Add Animations

In the Project navigator, expand the WatchApp Extension group and select InterfaceController.m. Replace the implementation of the InterfaceController class with the following:

#import "InterfaceController.h"

@interface InterfaceController()

@property (nonatomic, weak) IBOutlet WKInterfaceGroup *circleGroup;

@end

@implementation InterfaceController

// Circle Direction buttons

- (IBAction)leftButtonPressed {
    [self animateWithDuration:0.5 animations:^{
        [self.circleGroup setHorizontalAlignment:WKInterfaceObjectHorizontalAlignmentLeft];
    }];
}

- (IBAction)rightButtonPressed {
    [self animateWithDuration:0.5 animations:^{
        [self.circleGroup setHorizontalAlignment:WKInterfaceObjectHorizontalAlignmentRight];
    }];
}

- (IBAction)upButtonPressed {
    [self animateWithDuration:0.5 animations:^{
        [self.circleGroup setVerticalAlignment:WKInterfaceObjectVerticalAlignmentTop];
    }];
}

- (IBAction)downButtonPressed {
    [self animateWithDuration:0.5 animations:^{
        [self.circleGroup setVerticalAlignment:WKInterfaceObjectVerticalAlignmentBottom];
    }];
}

@end

These actions will move the red circle in a specific direction. And as you can see, we accomplish that by settings its vertical and/or horizontal alignment inside an animation block.

Step 5: Connect the Outlets

Open Interface.storyboard and connect the outlets as shown below.

That should do it. Run the project and, if you've followed the above steps, you should be able to move the red circle around the screen using the arrow buttons.

5. More Complex Animations

In the second part of this tutorial, we’ll create a push animation. Since most of the steps involved are similar, I will move a bit faster this time.

Step 1: Create Animation

Open InterfaceController.m and create a new outlet, firstScreenGroup, of type WKInterfaceGroup in the class extension of the InterfaceController class.

@interface InterfaceController()

@property (nonatomic, weak) IBOutlet WKInterfaceGroup *circleGroup;
@property (nonatomic, weak) IBOutlet WKInterfaceGroup *firstScreenGroup;

@end

Next, implement the following actions in the InterfaceController class.

- (IBAction)pushButtonPressed {
    [self animateWithDuration:0.1 animations:^{
        [self.firstScreenGroup setAlpha:0];
    }];
    [self animateWithDuration:0.3 animations:^{
        [self.firstScreenGroup setWidth:0];
    }];
}

- (IBAction)popButtonPressed {
    [self animateWithDuration:0.3 animations:^{
        [self.firstScreenGroup setRelativeWidth:1 withAdjustment:0];
    }];
    
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.2 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        [self animateWithDuration:0.1 animations:^{
            [self.firstScreenGroup setAlpha:1];
        }];
    });
}

In pushButtonPressed, we shrink the first screen group (we will create it in the next step) and in popButtonPressed we expand that group again. We are also animating the alpha of the first screen group to make the animation a little bit more appealing.

Step 2: Extend the User Interface

Open Interface.storyboard and add a new group to the user interface. Put the group that was already there, the one containing Circle and the group with buttons, inside that new group. Set its Layout to Horizontal and rename the contained group to First screen. This will come in handy later. The result should look like this:

Next, add a second group that will be on the same level as the First screen group. Set its Layout to Vertical. Add an image and a button to the group. You can add literally any image, just make sure you put something there because otherwise the animation would look somewhat dry. Set the title of the button to "< Pop". Connect the button to the popButtonPressed action we created earlier. The user interface should now look like this:

Add a button to the First screen group. Set its title to "Push >" and its vertical position to Bottom. Connect the button to the pushButtonPressed action. The user interface should now look like this:

There's one thing we need to do, connecting  the firstScreenGroup outlet to the group we named First screen.

Step 3: Build and Run

When you build and run the app, you should be able to present the second screen by tapping the button with title "Push >" at the bottom. You can dismiss the second screen by tapping the button with title "< Pop". It should look like this:

Conclusion

In this tutorial, we've taken a look at native animations on watchOS 2. I hope it has given you a taste of what you can achieve with animations on watchOS. If you have any questions, you can post a comment below or can contact me on Twitter.