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?

Did you actually read the documentation on `anchorPoint`? I guess no because you are not giving it the correct value. Furthermore, it only applies to `CGAffineTransform` manipulations, not size. If you want to do it this way you will have to adjust the origin yourself. I suggest setting the scale to zero and animating it up to 1. — borrrden, Jun 28 '13 at 10:02

score 4 · Answer 1 · answered Jun 28 '13 at 12:00

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");
                     }];

Default value of `anchorPoint` is `(0.5,0.5)` hence reassigning it is redundant. — Amar, Jun 28 '13 at 14:54

score 2 · Answer 2 · answered Jun 28 '13 at 11:14

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"];

hello. I want to add some action at end of animation, how to do it? — kemdo, Jan 01 '17 at 14:14

score 0 · Answer 3 · answered Jun 28 '13 at 10:22

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

score 0 · Answer 4 · edited May 23 '17 at 12:15

What you are trying to achieve is a scale transform i.e. 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.

Animate a UIImageView from center of the UIImageView

4 Answers4

Linked