UILabel animation up and down

Question

I have this UILabel animation that animates a countdown timer. It works fine, but...

Right now, it's set up so the text eases in from the top using the CATransition kCATransitionFromBottom. This takes 0.5 secs. How can I make it so that in the next 0.5 seconds, the CATransition and my label eases out to the bottom?

Hope you understand! Thanks!

Here is a video with how the animation looks right now: http://tinypic.com/r/5vst2h/8

-(void)updateLabel {

NSCalendar *calendar = [[NSCalendar alloc] initWithCalendarIdentifier:NSGregorianCalendar];
int *units = NSDayCalendarUnit | NSHourCalendarUnit | NSMinuteCalendarUnit | NSSecondCalendarUnit;
NSDateComponents *components = [calendar components:units fromDate:[NSDate date] toDate:destinationDate options:0];


    //ANIMASJON

secLabel.alpha = 0;
[UIView beginAnimations:nil context:nil];
[UIView setAnimationCurve:UIViewAnimationCurveEaseIn];

//don't forget to add delegate.....
[UIView setAnimationDelegate:self];

[UIView setAnimationDuration:0.5];
secLabel.alpha = 1;

//also call this before commit animations......
[UIView setAnimationDidStopSelector:@selector(animationDidStop:finished:context:)];

CATransition *animation = [CATransition animation];
animation.duration = 0.5;   //You can change this to any other duration
animation.type = kCATransitionMoveIn;     //I would assume this is what you want because you want to "animate up or down"
animation.subtype = kCATransitionFromBottom; //You can change this to kCATransitionFromBottom, kCATransitionFromLeft, or kCATransitionFromRight
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[secLabel.layer addAnimation:animation forKey:@"secLabel"];


[dayLabel setText:[NSString stringWithFormat:@"%02d%", [components day]]];
[hourLabel setText:[NSString stringWithFormat:@"%02d%", [components hour]]];
[minLabel setText:[NSString stringWithFormat:@"%02d%", [components minute]]];
[secLabel setText:[NSString stringWithFormat:@"%02d%", [components second]]];

[UIView commitAnimations];

}

-(void)animationDidStop:(NSString *)animationID finished:(NSNumber *)finished    context:(void *)context {
{
    [UIView beginAnimations:nil context:nil];
    [UIView setAnimationDuration:0.5];
    secLabel.alpha = 0;
    [UIView commitAnimations];
}
}

Answer 1

To animate a label up then down, I would usually do this:

[UIView animateWithDuration:0.2
                      delay:0
                    options:UIViewAnimationOptionCurveEaseIn
                 animations:^{
                             // moves label up 100 units in the y axis
                             self.myLabel.transform = CGAffineTransformMakeTranslate(0, -100);
                         }
                 completion:^(BOOL finished) {
                     [UIView animateWithDuration:0.2
                                           delay:0
                                         options:UIViewAnimationOptionCurveEaseOut
                                      animations:^{
                                          // move label back down to its original position
                                          self.myLabel.transform = CGAffineTransformMakeTranslate(0,0);
                                      }
                                      completion:nil];
                  }];

Is that what you're looking for?

Edit

Right, reading your question again, so you want to slide & fade in from the top and then slide & fade out to the bottom?

self.mylabel.alpha = 0;

[UIView animateWithDuration:0.2
                      delay:0
                    options:UIViewAnimationOptionCurveEaseIn
                 animations:^{
                             // moves label down 100 units in the y axis
                             self.myLabel.transform = CGAffineTransformMakeTranslate(0, 100);
                             // fade label in
                             self.myLabel.alpha = 1;
                         }
                 completion:^(BOOL finished) {
                     [UIView animateWithDuration:0.2
                                           delay:0
                                         options:UIViewAnimationOptionCurveEaseOut
                                      animations:^{
                                          // move label down further by 100 units
                                          self.myLabel.transform = CGAffineTransformMakeTranslate(0,1000);
                                          // fade label out
                                          self.myLabel.alpha = 0;
                                      }
                                      completion:nil];
                  }];

Keep in mind transformations are applied relative your your frame's original x,y,width,height properties. So a translate of 100 unit in y means your frame's original Y coordinate + 100.

Answer 2

Did you try Animation blocks. Maybe, an animation block inside the completion block can do the desired results. Something like this: (Considering the y point of your label somewhere on the top)

[UIView animateWithDuration:0.5 animations:^{
        MyLbl.frame = CGRectMake(myLbl.frame.origin.x, 200, myLbl.frame.size.width, myLbl.frame.size.height); // 200 is considered to be center
        myLbl.alpha = 1;
    } completion:^(BOOL finished){
        [UIView animateWithDuration:0.5 animations:^{
            myLbl.frame = CGRectMake(myLbl.frame.origin.x, 400, myLbl.frame.size.width, myLbl.frame.size.height); // 400 is considered to be bottom somewhere
            myLbl.alpha = 0;
        }];
    }];

Hope you get an idea from this.