Breaking News
Home / iOS / iOS Tutorials / iOS Fade in and Fade out View Effects

iOS Fade in and Fade out View Effects

Sprite Fading Effects

Building an iOS app without using any 2D framework like Cocos2D for graphics/animation implies that if you need to roll out  your code to achieve any simple animation effects. The good news is that with some simple code & basic understanding of the Animation and Sprites, these effects that can be achieved relatively easy without having to use those framework if you really don’t have to, thus keeping you project lean and avoid external dependencies.

Here we will quickly see if we can achieve a simple Fade In and Fade out Effect. This can be used on any type of UIView (UIImageView , UIButton etc.). Fade in means that view appears in main view slowly and Fade out means the opposite.

The most important thing is alpha(transparency) property of any view along with the basic beginAnimation method of the UIView together will be used to achieve the effect.

Demonstration

The following video shows the FadeIn /Fade Out effects in the simulator.

 

Code Snippet

The following code snippet shows the main methods.

  1. (void)fadeOut:(UIView*)viewToDissolve withDuration:(NSTimeInterval)duration   andWait:(NSTimeInterval)wait
  2. {
  3.         [UIView beginAnimations: @“Fade Out” context:nil];
  4.         // wait for time before begin
  5.         [UIView setAnimationDelay:wait];
  6.         // druation of animation
  7.         [UIView setAnimationDuration:duration];
  8.         viewToDissolve.alpha = 0.0;
  9.         [UIView commitAnimations];
  10. }
  11. (void)fadeIn:(UIView*)viewToFadeIn withDuration:(NSTimeInterval)duration         andWait:(NSTimeInterval)wait
  12. {
  13.         [UIView beginAnimations: @“Fade In” context:nil];
  14.         // wait for time before begin
  15.         [UIView setAnimationDelay:wait];
  16.                 // druation of animation
  17.         [UIView setAnimationDuration:duration];
  18.         viewToFadeIn.alpha = 1;
  19.         [UIView commitAnimations];
  20. }
  21. /**
  22.         Fade in from fade out
  23.  */
  24. (void) fadeInFromFadeOut: (UIView*)viewToFadeIn withDuration:(NSTimeInterval)duration
  25. {
  26.         viewToFadeIn.hidden=NO;
  27.         [self fadeOut:viewToFadeIn withDuration:1 andWait:0];
  28.         [self fadeIn:viewToFadeIn withDuration:duration andWait:0];
  29. }
  30. (void) buttonClicked :(id)sender
  31. {
  32.         NSLog(@“Button clicked”);
  33.         // Each button is given a tag
  34.         int tag = ((UIButton*)sender).tag;
  35.         if (tag ==1)
  36.         {
  37.                 sprite.alpha  =1;
  38.                 [self fadeOut : sprite withDuration: 3 andWait : 1 ];
  39.         }
  40.         else if (tag ==2)
  41.         {
  42.                 sprite.alpha  =0;
  43.                 [self fadeIn : sprite withDuration: 3 andWait : 1 ];
  44.         }
  45.         else
  46.         {
  47.                 [self fadeInFromFadeOut:sprite withDuration:4];
  48.         }
  49. }

The project source code can be downloaded using the attached link.

Attachment Size
ViewFadeIn.zip 39 KB
Advertisment ad adsense adlogger