Nice zoom-fade transition between controllers like in new Facebook, Gmail apps

Question

Recently more and more apps are using new type of transition between views. It's hard to define it but the transition looks like the preview view is fading out, going lower (downward translation) and scale down a little - all simultanously. It's really subtle and elegant.

You can observe this transition in slow motion in Facebook app - find somebody's picture on the wall, tap to view it and then drag the fullscreen image down slowly and you will notice that the wall is rising from the back - fading and scaling a little bit. That's the transition. Transition also envolves statusbar fading.

This transition is also present in Gmail 2.0 when you open settings from the left pane.

I think there is a certain framework or prepared method for this because more and more apps have this implemented. But maybe I'm also wrong because I see some minor differences in some apps in the transition's trajectory - eg. Gmail uses a little carousel effect, but facebook just scales down to the middle.

Anyway it appears to be a new trend.

I'm looking for some reference or framework or know-how about implementing that sort of transitions.

Thanks for any useful stuff.

Answer 1

Try this link.I think this is the thing you are exactly looking for https://github.com/kentnguyen/KNSemiModalViewController

Answer 2

I first saw it used in the National Geographic apps... have a try with these two methods, the first 'drops it back' the second 'brings it back'. It's worked well for me in the past, just make a few adjustments to suit your needs.

- (void)dropItBack:(id)sender
{
    // Position
    CABasicAnimation *posAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
    posAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(160, 284)];//center point

    // Opacity
    CABasicAnimation *opacityAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
    opacityAnimation.toValue = [NSNumber numberWithFloat:0.5f];

    CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    scaleAnimation.toValue = [NSNumber numberWithDouble:0.8];

    // Dramaticism of the Z rotation
    // A lower number is more dramatic
    float distance = 1000;
    CATransform3D trans = CATransform3DIdentity;
    trans.m34 = 1.f / -distance;

    // Rotate Back
    CABasicAnimation *rockBack = [CABasicAnimation animationWithKeyPath:@"transform"];
    rockBack.toValue = [NSValue valueWithCATransform3D:CATransform3DRotate(trans, M_PI_4, 1.f, 0.f, 0.f)];
    rockBack.beginTime = 0.f;

    // Rotate forward
    trans.m34 = 0.f;
    CABasicAnimation *rockForward = [CABasicAnimation animationWithKeyPath:@"transform"];
    rockForward.toValue = [NSValue valueWithCATransform3D:CATransform3DRotate(trans, M_PI_4, -1.f, 0.f, 0.f)];
    rockForward.beginTime = 0.25f;

    CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
    animationGroup.duration = 0.5f;
    animationGroup.repeatCount = 0.f;
    animationGroup.removedOnCompletion = NO;
    animationGroup.autoreverses = NO;
    animationGroup.fillMode = kCAFillModeForwards;
    animationGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [animationGroup setAnimations:[NSArray arrayWithObjects:rockBack, rockForward, scaleAnimation, posAnimation, opacityAnimation, nil]];

    [self.navigationController.view.layer addAnimation:animationGroup forKey:nil];

    popsheet = [UIButton buttonWithType:UIButtonTypeCustom];
    [popsheet setBackgroundColor:[UIColor blueColor]];
    [popsheet setFrame:CGRectMake(0, 580, 320, 400)];
    [popsheet addTarget:self action:@selector(bringItForward:) forControlEvents:UIControlEventTouchUpInside];
    [self.tabBarController.view addSubview:popsheet];

    [UIView animateWithDuration:0.3 animations:^{
        [popsheet setFrame: CGRectMake(0, 180, 320, 400)];
    }];
}

- (void)bringItForward:(id)sender
{
    // Position
    CABasicAnimation *posAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
    posAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(160, 284)];

    // Opacity
    CABasicAnimation *opacityAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];
    opacityAnimation.toValue = [NSNumber numberWithFloat:1.f];

    // Scale
    CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    scaleAnimation.toValue = [NSNumber numberWithDouble:1.f];

    // Dramaticism of the Z rotation
    // A lower number is more dramatic
    float distance = 1000;
    CATransform3D trans = CATransform3DIdentity;
    trans.m34 = 1.f / distance;

    // Rotate back
    CABasicAnimation *rockBack = [CABasicAnimation animationWithKeyPath:@"transform"];
    rockBack.toValue = [NSValue valueWithCATransform3D:CATransform3DRotate(trans, M_PI_4, 1.f, 0.f, 0.f)];
    rockBack.beginTime = 0.f;

    // Rotate forward
    trans.m34 = 0.f;
    CABasicAnimation *rockForward = [CABasicAnimation animationWithKeyPath:@"transform"];
    rockForward.toValue = [NSValue valueWithCATransform3D:CATransform3DRotate(trans, M_PI_4, -1.f, 0.f, 0.f)];
    rockForward.beginTime = 0.25f;

    CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
    animationGroup.duration = 0.5f;
    animationGroup.repeatCount = 0.f;
    animationGroup.removedOnCompletion = NO;
    animationGroup.autoreverses = NO;
    animationGroup.fillMode = kCAFillModeForwards;
    animationGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [animationGroup setAnimations:[NSArray arrayWithObjects:posAnimation, rockBack, rockForward, opacityAnimation, nil]];

    [self.navigationController.view.layer addAnimation:animationGroup forKey:nil];
    [UIView animateWithDuration:0.3 animations:^{
        [popsheet setFrame: CGRectMake(0, 580, 320, 400)];
    }];

}