Adding some animation magic

We all know, as developers, the pain of finding that an idea that we had thought simple and quick to implement turns out to be much harder than we had imagined. But when programming with WatchKit, you will often find that some quite advanced-sounding technologies are, in fact, extremely easy to use.

WKInterfaceController animation methods are just that, and so we can add some flair to our app by changing the color of the button border – which is to say, the BorderGroup background color - using a call to animateWithDuration.

First, let's add some code to our InterfaceController class, and then we will take a look at what we have done.

1. Control-drag from the Group in the Document Outline to the code in the assistant editor, to create an Outlet connection:
   
2. Enter the name borderGroup as shown, and hit Connect.
   

   Xcode creates a new IBOutlet (connection) between the interface and the source code:

   @IBOutlet var borderGroup: WKInterfaceGroup!

3. Next, below the HelloButtonTapped() method, create a new method with the following code:

   func changeBorderColor() {
           animateWithDuration(2.5) { () -> Void in
               self.borderGroup.setBackgroundColor(UIColor.redColor())
           }
       }

   Note

   Why the self? Although we won't go into too much detail of the Swift language itself, let's take a brief look at what's happening here.

   animateWithDurations method takes two arguments, the first is the time that the animation should take (here we have chosen 2.5 seconds) and the second argument is an enclosure that contains the changes in the views properties that we wish to have animated for us by WatchKit.

   Because we are sending the code contained by this enclosure to another processing thread, we need it to capture the local variables, and for this we must specify where borderGroup exists, using the self keyword.

   If that's a little confusing at this point, it's nice to know that Xcode will throw an error and inform you that you need to insert self, should you omit it.

Inside the animateWithDurations enclosure, all we need to do is set the backgroundColor property of borderGroup to a new color, in this case using UIColor's redColor() method, which returns, well, a red color.

We call our changeBorderColor() function from within HelloButtonTapped():

@IBAction func helloButtonTapped() {
        helloButton.setTitle("World")
 changeBorderColor()
    }

Your class should now be looking like this:

class InterfaceController: WKInterfaceController {

    @IBOutlet var helloButton: WKInterfaceButton!
    @IBOutlet var borderGroup: WKInterfaceGroup!
    
    override func awakeWithContext(context: AnyObject?) {
        super.awakeWithContext(context)
    }

    @IBAction func helloButtonTapped() {
        helloButton.setTitle("World")
        changeBorderColor()
    }
    
    func changeBorderColor() {
        animateWithDuration(2.5) { () -> Void in
            self.borderGroup.setBackgroundColor(UIColor.redColor())
        }
    }
}

Go ahead and run the app. When you tap the button, you'll see a slow transition from yellow to red. With just a few lines of code you have added some really sweet looking polish to the interface.

Remember this kind of subtle effect when you are thinking about animations. A search on the Web will show that most blog posts and tutorials tend to concentrate on moving elements on, off, and around the screen, which, as is frequently pointed out, quickly gets tiresome. The use of animations for much more modest hints to the user about the state of the app is a valuable thing to have in your toolkit.