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?

Solution 1

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

Solution 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
                 }];

Comments

[Rob]

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.

[escrafford]

Here's a similar post with a lot of good animation answers: stackoverflow.com/questions/5040494/…

[soleil]

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.

[Envil]

This works for fade in but I don't know why it doesn't work for fade out.?