Fade in and fade out a UIView while it is moving

Question

It's easy enough to animate the view:

[UIView animateWithDuration:1.0
                     animations:^{theView.center = newCenter; theView.alpha = 0;}
                     completion:^(BOOL finished){
                         [theView removeFromSuperview];
                     }];

The problem is that when I add it as a subview, I want it to fade in and already look like it is moving. Right now it appears immediately, then moves and fades out.

So, I need to set it's initial alpha to zero, fade it quickly while it is moving, then fade it out. Is this possible with UIView animations? I can't have two competing animation blocks working on the same object right?

I'm not following you: Your code is typical "slide and fade out" example. But then you talk about "when I add it as a subview". Are you adding it? Or removing it? But, in answer to your question, you should not need multiple animation blocks. It's just a question of what you're trying to do. — Rob, Feb 08 '13 at 19:14
Here's a similar post with a lot of good animation answers: http://stackoverflow.com/questions/5040494/objective-c-ios-development-animations-autoreverse — escrafford, Feb 08 '13 at 19:16

score 13 · Accepted Answer · edited Feb 08 '13 at 21:06

All you need to do is apply 2 animations back-to-back. Something like this ::

theView.alpha = 0;
[UIView animateWithDuration:1.0
                 animations:^{
                     theView.center = midCenter;
                     theView.alpha = 1;
                 }
                 completion:^(BOOL finished){
                     [UIView animateWithDuration:1.0
                                      animations:^{
                                          theView.center = endCenter;
                                          theView.alpha = 0;
                                      }
                                      completion:^(BOOL finished){
                                          [theView removeFromSuperview];
                                      }];
                 }];

So in the 1st second it will appear while moving and then in the next second it will fade out

Hope this helps

This should work, even though it requires an extra center point to calculate. I ended up using a CABasicAnimation for the movement and a UIView animation for the alpha. — soleil, Feb 08 '13 at 23:23

score 2 · Answer 2 · answered Feb 08 '13 at 19:24

2

Put the initial alpha=0 outside animation block.

theView.alpha = 0;
[UIView animateWithDuration:1.0
                 animations:^{
                     theView.center = newCenter; 
                     theView.alpha = 1;
                 }
                 completion:^(BOOL finished){
                     // Do other things
                 }];

answered Feb 08 '13 at 19:24

Ben Lu

2,982
4
31
54

1

This works for fade in but I don't know why it doesn't work for fade out.? – Envil Sep 16 '13 at 04:26

Fade in and fade out a UIView while it is moving

2 Answers2

Linked