iOS - Animation effects - Image pop-in

Question

I'd like to have an image in my iphone app "pop-in" on screen rather than just appearing. By "pop-in" I mean that it would grow from a small dot to its actual size. For reference, this is exactly the same as the "pop" animation effect in Keynote. I'm completely new to iOS animations, so if someone could point me in the direction on the animation effects I would need to use, it would be greatly appreciated.

Thanks

Brian

UPDATE I've added this code from the suggestions below. This works but it scales my image down, rather than up. I know that is because I have 0.01 as the transform scale size, but I would like to know how I can start out with an image of size 0.0 and scale up to 1. Is it just a matter to setting the size of my image to 0? Thanks

[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration: 0.2];
image.transform = CGAffineTransformMakeScale(0.01, 0.01);
[UIView setAnimationDelegate:self];
[UIView commitAnimations];

Bigg

Answer 1

The effect you’re looking for is something like this:

// instantaneously make the image view small (scaled to 1% of its actual size)
view.transform = CGAffineTransformMakeScale(0.01, 0.01);
[UIView animateWithDuration:0.2 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
    // animate it to the identity transform (100% scale)
    view.transform = CGAffineTransformIdentity;
} completion:^(BOOL finished){
    // if you want to do something once the animation finishes, put it here
}];

Memphis

Is there a way to scale-up the image from a point different than the center? – Collogue

Yep—change its layer’s anchor point. theView.layer.anchorPoint = CGPointMake(0, 0) will make the view scale from its top left; (1, 1) is its bottom right. – Memphis

What kind of object is the variable image? – Berretta

image, in this example, is a UIView. – Memphis

Answer 2

if you want something like Facebook does on liking any post then use this

-(void)animateButton:(UIButton *)sender{
UIButton * btn = (UIButton *)sender;
[UIView animateWithDuration:0.3/1.5 animations:^{
    btn.transform = CGAffineTransformScale(CGAffineTransformIdentity, 1.4, 1.4); // scales up the view of button 
} completion:^(BOOL finished) {
    [UIView animateWithDuration:0.3/2 animations:^{
        btn.transform = CGAffineTransformScale(CGAffineTransformIdentity, 0.7, 0.7);// scales down the view of button
    } completion:^(BOOL finished) {
        [UIView animateWithDuration:0.3/2 animations:^{
            btn.transform = CGAffineTransformIdentity; // at the end sets the original identity of the button
        }];
    }];
}];}

just call this method when you want to animate the view

if you have text and image on the button and you just want to animate the image of the button then just replace "btn" with "btn.imageView" , this will just produce animation on the image view property of the button. Hope it helps All the best.

Mancini

Answer 3

You have to animate the frame of the view, to shrink it from zero to the final state. This can be done for example with UIView block animation.

So for example start with your view as an IBOutlet property self.myView with the final size and position, but set the hidden flag. Then when you want it to appear use the following:

// Save old frame as final stater and set it to zero size for the start of the animation
// But keep the same center position, so it just grows and don't move around 
CGRect oldFrame = self.myView.frame;
CGRect oldCenter = self.myView.center;

self.myView.frame = CGRectZero;
self.myView.center = oldCenter;

self.myView.hidden = NO;

NSTimeInterval duration = 0.3;

[UIView animateWithDuration:duration delay:0.0 options:UIViewAnimationOptionAllowUserInteraction animations:^{
                // New position and size after the animation should be the same as in Interface Builder
                self.myView.frame = oldFrame
    }
                     completion:^(BOOL finished){
                                                 // You can do some stuff here after the animation finished
                     }];

Total

That… probably won’t work well. Animating the frame of an image view forces it to redraw itself at every frame of the animation. – Memphis

@NoahWitherspoon would be a transform a better way? – Total

Yup. Animating from CGAffineTransformMakeScale(0.01,0.01) to CGAffineTransformIdentity would do the trick. – Memphis

Thanks for responding guys. Ive updated my question with a further example. How do I scale up rather than down? – Bigg

Answer 4

Swift 2.0 version

    view.transform = CGAffineTransformMakeScale(0.01, 0.01);

    UIView.animateWithDuration(0.2, delay: 0, options: .CurveEaseOut, animations: { () -> Void in
        // animate it to the identity transform (100% scale)
        self.view.transform = CGAffineTransformIdentity;

        }) { (finished) -> Void in
        // if you want to do something once the animation finishes, put it here
    }

Sensitivity

Answer 5

For that you will have to use a simple UIView

Add the UIview to your current view.

- (void) initPopUpView
 {
   popup.alpha = 0;
   popup.frame = CGRectMake (160, 240, 0, 0);
   [self.view addSubview:popup];
 }

- (void) animatePopUpShow 
 {
   [UIView beginAnimations:nil context:NULL];
   [UIView setAnimationDuration:0.3];
   [UIView setAnimationDelegate:self];
   [UIView setAnimationWillStartSelector:@selector(initPopUpView)];

   popup.alpha = 1;
   popup.frame = CGRectMake (20, 40, 300, 400);

   [UIView commitAnimations];
 }

Washtub