Animate a UIImageView from center of the UIImageView

Question

I have a UIImageView that should animate from size (0,0) --> (93,75)

I have the following

  [UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionTransitionNone
                 animations:^{
                     imgButton.layer.anchorPoint = CGPointMake(imgButton.bounds.size.width/2, imgButton.bounds.size.height/2);
                     CGRect btnFrame = imgButton.frame;
                     btnFrame.size.width = 105;
                     btnFrame.size.height = 85;
                     imgButton.frame = btnFrame;
                 }
                 completion:^(BOOL finished) {
                     [self animageButton2:imgButton];
                 }];

This is working but the only problem I have is that it is not animating from the center of the UIImageView but from the top left corner.

Anybody got a clue?

Answer 1

I've solved it with the help of Borrden. This is what my solution was.

First create an imageview

UIImageView *imgLineup = [[UIImageView alloc]initWithFrame:CGRectMake(10, y, 93, 75)];
imgLineup.transform = CGAffineTransformScale(CGAffineTransformIdentity, 0.0, 0.0);

And then to the following.

[UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionCurveEaseInOut
                     animations:^{
                         imgButton.layer.anchorPoint = CGPointMake(0.5, 0.5);
                         imgButton.transform = CGAffineTransformScale(CGAffineTransformIdentity, 1.0, 1.0);

                     }
                     completion:^(BOOL finished) {
                        NSLog(@"done");
                     }];

Answer 2

just try with this. import #import <QuartzCore/QuartzCore.h> then put below code while adding the uimageView into subView of self.view

CABasicAnimation *zoomAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
[zoomAnimation setDuration:0.8];
[zoomAnimation setRepeatCount:1];
[zoomAnimation setFromValue:[NSNumber numberWithFloat:0.1]];
[zoomAnimation setToValue:[NSNumber numberWithFloat:1.0]];
[zoomAnimation setTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
[[imageView layer] addAnimation:zoomAnimation forKey:@"zoom"];

Answer 3

What i suggest may be kind of hack but it will be an easier way to achieve what you want:

• You set the initial frame of imageView as:

   CGRectMake(center, center, 0, 0); 

  So in your case it will be something closer to :

   CGRectMake(46, 37, 0, 0); 

• Then animate it with new rect of something like this:

   CGRectMake(0, 0,93,75); 

  You can use simple UIViewAnimation for this;

    [UIView beginAnimations:@"zoom" context:NULL]; [UIView setAnimationDuration:0.3]; imageView.frame = CGRectMake(0, 0, 93, 75); ; [UIView commitAnimations]; 

Hope It works

Answer 4

What you are trying to achieve is a scale transform ie animating UIView size from size(0,0) to size(w,h). Same effect can be achieved by CGAffineTransformMakeScale .

Initially when you create the view apply CGAffineTransformMakeScale(0.0,0.0) then animate size scale up to CGAffineTransformMakeScale(1.0,1.0) .

Code:

// Create the view and apply correct frame
UIView *tagView = [[UIView alloc] initWithFrame:CGRectMake(50, 100, 100, 100)];
tagView.tag = kTag;
//Apply scale transform, to make size(0,0) 
tagView.transform = CGAffineTransformMakeScale(0,0);
[self.view addSubview:tagView];

/// ............

UIView *tagView = [self.view viewWithTag:kTag];
//Now animate the view size scale up
[UIView animateWithDuration:0.5
        delay:0
        options:UIViewAnimationOptionCurveEaseOut
        animations:^{
                        tagView.transform = CGAffineTransformMakeScale(1.0,1.0);
                    }
        completion:NULL
 ];

This animation will happen about the center point of the view as you want, thus avoiding the need to play with anchorPoint and frame , which can be tricky. Read more about the relation between frame and anchorPoint from this answer .