0

I am busy with a custom animated transition between UIViewControllers and I like the the UIView to jump and then fill up the space similar to the following screenshot:

enter image description here

Now there isn't an "Option" I could create such an effect. Now I could create a keyframe animation with one key at the top and one in the center but that wouldn't feel really natural, it would feel robotic.

How would one approach this?

SOURCE (SO FAR)

- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext
{
    UIViewController    *fromVC    = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
    UIViewController    *toVC      = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
    UIView              *container = [transitionContext containerView];

    if ([fromVC isEqual:self])
    {
        [_activeCardView.superview bringSubviewToFront:_activeCardView];

        [UIView animateKeyframesWithDuration:[self transitionDuration:transitionContext]
                                       delay:0.0
                                     options:UIViewKeyframeAnimationOptionCalculationModeCubic
                                  animations:^{
                                      [_activeCardView setFrame:CGRectMake(0.0, 0.0, toVC.view.bounds.size.width, toVC.view.bounds.size.height)];
                                  }
                                  completion:^(BOOL finished){
                                      [container addSubview:toVC.view];
                                      [transitionContext completeTransition:YES];
                                  }];
    }
    else
    {
        [container addSubview:toVC.view];

        [UIView animateWithDuration:[self transitionDuration:transitionContext]
                         animations:^{
                             [_activeCardView setFrame:_basicCardFrame];
                         }
                         completion:^(BOOL finished){
                             [transitionContext completeTransition:YES];
                         }];
    }
}
Mark
  • 16,906
  • 20
  • 84
  • 117

1 Answers1

0

For a smooth 'jump' animation you could just chain two animations with 'EaseInOut' curves.

[UIView animateWithDuration:<DURATION>/2 delay:<DELAY> options:UIViewAnimationOptionCurveEaseInOut animations:^(void) {
        //move view up
    }completion:^(BOOL finished) {
        [UIView animateWithDuration:<DURATION>/2 delay:<DELAY> options:UIViewAnimationOptionCurveEaseInOut animations:^(void) {
            //move view down
        }completion:NULL];
    }];
Johannes
  • 325
  • 4
  • 11
  • That might work, Make the animation ease out and ease in might give the illusion of a curved acceleration. I am going to try it. – Mark Jun 16 '14 at 12:58