• Choose a category
• All
• Classic-Fiction

By Root 1042 0

layers for the views that need to be animated. Using the animator proxy made this happen automatically, but now we have to turn it on ourselves, for any views that are going to be animated, including the superview of any view that’s going to be moving. In our case, this means that the button’s superview (the window’s content view) needs to be given a layer, and it in turn will establish layers for its subview hierarchy, which is just the button itself. The easiest way to do this is to go back to Interface Builder, select the button in your GUI, and open the Effects Inspector (⌘2). At the top of this inspector, you’ll see a section titled Wants Core Animation Layer, which shows a list of view objects (see Figure 14-2).

Figure 14-2. Establishing animation layers

The selected object (the button) is at the bottom, and all its superviews (in this case just one view, the window’s content view) are stacked up above it. Click the checkbox to turn on a layer for the content view. You can leave the checkbox for the button unchecked, since the superview will establish a layer for it.

Now save everything, Build & Run your app, and you’ll see the exact same behavior as we had before. So, this new version achieves the same result, at the expense of a few additional lines of code. So far it doesn’t seem like much of a win here. But wait, there’s more! Explicit animation via the animation classes, such as CABasicAnimation, lets us do several more key things that we couldn’t do with implicit animation.

For starters, we can set the animation’s duration. Add the following line just before adding the animation to the layer (with [[sender layer] addAnimation:a forKey:@“position”]) to make this animation run a little more slowly:

Build & Run with that in place, and you’ll see that the button transitions more slowly. We can also change the pacing of the animation, so that it doesn’t go from one point to the next in a strictly linear fashion. Let’s set it to an “ease-in, ease-out” motion like this:

Build & Run now, and you’ll see that when you click the button, it starts moving slowly, then gradually builds up steam and moves more quickly, only to taper off its speed as it reaches its target. Under the hood, these timing functions work by providing a simple mapping for a value shifting from 0.0 to 1.0, using a pair of control points to describe a curve between the two. Does that ring a bell? This seems like the perfect use for the curve editing control we implemented in the first half of this chapter! We can use the curve editor to define the timing that will be applied to the button’s movement each time we click it.

Start by adding the CurveView class files from the previous project. In the MovingButton project, right-click on the Classes group, then select Add➤Existing Files... from the context menu. Navigate to the location of CurveView.h and CurveView.m, select them both, and click the Add button. In the sheet that appears, click to turn on the Copy items into destination group’s folder checkbox, and make sure the MovingButton target is checked in the lower part of the sheet (see figure 14-3).

Figure 14-3. Adding existing files to a project

This time, rather than setting up bindings to this control, let’s just add an outlet in our controller definition so that we can access the CurveView we’re going to set up. Modify MovingButton_AppDelegate.h, adding the bold lines here:

Now switch back to Interface Builder. We’re going to add a small NSPanel which will work as a sort of inspector for our button animation. From the Library, drag out an NSPanel, then drag a Custom View into the new panel. Resize the Custom View to 100×100, and change its class to CurveView. Your GUI in Interface Builder should now look something like Figure 14-4.

Figure 14-4. Adding a CurveView for configuring our animation

Now connect the app delegate’s curveView outlet to the CurveView instance you just created, save your work, and switch back to Xcode. Import the CurveView header somewhere at the top of the app delegate’s implementation