addSubview animation

Question

I have main UIView where I display different data. Then I put a button, which displays subview like this:

- (IBAction) buttonClicked:(id)sender
{
    UIView *newView = [[UIView alloc] initWithFrame:CGRectMake(25,25,50,20)];
    UILabel *newLabel = [[UILabel alloc] initWithFrame:CGRectMake(25,25,50,25)];
    newLabel.text = @"some text";
    [newView addSubview:newLabel];

    [self.view addSubview:newView];
    [newLabel release];
    [newView release];
}

newView appears fine, but it doesn't animate itself any way, it just appears immediately. How can I add some kind of animation when newView appears? Like zoom or slide down or something like that. Is there some simple code?

adedoy · Answer 1 · 2018-09-11T06:36:46.460

85

[UIView transitionWithView:containerView duration:0.5
        options:UIViewAnimationOptionTransitionCurlUp //change to whatever animation you like
        animations:^ { [containerView addSubview:subview]; }
        completion:nil];

edited Sep 11 '18 at 06:36

answered Dec 19 '11 at 13:20

adedoy

2,275
1
20
28

1

Hey @adedoy how use right animation without flip possible ?? like pushviewcontroller............ – Bhavesh Nayi Aug 21 '13 at 08:59

score 80 · Accepted Answer · answered Feb 25 '10 at 20:42

Hi You could use the UIView Animations:

[newView setFrame:CGRectMake( 0.0f, 480.0f, 320.0f, 480.0f)]; //notice this is OFF screen!
[UIView beginAnimations:@"animateTableView" context:nil];
[UIView setAnimationDuration:0.4];
[newView setFrame:CGRectMake( 0.0f, 0.0f, 320.0f, 480.0f)]; //notice this is ON screen!
[UIView commitAnimations];

The SDK will now figure this out for you and animate the view to the positions you gave it. This works for most properties of UIViews: alpha, scale, bounds, frames, etc.

There are also build in animations as flip and curl:

[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:1.0];
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromRight
                           forView:newView
                            cache:YES];

[self.navigationController.view addSubview:settingsView.view];
[UIView commitAnimations];

Hope this helps out getting you started:)

While the first example is technically valid it is poor form considering the large amounts of screen sizes you need to support today and so I would recommend either the second one or @adedoy's answer — Allison, Jul 14 '16 at 20:17

score 25 · Answer 3 · answered Sep 25 '15 at 05:01

25

Let's do this in swift.

var redView = UIView(frame:CGRectMake(20,20,100,100))
redView.backgroundColor = UIColor.redColor
redView.alpha = 0.0
view.addSubview(redView)

UIView.animateWithDuration(0.25) { () -> Void in
    redView.alpha = 1.0
}

Adding a subview cannot be animated by simply putting it in an animateWithDuration block. And it can't be animated using hidden.

answered Sep 25 '15 at 05:01

Rob Norback

6,401
2
34
38

But if we do this, we would notice a resize animation when we want to combine it with constraint update animation and call layoutIfNeeded inside animaton block. – Amber K Sep 22 '22 at 07:27

score 24 · Answer 4 · answered Nov 17 '11 at 11:56

24

link against QuarzCore framework

#import <QuartzCore/QuartzCore.h>

CATransition *transition = [CATransition animation];
transition.duration = 1.0;
transition.type = kCATransitionPush; //choose your animation
[newView.layer addAnimation:transition forKey:nil];
[self.view addSubview:newView];

answered Nov 17 '11 at 11:56

Chakalaka

2,807
19
26

2

+1 You can also use transition subtypes to further customize the transition.https://developer.apple.com/library/ios/documentation/GraphicsImaging/Reference/CATransition_class/#//apple_ref/doc/constant_group/Common_Transition_Subtypes – anoop4real Jul 01 '15 at 14:10

score 22 · Answer 5 · answered Oct 18 '13 at 22:35

22

I found that even with the animation blocks and options, trying to animate addSubview alone would not do anything for me. I found a workaround which is to set the subview's alpha to 0.0, add the subview, and then animate the setting of the alpha from 0.0 to 1.0. This gives me the fade in effect I was looking for.

Hope this helps someone else.

UIView *redView = [[UIView alloc] initWithFrame:CGRectMake(20, 20, 100, 100)];
redView.backgroundColor = [UIColor redColor];
redView.alpha = 0.0;

[self.view addSubview:redView];

[UIView animateWithDuration:0.5 animations:^{
  redView.alpha = 1.0;
}];

answered Oct 18 '13 at 22:35

Kyle Clegg

38,547
26
130
141

1

Works perfectly. However, with Xcode 10 one cannot set the alpha component directly. you need to assign a new UIColor with alpha set, e.g. `[[UIColor redColor] colorWithAlphaComponent:0.0]`. – Andreas Kraft Jan 07 '19 at 12:01
thanks @AndreasKraft I was set a color with alpha and wondering why myView.alpha = 1 not working and your comment helped me to figure out. – Mahdi Moqadasi Apr 20 '20 at 11:00

score 7 · Answer 6 · answered May 06 '20 at 10:47

Swift 5

UIView.transition(with: renderView, duration: 0.25, options: .transitionCrossDissolve, animations: {
        self.renderView.addSubview(emojiView)
        self.renderView.bringSubviewToFront(emojiView)
    }, completion: nil)

in code example renderView is view to what you will add your subView

addSubview animation

6 Answers6

Linked