Second challenge (slide button onto view)


#1

Here’s my solution to the second challenge to “have the What time is it? button slide in from the other direction”.

First I added an IBOutlet for the button and a CGPoint to save the original location of the button in CurrentTimeViewController.h

[code]@interface CurrentTimeViewController : UIViewController
{
IBOutlet UILabel *timeLabel;
IBOutlet UIButton *whatTimeIsItButton;

CGPoint origPosition;

}[/code]

In viewWillAppear: I saved the original position of the button and then move it off the screen:

[code]- (void)viewWillAppear:(BOOL)animated
{
NSLog(@“CurrentTimeViewController will appear”);

// Call superclass implementation and then call our method to show the current time on
// the UILabel.
[super viewWillAppear];
[self showCurrentTime:nil];

//Chap 23 second challenge (slide button into place)
// Save original position of the “What time is it?” button, then move it off the screen (so it’s not visible).
origPosition = CGPointMake([[whatTimeIsItButton layer] position].x, [[whatTimeIsItButton layer] position].y);
[[whatTimeIsItButton layer] setPosition:CGPointMake(origPosition.x + 1000, origPosition.y)];
}[/code]

Finally, in viewDidAppear: I animate the button into place:

[code]- (void)viewDidAppear:(BOOL)animated
{
[super viewDidAppear];

// Create basic animation
CABasicAnimation *mover = [CABasicAnimation animationWithKeyPath:@"position"];
    
// Set the fromValue for position. In this case this is required. If we didn't set this value,
// the animation would take it from model layer. A few lines down we update the model layer value
// to our final destination - so if we don't set fromValue we'll move from the final locaction
// to the final location. End result: the button starts and remains in the same place with no
// animation. (See all of page 385, BOTH bullet items, for details)
CGPoint now = [[whatTimeIsItButton layer] position];
[mover setFromValue:[NSValue valueWithCGPoint:now]];

// Set the toValue for position.
[mover setToValue:[NSValue valueWithCGPoint:origPosition]];

// Animate over one second
[mover setDuration:1.0];

// Set the timing function to "ease" out of the animatin. Wihtout this start and stop
// of the animation is rather sudden.
CAMediaTimingFunction *tf = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
[mover setTimingFunction:tf];

// Update the model layer - per page 385. We're updating to model value of position to match the
// presentation value of model (after our animation finishes).
[[whatTimeIsItButton layer] setPosition:origPosition];

// Kick off the animation by adding it to the layer of our button control. Note that the key value doesn't matter here.
[[whatTimeIsItButton layer] addAnimation:mover forKey:@"moveAnimation"];

}[/code]

The For the More Curious: The Presentation Layer and the Model Layer section on pages 384, 385 were critical to figuring this out.

Hey, it works. :wink: