“Push” animation in Objective-C

Question

I have two views: A and B. A is positioned at the top of the screen, B is positioned at the bottom of the screen.

When the user presses a button, view B animates upward

Answer 1

Two simple solutions:

1. Use animationWithDuration only: You can break your animation into two nested animations, using "ease in" to animate the moving of "B" up to "A", and then using "ease out" to animate the moving of "B" and "A" the rest of the way. The only trick here is to make sure the two duration values make sense so that the speed of the animation doesn't appear to change.

   CGFloat animationDuration = 0.5;
   CGFloat firstPortionDistance = self.b.frame.origin.y - (self.a.frame.origin.y + self.a.frame.size.height);
   CGFloat secondPortionDistance = self.a.frame.size.height;
   CGFloat firstPortionDuration = animationDuration * firstPortionDistance / (firstPortionDistance + secondPortionDistance);
   CGFloat secondPortionDuration = animationDuration * secondPortionDistance / (firstPortionDistance + secondPortionDistance);
   
   [UIView animateWithDuration:firstPortionDuration
                         delay:0.0
                       options:UIViewAnimationOptionCurveEaseIn
                    animations:^{
                        CGRect frame = self.b.frame;
                        frame.origin.y -= firstPortionDistance;
                        self.b.frame = frame;
                    }
                    completion:^(BOOL finished) {
                        [UIView animateWithDuration:secondPortionDuration
                                              delay:0.0
                                            options:UIViewAnimationOptionCurveEaseOut
                                         animations:^{
                                             CGRect frame = self.b.frame;
                                             frame.origin.y -= secondPortionDistance;
                                             self.b.frame = frame;
   
                                             frame = self.a.frame;
                                             frame.origin.y -= secondPortionDistance;
                                             self.a.frame = frame;
                                         }
                                         completion:nil];
                    }];
   

2. You can let animateWithDuration handle the full animation of "B", but then use CADisplayLink and use presentationLayer to retrieve B's current frame and to adjust A's frame accordingly:

   [self startDisplayLink];
   [UIView animateWithDuration:0.5
                         delay:0.0
                       options:UIViewAnimationOptionCurveEaseInOut
                    animations:^{
                        CGRect frame = self.b.frame;
                        frame.origin.y = self.a.frame.origin.y;
                        self.b.frame = frame;
                    }
                    completion:^(BOOL finished) {
                        [self stopDisplayLink];
                    }];
   

   where the methods to start, stop, and handle the display link are defined as follows:

   - (void)startDisplayLink
   {
       self.displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(handleDisplayLink:)];
       [self.displayLink addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSDefaultRunLoopMode];
   }
   
   - (void)stopDisplayLink
   {
       [self.displayLink invalidate];
       self.displayLink = nil;
   }
   
   - (void)handleDisplayLink:(CADisplayLink *)displayLink
   {
       CALayer *presentationLayer = self.b.layer.presentationLayer;
   
       if (presentationLayer.frame.origin.y < (self.a.frame.origin.y + self.a.frame.size.height))
       {
           CGRect frame = self.a.frame;
           frame.origin.y = presentationLayer.frame.origin.y - self.a.frame.size.height;
           self.a.frame = frame;
       }
   }
   

Answer 2

You can try followin algorythm:

1)Put A and B in UIView(i.e UIview *gropedView)

2)Change B.y till it will be equal A.y+A.height(so B will be right under the A)

3)Animate groupedView

Answer 3

You said that you tried the "animate B and use display link to update A" technique, and that it resulted in "A" lagging behind "B". You could theoretically animate a new view, "C", and then adjust B and A's frames accordingly in the display link, which should eliminate any lag (relative to each other).