Trying to get 2 animations to work simultaneously

Question

In the next code there are 2 methods that are called one after the other. The first one makes the center button disappear and the second one makes the tabbar disappear. Separately they are working fine. My problem is that when I try to call them one after the other hideCenterButton doesn't animate. Instead of rolling to the left of the screen the button just disappears.

-(void)hideCenterButton:(BOOL)animated
{
    if(animated){

        [UIView animateWithDuration:0.3
                              delay:0.0f
                            options:UIViewAnimationCurveLinear
                         animations:^{
                             CGRect frame = self.centerButton.frame;
                             frame.origin.x = -100;
                             self.centerButton.frame = frame;
                         }
                         completion:^(BOOL finished){
                         }];
    }}

...

- (void)hideTabBar:(UITabBarController *) tabbarcontroller
    {
        [UIView beginAnimations:nil context:NULL];
        [UIView setAnimationDuration:0.5];
        //[UIView setAnimationDelay:1];
        for(UIView *view in tabbarcontroller.view.subviews)
        {
            if([view isKindOfClass:[UITabBar class]] || [view isKindOfClass:[UIImageView class]])
            {
                [view setFrame:CGRectMake(view.frame.origin.x, 480, view.frame.size.width, view.frame.size.height)];
            }
            else
            {
                [view setFrame:CGRectMake(view.frame.origin.x, view.frame.origin.y, view.frame.size.width, 480)];
            }
        }

        [UIView commitAnimations];
    }

sergio sergio · Accepted Answer · 2012-12-25T16:44:07

You have probably hit into some kind of limitation of UIView-based animations. Several things you might try are:

use animateWithDuration also for hideTabBar:: indeed, beginAnimation is the old-way of animating UIView; animateWithDuration is more recent (introduced with iOS4); by using the same animation calls in bot cases you might get better results; this should be straightforward; this should work:

  - (void)hideTabBar:(UITabBarController *) tabbarcontroller
  {
[UIView animateWithDuration:0.3
                      delay:0.0f
                    options:UIViewAnimationCurveLinear
                 animations:^{
    for(UIView *view in tabbarcontroller.view.subviews)
    {
    if([view isKindOfClass:[UITabBar class]] || [view isKindOfClass:[UIImageView class]])
    {
        [view setFrame:CGRectMake(view.frame.origin.x, 480, view.frame.size.width, view.frame.size.height)];
    }
    else
    {
        [view setFrame:CGRectMake(view.frame.origin.x, view.frame.origin.y, view.frame.size.width, 480)];
    }
   }
                 }
                 completion:nil];
}

rewrite your animation using Core Animation: this is a slightly lower-level mechanism but it allows you to get the best results in terms of performance; this is, e.g., how you could rewrite the first animation:

first you need to provide a callback:

- (void)animationDidStop:(CABasicAnimation*)anim finished:(BOOL)flag {
       CALayer* layer = [anim valueForKey:@"animationLayer"];
       layer.position = [anim.toValue CGPointValue];
}

then you can animate your button like this:

    CABasicAnimation* move = [CABasicAnimation animationWithKeyPath:@"position"];
    CGPoint pos = self.centerButton.center;
    pos.x -= 100;
    move.toValue = [NSValue valueWithCGPoint:pos];
    move.duration = 0.3;
    move.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    move.removedOnCompletion = NO;
    move.fillMode = kCAFillModeForwards;
    move.autoreverses = NO;
    move.delegate = self;
    [move setValue:self.centerButton.layer forKey:@"animationLayer"];
    [self.centerButton.layer addAnimation:move forKey:@"buttonPosition"];

Using Core Animation, you will end up writing more code and you will need to allow some time to learn Core Animation basics, but that was the only way I could solve a similar issue I had with two related animation.

Hope it helps.

Trying to get 2 animations to work simultaneously

1 Answers