The iPad iOS 7 App Store has a pretty cool animation for when you click on an app icon (from the featured list when the icon is smaller, not a search result). Here is a picture of it in action:
Basically, the icon flips and expands in size at the same time.
There is a gradient behind it and the content view is smaller.
So far, I have a custom VC transition setup and I have the enlargement part working okay, but I can't get the flip to jive. How can I mimic the App store animation?
Here is the code I have so far:
- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext {
UIView *inView = [transitionContext containerView];
UIViewController *fromVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
UIViewController *toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
UIView *fromView = [fromVC view];
UIView *toView = [toVC view];
toView.frame = [transitionContext finalFrameForViewController:toVC];
// Take a snapshot of the new view being presented
UIGraphicsBeginImageContextWithOptions(toView.bounds.size, NO, 0);
CGContextRef ctx = UIGraphicsGetCurrentContext();
[fromView.layer renderInContext:ctx];
UIImage *snapshot = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
// Add the snapshot view and animate its appearance
UIImageView *intermediateView = [[UIImageView alloc] initWithImage:snapshot];
[inView addSubview:intermediateView];
[self calculateSourceRectInView:inView];
intermediateView.frame = self.sourceRect;
[UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
intermediateView.layer.transform = CATransform3DMakeRotation(-1.0 * -M_PI_2, 0.0, 1.0, 0.0);
intermediateView.frame = toView.frame;
} completion:^(BOOL finished) {
[intermediateView removeFromSuperview];
if ([transitionContext transitionWasCancelled]) {
[transitionContext completeTransition:NO];
} else {
[inView addSubview:toView];
[fromView removeFromSuperview];
[transitionContext completeTransition:YES];
// Now this is a pushed view, we allow interactive
// transitioning back to the parent view.
self.interactiveTransition = [EBInteractiveZoomTransition new];
[self.interactiveTransition wireToViewController:toVC];
}
}];
}
Try this way...
//set Intial Frame of view
[UIView transitionWithView: self.view
duration: 1.5f
options: UIViewAnimationOptionTransitionFlipFromRight
animations: ^(void)
{
}
completion: ^(BOOL isFinished)
{
// set the Final Frame of the View
}];
I took a video of the animation in the iPad App Store app, and it doesn't look like a UIView transition. If you play it back slowly, it looks like two animations are happening simultaneously: 1) the icon is rotating to about 90 degrees, scaling, and translating 2) the details are fading in, rotating a little bit, scaling, and translating to the final destination. So the details aren't continuing where the icon left off.
I think that is why it looks weird when trying to do this using view animations.
To accomplish a flip between views that is more continuous, see the code below. It basically does this in several steps: 1) Position backView to where frontView is 2) Animate the frontView rotating and scaling halfway 3) Set the backView transform to be the same as frontView 4) Show the backView 5) Animate backView rotating and scaling the rest of the way
Flipping back is the basically reverse. Works great.
// flip and scale frontView to reveal backView to the center of the screen
// uses a containerView to mark the end of the animation
// parameterizing the destination is an exercise for the reader
- (void)flipFromFront:(UIView*)frontView toBack:(UIView*)backView
{
float duration = 0.5;
// distance from center of screen from frontView
float dx = self.view.center.x - frontView.center.x;
float dy = self.view.center.y - frontView.center.y;
// this prevents any tearing
backView.layer.zPosition = 200.0;
// hide the backView and position where frontView is
backView.hidden = NO;
backView.alpha = 0.0;
backView.frame = frontView.frame;
// start the animation
[UIView animateKeyframesWithDuration:duration
delay:0.25
options:UIViewKeyframeAnimationOptionCalculationModeCubic
animations:^{
// part 1. Rotate and scale frontView halfWay.
[UIView addKeyframeWithRelativeStartTime:0.0
relativeDuration:0.5
animations:^{
// get the transform for the blue layer
CATransform3D xform = frontView.layer.transform;
// translate half way
xform = CATransform3DTranslate(xform, dx/2, dy/2, 0);
// rotate half way
xform = CATransform3DRotate(xform, M_PI_2, 0, 1, 0);
// scale half way
xform = CATransform3DScale(xform, 1.5, 1.5, 1);
// apply the transform
frontView.layer.transform = xform;
}];
// part 2. set the backView transform to frontView so they are in the same
// position.
[UIView addKeyframeWithRelativeStartTime:0.5
relativeDuration:0.0
animations:^{
backView.layer.transform = frontView.layer.transform;
backView.alpha = 1.0;
}];
// part 3. rotate and scale backView into center of container
[UIView addKeyframeWithRelativeStartTime:0.5
relativeDuration:0.5
animations:^{
// undo previous transforms with animation
backView.layer.transform = CATransform3DIdentity;
// animate backView into new location
backView.frame = self.containerView.frame;
}];
} completion:^(BOOL finished) {
self.displayingFront = !self.displayingFront;
}];
}
// flip from back to front
- (void) flipFromBack:(UIView*)backView toFront:(UIView*)frontView
{
float duration = 0.5;
// get distance from center of screen to destination
float dx = self.view.center.x - frontView.center.x;
float dy = self.view.center.y - frontView.center.y;
backView.layer.zPosition = 200.0;
frontView.hidden = YES;
// this is basically the reverse of the previous animation
[UIView animateKeyframesWithDuration:duration
delay:0
options:UIViewKeyframeAnimationOptionCalculationModeCubic
animations:^{
[UIView addKeyframeWithRelativeStartTime:0.0
relativeDuration:0.5
animations:^{
CATransform3D xform = backView.layer.transform;
xform = CATransform3DTranslate(xform, -dx/2, -dy/2, 0);
xform = CATransform3DRotate(xform, M_PI_2, 0, 1, 0);
xform = CATransform3DScale(xform, 0.75, 0.75, 1);
backView.layer.transform = xform;
}];
[UIView addKeyframeWithRelativeStartTime:0.5
relativeDuration:0.0
animations:^{
backView.alpha = 0.0;
frontView.hidden = NO;
}];
[UIView addKeyframeWithRelativeStartTime:0.5
relativeDuration:0.5
animations:^{
self.hiddenView.alpha = 0.0;
frontView.layer.transform = CATransform3DIdentity;
}];
} completion:^(BOOL finished) {
self.displayingFront = !self.displayingFront;
}];
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With