Animate a UIButton into place from off screen when app loads - iphone

Question

I am having some issues with some animation stuff in an iPad application. I have four UIButtons that are on the screen when the app launches.
I basically want the app to load and the four buttons to animate into view one at a time from the top of the screen into place.
I have the following which kind of animates it but I am struggling with it.
-(void)viewWillAppear:(BOOL)animated
{
CGPoint newLeftCenter = CGPointMake( 15.0f + myCocoButton.frame.size.width / 2.0f, myCocoButton.center.y);
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:4.0f];
myCocoButton.center = newLeftCenter;
[UIView commitAnimations];
}
The current code that I have does animate the button but not in the way I want. I can't get my head around how to actually place it exactly where I want it.

Answer 1

In your storyboard, lay out your buttons in their final positions.
In viewWillAppear:, save the location of each button and move the button off-screen:
#implementation MyViewController {
CGPoint _button0TrueCenter;
CGPoint _button1TrueCenter;
CGPoint _button2TrueCenter;
CGPoint _button3TrueCenter;
}
static void moveButtonAndSaveCenter(UIButton *button, CGPoint offscreenCenter, CGPoint *trueCenter) {
*trueCenter = button.center;
button.center = offscreenCenter;
}
- (void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
if (animated) {
moveButtonAndSaveCenter(self.button0, CGPointMake(-100, 100), &_button0TrueCenter);
moveButtonAndSaveCenter(self.button1, CGPointMake(420, 100), &_button1TrueCenter);
moveButtonAndSaveCenter(self.button2, CGPointMake(-100, 200), &_button2TrueCenter);
moveButtonAndSaveCenter(self.button3, CGPointMake(420, 200), &_button3TrueCenter);
}
}
Then in viewDidAppear:, animate them back to their original locations:
static void animateButton(UIButton *button, CGPoint newCenter, NSTimeInterval delay) {
[UIView animateWithDuration:.25 delay:delay options:0 animations:^{
button.center = newCenter;
} completion:nil];
}
- (void)viewDidAppear:(BOOL)animated {
[super viewDidAppear:animated];
if (animated) {
animateButton(self.button0, _button0TrueCenter, 0);
animateButton(self.button1, _button1TrueCenter, 0.2);
animateButton(self.button2, _button2TrueCenter, 0.4);
animateButton(self.button3, _button3TrueCenter, 0.6);
}
}

Answer 2

Assuming you have your buttons in an array, you could do something like this (your items should be in the correct end positions in the nib)
- (void)viewDidAppear:(BOOL)animated
{
[super viewDidAppear:animated];
CGAffineTransform transform = CGAffineTransformMakeTranslation(0.f, -200.f);
[self.buttons enumerateObjectsUsingBlock:^(UIButton *button, NSUInteger idx, BOOL *stop) {
button.transform = transform; // This translates the view's off the top of the screen
[UIView animateWithDuration:0.25f
delay:0.25f * idx
options:UIViewAnimationCurveEaseOut // No point doing easeIn as the objects are offscreen anyway
animations:^{
button.transform = CGAffineTransformIdentity;
} completion:nil];
}];
}
This will animate every time. You may need to add an ivar to stop this happening and just set it to YES after this has run once. The problem I found when I was just messing around is that when it was calling viewDidAppear: animated was NO on first load, so I couldn't use that BOOL as a check

Answer 3

I've written a blog post about this subject: http://www.roostersoftstudios.com/2011/07/01/iphone-dev-performing-sequential-uiview-animations/
and I have a sample project there.
You can just chain the animations where when one finishes it calls the function of the next animation. Can you be more specific about the exact issues you are having?