Animate a UIImageView from center of the UIImageView

问题

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?

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

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

回答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

回答4:

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.

来源：https://stackoverflow.com/questions/17362016/animate-a-uiimageview-from-center-of-the-uiimageview

标签

iphone

ios

objective-c

uiimageview

uiviewanimation