how to add time duration when doing flip using CATransform3DRotate - objective-c

Thanks for the help from my first post at here so that I can do a vertical flip and the code looks like
#interface ViewController (){
CALayer *plane;
}
#end
#implementation ViewController
-(void)viewDidLoad
{
[super viewDidLoad];
[self addALayer];
}
- (void)addALayer{
plane = [CALayer layer];
plane.backgroundColor = [[UIColor orangeColor] CGColor];
//[plane insertSublayer:normalBackground atIndex:0];
plane.opacity = 1;
plane.frame = CGRectMake(0, 0, 300, 100);
plane.position = CGPointMake(250, 150);
plane.anchorPoint = CGPointMake(0.5, 0.5);
plane.borderColor = [UIColor whiteColor].CGColor;
plane.borderWidth = 3;
plane.cornerRadius = 10;
[self.view.layer addSublayer:plane];
}
- (IBAction)click:(id)sender {
BOOL isClicked = ((UIButton*)sender).selected;
((UIButton*)sender).selected = !((UIButton*)sender).selected;
CATransform3D transfrom = CATransform3DIdentity;
transfrom.m34 = -1.0/ 500;
if ( !isClicked ) {
transfrom = CATransform3DRotate(transfrom, degToRad(180.0), 1, 0, 0);
plane.transform = transfrom;
}
else
plane.transform = transfrom;
}
My question is how can do this flip with animation. I did try to use
UIView animateWithDuration(NSTimeInterval) delay:(NSTimeInterval) options:(UIViewAnimationOptions) animations:^(void)animations completion:(BOOL finished)completion
but still does not work. I'm not so sure that animation block is a good idea for this animation.
Do you guys have any ideas about this.

Use a CATransaction to change the implicit defaults
[CATransaction begin];
[CATransaction setAnimationDuration:1]; // in seconds
// Change layer animatable properties
plane.transform = transform;
[CATransaction commit];

Related

How do you infinitely loop all property modifications within UIView animation blocks

