IOS - buttons slide in from right side animation

Question

i am new to IOS programming. i have a background image on my screen. What i want is when app launches screen shows with the background image and then after 1 sec 2 buttons comes up from right side of the screen. how can i do this. here is the image what i am trying to do

button 1 and button2 have to be invisible first. after 1 second they comes up from right side. if there are any tutorials related to this kind of animation then please share

Answer 1

You can use simple UIView Animations to achieve this.

Set your button x origin any value greater than screen size so that it is not visible first. Then reset the button frame to a visible value with view animation. For example call the following function in your viewWillAppear: method.

- (void) animateButton {

  // Setting button origin to value greater than the view width.
  CGRect frame = button.frame;
  frame.origin.x = self.view.frame.size.width+10;// or set any value > 320
  button.frame = frame;

    [UIView animateWithDuration:0.5
                          delay:2.0
                        options: UIViewAnimationCurveEaseOut
                     animations:^{
                         button.frame = CGRectMake(20, 100, 60, 25) ;// Any value according to your requirement
                     } 
                     completion:^(BOOL finished){
                         NSLog(@"Done!");
                     }];
}

Refer Tutorial

Answer 2

Set the buttons' x co-ordinates such that the button is just outside the screen on the right side.

And then try the following in your viewDidLoad()

[UIView animateWithDuration:0.5
                              delay:1.0
                            options:NO
                         animations:^{ change your button x co- ordinate here to the co-ordinate you need it on finally}
                         completion:NULL];

Answer 3

You can do it this way, please note that, if you want to animate the way your button shows up, you must hide them using alpha = 0.0f (and not hidden = true ). This way, you will have a smooth showing up animation !

Here it is :

First, on your viewDidLoad of your UIViewController , you have to set up a NSTimer of 1sec, then let it call the method that will let your buttons appear :

- (void) viewDidLoad {
    [super viewDidLoad];
    // Do your init stuff here

    // We will call your buttons as if they are declared as properties of your class, ask if you don't know how to set them
    self.button1.alpha = 0.0f;
    self.button2.alpha = 0.0f;

    // This will wait 1 sec until calling showButtons, where we will do the trick
     NSTimeInterval timeInterval = 1.0;
    [NSTimer scheduledTimerWithTimeInterval:timeInterval target:self selector:@selector(showButtons) userInfo:nil repeats:NO];
 }

- (void) showButtons {
    [UIView beginAnimations:@"buttonShowUp" context:nil];
    [UIView setAnimationDuration:0.5]; // Set it as you want, it's the length of your animation

    self.button1.alpha = 1.0f;
    self.button2.alpha = 1.0f;

    // If you want to move them from right to left, here is how we gonna do it :
    float move = 100.0f; // Set it the way you want it
    self.button1.frame = CGRectMake(self.button1.frame.origin.x - move,
                                    self.button1.frame.origin.y,
                                    self.button1.frame.size.width,
                                    self.button1.frame.size.height);

    self.button2.frame = CGRectMake(self.button2.frame.origin.x - move,
                                    self.button2.frame.origin.y,
                                    self.button2.frame.size.width,
                                    self.button2.frame.size.height);

     // If you want to set them in the exact center of your view, you can replace 
     // self.button1.frame.origin.x - move
     // by the following
     // (self.view.center - self.button1.frame.size.width/2)
     // This way, your button will be centered horizontally

    [UIView commitAnimations];
}

Ask if you have any questions !