I'm having an issue with making a glowing animation for UIView elements infinitely increase the size and opacity of the object shadow that I'm using to create the glow.
I've tried using different animation options, but none result in the shadow properties changing infinitely, only the animation that increases the size of the buttons infinitely loops.
- (void)addGlow:(UIView *)element withColor:(UIColor *)color
{
element.layer.shadowColor = color.CGColor;
element.layer.shadowOpacity = 0;
element.layer.shadowOffset = CGSizeZero;
element.layer.shadowRadius = 0;
[UIView animateWithDuration:0.6 delay:0 options: UIViewAnimationOptionRepeat | UIViewAnimationOptionAutoreverse | UIViewAnimationCurveEaseInOut | UIViewAnimationOptionAllowUserInteraction | UIViewAnimationOptionBeginFromCurrentState
animations:^
{
element.transform = CGAffineTransformMakeScale(1.02, 1.02);
element.layer.shadowOpacity = 0.5;
element.layer.shadowRadius = 5;
}
completion:NULL];
}
I basically just want the shadowOpacity and shadowRadius to also increase and decrease infinitely, alongside the UIView object's pulsing effect (due to the transform).
I'd use CoreAnimation's CABasicAnimation + CAAnimationGroup, here's an example or what I think you're attempting:
#interface ViewController ()
#property (strong, nullable) IBOutlet UIButton *buttonToGlow;
#end
#implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.buttonToGlow.backgroundColor = [UIColor lightGrayColor];
self.buttonToGlow.layer.cornerRadius = 10.0f;
}
- (void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
[self addGlow:self.buttonToGlow withColor:[UIColor redColor]];
}
- (void)addGlow:(UIView *)element withColor:(UIColor *)color {
[element.layer removeAnimationForKey:#"glowAnimation"];
element.layer.shadowColor = color.CGColor;
element.layer.shadowOffset = CGSizeZero;
CABasicAnimation *shadowOpacityAnimation = [CABasicAnimation animationWithKeyPath:#"shadowOpacity"];
shadowOpacityAnimation.fromValue = #(0);
shadowOpacityAnimation.toValue = #(0.5);
CABasicAnimation *shadowRadiusAnimation = [CABasicAnimation animationWithKeyPath:#"shadowRadius"];
shadowRadiusAnimation.fromValue = #(0);
shadowRadiusAnimation.toValue = #(5);
CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:#"transform.scale"];
scaleAnimation.fromValue = #(1.0);
scaleAnimation.toValue = #(1.02);
CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
animationGroup.autoreverses = YES;
animationGroup.repeatCount = CGFLOAT_MAX;
animationGroup.duration = 0.6f;
animationGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
animationGroup.animations = #[shadowOpacityAnimation, shadowRadiusAnimation, scaleAnimation];
[element.layer addAnimation:animationGroup forKey:#"glowAnimation"];
}
#end
Here's the result:
References:
CoreAnimation programming guide: https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/CoreAnimation_guide/Introduction/Introduction.html?language=objc#//apple_ref/doc/uid/TP40004514
CABasicAnimation: https://developer.apple.com/documentation/quartzcore/cabasicanimation?language=objc
CAAnimationGroup: https://developer.apple.com/documentation/quartzcore/caanimationgroup?language=objc

xCode Paper Onboarding effect

How can we implement Paper Onboarding effect. I have one containerview and 3viewconroller inside that. can we implemented same below thing?
this is snapchat chat camera moving effect
I think you have to read this issue.
https://www.objc.io/issues/12-animations/custom-container-view-controller-transitions/
Understand the first two stages first.
Then download Stage 3: Shrink-Wrapping code from github. Under that code replace "PrivateAnimatedTransition" implementation at last with following code.
#implementation PrivateAnimatedTransition
static CGFloat const kChildViewPadding = 16;
static CGFloat const kDamping = 0.75;
static CGFloat const kInitialSpringVelocity = 0.5;
- (NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext {
return 0.3;
}
/// Slide views horizontally, with a bit of space between, while fading out and in.
- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext {
UIView *containerView = [transitionContext containerView];
UIViewController *fromViewController = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
UIViewController *toViewController = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
//UIButton *button = fromViewController.button;
[containerView addSubview:toViewController.view];
CGRect buttonFrame = CGRectMake(300, 450, 10, 10);
UIBezierPath *circleMaskPathInitial = [UIBezierPath bezierPathWithOvalInRect:buttonFrame];
CGPoint extremePoint = CGPointMake(305, 455);
CGFloat radius = sqrt((extremePoint.x * extremePoint.x) + (extremePoint.y * extremePoint.y));
UIBezierPath *circleMaskPathFinal = [UIBezierPath bezierPathWithOvalInRect:CGRectInset(buttonFrame, -radius, -radius)];
CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
maskLayer.path = circleMaskPathFinal.CGPath;
toViewController.view.layer.mask = maskLayer;
CABasicAnimation *maskLayerAnimation = [CABasicAnimation animationWithKeyPath:#"path"];
maskLayerAnimation.fromValue = (__bridge id _Nullable)(circleMaskPathInitial.CGPath);
maskLayerAnimation.toValue = (__bridge id _Nullable)(circleMaskPathFinal.CGPath);
maskLayerAnimation.duration = [self transitionDuration:transitionContext];
[maskLayer addAnimation:maskLayerAnimation forKey:#"path"];
[self performSelector:#selector(finishTransition:) withObject:transitionContext afterDelay:[self transitionDuration:transitionContext]];
}
- (void)finishTransition:(id <UIViewControllerContextTransitioning>)transitionContext {
[transitionContext completeTransition:![transitionContext transitionWasCancelled]];
[transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey].view.layer.mask = nil;
}
and "BINGO" you have done. Just replace buttonFrame with actual selected index button's frame. Feel free to ask any query

How to display animated GIF in Objective C on top of the layered View?

I am trying to draw animated gif on my screen in mac OSX app .
I used this code to insert the gif: I can see the Gif as 1 picture it doesn't animates
only static picture :( what should I add to make it animated ?
#import <Cocoa/Cocoa.h>
#import <Quartz/Quartz.h>//for drawing circle
#import "sharedPrefferences.h"
#interface GenericFanSubView : NSView
{
NSColor * _backgroundColor;
NSImageView* imageView;
}
- (void)setBackgroundColor :(NSColor*)color;
- (void)insertGif1;
- (void)insertGif2;
- (void)insertGif3;
#end
#import "GenericFanSubView.h"
#define PI 3.14285714285714
#implementation GenericFanSubView
- (id)initWithFrame:(NSRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// Initialization code here.
imageView = [[NSImageView alloc]initWithFrame:CGRectMake(0, 0,self.frame.size.width,self.frame.size.height)];
[imageView setAnimates: YES];
}
return self;
}
- (void)drawRect:(NSRect)dirtyRect
{
[super drawRect:dirtyRect];
// Drawing code here.
[self drawCircleInRect];
_backgroundColor = [NSColor whiteColor];
[self insertGif1];
}
-(void)drawCircleInRect
{
//draw colored circle here
CGContextRef context = [[NSGraphicsContext // 1
currentContext] graphicsPort];
// ********** Your drawing code here ********** // 2
CGContextSetFillColorWithColor(context,[self NSColorToCGColor:(_backgroundColor)]);
float radius1 = self.frame.size.height/2;
float startAngle = 0;
float endAngle = endAngle = PI*2;
CGPoint position = CGPointMake(self.frame.size.height/2,self.frame.size.height/2);//center of the view
CGContextBeginPath(context);
CGContextAddArc(context, position.x, position.y, radius1, startAngle, endAngle, 1);
CGContextDrawPath(context, kCGPathFill); // Or kCGPathFill
}
- (void)setBackgroundColor :(NSColor*)color
{
_backgroundColor = color;
[self setNeedsDisplay:YES];
}
- (CGColorRef)NSColorToCGColor:(NSColor *)color
{
NSInteger numberOfComponents = [color numberOfComponents];
CGFloat components[numberOfComponents];
CGColorSpaceRef colorSpace = [[color colorSpace] CGColorSpace];
[color getComponents:(CGFloat *)&components];
CGColorRef cgColor = CGColorCreate(colorSpace, components);
return cgColor;
}
//curentlly calling only this 1
- (void)insertGif1
{
[imageView removeFromSuperview];
[imageView setImageScaling:NSImageScaleNone];
[imageView setAnimates: YES];
imageView.image = [NSImage imageNamed:#"FanBlades11.gif"];
[self addSubview:imageView];
}
#end
Edit: I discovered the source of the problem:
I was adding my class (that represents gif inside the circle) on top of RMBlurredView
and the animations doesn't work when I adding it as subview ,However it works on all the other views I added.
Any ideas what could be the reason inside the RMBlurredView to stop my NSImageView from animating ?
Edit:
I think [self setWantsLayer:YES]; is the reason I am not getting animations
how can I still get the animation with this feature enabled?
Edit:
Here is a simple sample with my problem
http://snk.to/f-cdk3wmfn
my gif:This is my gif it is invisible on white background color
"You must disable the autoscaling feature of the NSImageView for the
animation playback to function. After you've done that, no extra
programming required. It works like a charm!"
--http://www.cocoabuilder.com/archive/cocoa/108530-nsimageview-and-animated-gifs.html
imageView.imageScaling = NSImageScaleNone;
imageView.animates = YES;
needed for layer backed views:
if the image view is in a layer backed view or is layer backed itself:
imageView.canDrawSubviewsIntoLayer = YES;
working example using the question's own gif:
NSImageView *view = [[NSImageView alloc] initWithFrame:CGRectMake(10, 10, 50, 50)];
view.imageScaling = NSImageScaleNone;
view.animates = YES;
view.image = [NSImage imageNamed:#"FanBlades2_42x42.gif"];
view.canDrawSubviewsIntoLayer = YES;
NSView *layerview = [[NSView alloc] initWithFrame:CGRectMake(0, 0, 60, 60)];
layerview.wantsLayer = YES;
[layerview addSubview:view];
[self.window.contentView addSubview:layerview];

Animation in for loop compounds everytime view appears

I am trying to get a fresh set of random animations each time the view loads, but instead I am getting the animations multiplying and leading to the inevitable application meltdown! Any help on how to get a fresh start each time the view appears
- (void)startAnimation
{
int n;
for (n=0; n<150; n++){
UIBezierPath *bubblePath = [UIBezierPath bezierPath];
[bubblePath moveToPoint:P(arc4random()%768, arc4random()%1024)];
[bubblePath addCurveToPoint:P(arc4random()%768, arc4random()%1024)
controlPoint1:P(arc4random()%768, arc4random()%1024)
controlPoint2:P(arc4random()%768, arc4random()%1024)];
CALayer *bubble = [CALayer layer];
bubble.bounds = CGRectMake(0, 0, 10.0, 10.0);
bubble.position = CGPointMake(arc4random()%768, arc4random()%1024);
bubble.contents = (id)([UIImage imageNamed:#"Bubble.png"].CGImage);
[self.view.layer addSublayer:bubble];
CAKeyframeAnimation *bubbleAnim = [CAKeyframeAnimation animationWithKeyPath:#"position"];
bubbleAnim.path = bubblePath.CGPath;
bubbleAnim.rotationMode = kCAAnimationRotateAuto;
bubbleAnim.duration = 100;
bubbleAnim.repeatCount = HUGE_VALF;
[bubble addAnimation:bubbleAnim forKey:#"bubble"];
}
int i;
for (i=0; i<8; i++){
UIBezierPath *tinyPath = [UIBezierPath bezierPath];
[tinyPath moveToPoint:P(arc4random()%400+840, arc4random()%75+125)];
[tinyPath addCurveToPoint:P(-400, arc4random()%75+150)
controlPoint1:P(arc4random()%450, arc4random()%200+250)
controlPoint2:P(arc4random()%300, arc4random()%200+150)];
CALayer *tinyFish = [CALayer layer];
tinyFish.bounds = CGRectMake(0, 0, 150.0, 150.0);
tinyFish.position = CGPointMake(868, 800);
tinyFish.contents = (id)([UIImage imageNamed:#"Fish3.png"].CGImage);
[self.view.layer addSublayer:tinyFish];
CAKeyframeAnimation *tinyAnim = [CAKeyframeAnimation animationWithKeyPath:#"position"];
tinyAnim.path = tinyPath.CGPath;
tinyAnim.rotationMode = kCAAnimationRotateAuto;
tinyAnim.duration = 15;
tinyAnim.repeatCount = HUGE_VALF;
[tinyFish addAnimation:tinyAnim forKey:#"fish"];
}
}
[UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationCurveLinear animations:^
{
//do your animations here
}completion:^(BOOL finished)
{
//remove all layers here. Eventually add here another animation where you fade out all layers and in that animation's completion block remove them from the view
}];
Hope this helps. Cheers!

Flip, Grow, and Translate Animation

Look at this video of the MLB At Bat app. Basically, I just want to present a modalViewController with the UIModalPresentationFormSheet style and have it grow from another view then flip. Like when you tap on a game in the scoreboard on the MLB app. Anyone know how I can accomplish this?
Thanks
EDIT: My main view is pretty much the same setup as the MLB app. I'm using AQGridView and want the animation to occur when a cell in the grid view is tapped.
EDIT 2: I'd also be open to ditching the UIViewController concept and just using a plain UIView, then replicate the style of UIModalPresentationFormSheet manually if that's easier.
EDIT 3: Okay, forget using a UIViewController to do this, since I haven't gotten any responses, I'll assume it isn't possible. My new question is just how do I replicate the animation in the posted video using just UIView's? So basically, the initial view needs to grow, move, and flip all at the same time.
EDIT 4: I think I have the actual animation figured out, now my only problem is calculating coordinates to feed into CATransform3DTranslate. My view needs to animate pretty much exactly like in the video. It needs to start over another view and animate to the center of the screen. Here's how I'm trying to calculate the coordinates for the view that pops up in the center:
CGPoint detailInitialPoint = [gridView convertPoint:view.frame.origin toView:detailView.frame.origin];
CGPoint detailFinalPoint = detailView.frame.origin;
gridView is the container view of my main view that holds the smaller grid items. view is the specific grid item that we are animating from. And detailView is the view that comes up in the middle of the screen.
You can implement your own transition using a category on UIViewControler.
UIViewController+ShowModalFromView.h
#import <Foundation/Foundation.h>
#import <QuartzCore/QuartzCore.h>
#interface UIViewController (ShowModalFromView)
- (void)presentModalViewController:(UIViewController *)modalViewController fromView:(UIView *)view;
#end
UIViewController+ShowModalFromView.m
#import "UIViewController+ShowModalFromView.h"
#implementation UIViewController (ShowModalFromView)
- (void)presentModalViewController:(UIViewController *)modalViewController fromView:(UIView *)view {
modalViewController.modalPresentationStyle = UIModalPresentationFormSheet;
// Add the modal viewController but don't animate it. We will handle the animation manually
[self presentModalViewController:modalViewController animated:NO];
// Remove the shadow. It causes weird artifacts while animating the view.
CGColorRef originalShadowColor = modalViewController.view.superview.layer.shadowColor;
modalViewController.view.superview.layer.shadowColor = [[UIColor clearColor] CGColor];
// Save the original size of the viewController's view
CGRect originalFrame = modalViewController.view.superview.frame;
// Set the frame to the one of the view we want to animate from
modalViewController.view.superview.frame = view.frame;
// Begin animation
[UIView animateWithDuration:1.0f
animations:^{
// Set the original frame back
modalViewController.view.superview.frame = originalFrame;
}
completion:^(BOOL finished) {
// Set the original shadow color back after the animation has finished
modalViewController.view.superview.layer.shadowColor = originalShadowColor;
}];
}
#end
This can easily be changed to use whatever animated transition you want; for your's, you might want to use a CA3DTransform. Hope this helps!
To do a flip, grow, and translate animation you can use the following code:
- (void)animate {
int newX, newY; //New position
int newW, newH; //New size
[UIView animateWithDuration:someDuration delay:someDelay animations:^{
yourView.transform = CATransform3DMakeRotation(M_PI_2,1.0,0.0,0.0); //flip halfway
yourView.frame = CGRectMake(newX/2, newY/2, newW/2, newH/2);
} completion:^{
while ([yourView.subviews count] > 0)
[[yourView.subviews lastObject] removeFromSuperview]; // remove all subviews
// Add your new views here
[UIView animateWithDuration:someDuration delay:someDelay animations:^{
yourView.transform = CATransform3DMakeRotation(M_PI,1.0,0.0,0.0); //finish the flip
yourView.frame = CGRectMake(newX, newY, newW, newH);
} completion:^{
// Flip completion code here
}];
}];
}
Hope this helps!
OK, I figured it out. Here's what I did:
CGFloat duration = 0.8;
/*
//Detail View Animations
*/
CATransform3D initialDetailScale = CATransform3DMakeScale(view.frame.size.width/vc.view.frame.size.width, view.frame.size.height/vc.view.frame.size.height, 1.0);
CATransform3D initialDetailTransform = CATransform3DRotate(initialDetailScale, -M_PI, 0.0, -1.0, 0.0);
CATransform3D finalDetailScale = CATransform3DMakeScale(1.0, 1.0, 1.0);
CATransform3D finalDetailTransform = CATransform3DRotate(finalDetailScale, 0.0, 0.0, -1.0, 0.0);
NSMutableArray *detailAnimations = [NSMutableArray array];
CABasicAnimation *detailTransform = [CABasicAnimation animationWithKeyPath:#"transform"];
detailTransform.fromValue = [NSValue valueWithCATransform3D:initialDetailTransform];
detailTransform.toValue = [NSValue valueWithCATransform3D:finalDetailTransform];
detailTransform.duration = duration;
[detailAnimations addObject:detailTransform];
CABasicAnimation *detailFadeIn = [CABasicAnimation animationWithKeyPath:#"opacity"];
detailFadeIn.fromValue = [NSNumber numberWithFloat:1.0];
detailFadeIn.toValue = [NSNumber numberWithFloat:1.0];
detailFadeIn.duration = duration/2;
detailFadeIn.beginTime = duration/2;
[detailAnimations addObject:detailFadeIn];
CABasicAnimation *detailMove = [CABasicAnimation animationWithKeyPath:#"position"];
detailMove.fromValue = [NSValue valueWithCGPoint:vc.view.layer.position];
detailMove.toValue = [NSValue valueWithCGPoint:self.view.layer.position];
detailMove.duration = duration;
[detailAnimations addObject:detailMove];
CAAnimationGroup *detailGroup = [CAAnimationGroup animation];
[detailGroup setAnimations:detailAnimations];
[detailGroup setDuration:duration];
detailGroup.removedOnCompletion = NO;
detailGroup.fillMode = kCAFillModeForwards;
detailGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[vc.view.layer addAnimation:detailGroup forKey:#"anim"];
/*
//Grid Item View Animations
*/
CATransform3D initialGridScale = CATransform3DMakeScale(1.0, 1.0, 1.0);
CATransform3D initialGridTransform = CATransform3DRotate(initialGridScale, 0.0, 0.0, 1.0, 0.0);
CATransform3D finalGridScale = CATransform3DMakeScale(vc.view.frame.size.width/view.frame.size.width, vc.view.frame.size.height/view.frame.size.height, 1.0);
CATransform3D finalGridTransform = CATransform3DRotate(finalGridScale, M_PI, 0.0, 1.0, 0.0);
NSMutableArray *gridAnimations = [NSMutableArray array];
CABasicAnimation *gridTransform = [CABasicAnimation animationWithKeyPath:#"transform"];
gridTransform.fromValue = [NSValue valueWithCATransform3D:initialGridTransform];
gridTransform.toValue = [NSValue valueWithCATransform3D:finalGridTransform];
gridTransform.duration = duration;
[gridAnimations addObject:gridTransform];
CABasicAnimation *gridFadeOut = [CABasicAnimation animationWithKeyPath:#"opacity"];
gridFadeOut.fromValue = [NSNumber numberWithFloat:0.0];
gridFadeOut.toValue = [NSNumber numberWithFloat:0.0];
gridFadeOut.duration = duration/2;
gridFadeOut.beginTime = duration/2;
[gridAnimations addObject:gridFadeOut];
CABasicAnimation *gridMove = [CABasicAnimation animationWithKeyPath:#"position"];
gridMove.fromValue = [NSValue valueWithCGPoint:view.layer.position];
gridMove.toValue = [NSValue valueWithCGPoint:[self.view.layer convertPoint:self.view.layer.position toLayer:gridView.layer]];
gridMove.duration = duration;
[gridAnimations addObject:gridMove];
CAAnimationGroup *gridGroup = [CAAnimationGroup animation];
[gridGroup setAnimations:gridAnimations];
gridGroup.duration = duration;
gridGroup.fillMode = kCAFillModeForwards;
gridGroup.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
gridGroup.removedOnCompletion = NO;
[view.layer addAnimation:gridGroup forKey:#"anim"];
I'm doing this with an item in an AQGridView. In my code sample view is the instance of AQGridViewCell that I am animating. And vc.view is my detail UIViewController/UIView that I'm displaying.
I would highly recommend taking a look at this post.
You shouldn't need to actually handle all this animation yourself.
If you use the UIView class method transitionFromView:toView:duration:options:completion: and passing in UIViewAnimationOptionTransitionFlipFromLeft or UIViewAnimationOptionTransitionFlipFromRight -- whichever way you want the animation to flip.
I have implemented the same thing as shown in the MLB app using this method. Your from view would be the cell in the grid and the to view would be the thing that would on the "back" of the cell.
Hope this will reduce the overall code you'll need.
I would use a UICollectionView with a custom UICollectionViewCell and animate in with its delegate call... Just an example for others to pick at.
#pragma mark - UICollectionViewDelegate
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:
(NSIndexPath *)indexPath
{
[UIView beginAnimations:#"showImage" context:Nil];
CGRect cellFrame = cell.frame;
CGRect imgFram = cell.imageView.frame;
[UIView setAnimationDuration:0.8];
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:cell
cache:YES];
cellFrame.size = CGSizeMake(200, 200);
cellFrame.origin.y = 10;
cellFrame.origin.x = 45;
cell.frame = cellFrame;
imgFram.size = CGSizeMake(200, 200);
cell.imageView.frame = imgFram;
[collectionView bringSubviewToFront:cell];
[UIView commitAnimations];
}