FadingImageView

Sometimes I think it looks silly when you change the .image property of a UIImageView. I don’t like the sudden change and think it could be done a little more elegantly.

So, I came up with FadingImageView. It will basically fade in the new image over the old image before removing the old image from the view hierarchy.

I’ll just post the code and you can see for yourself.

//
//  FadingImageView.h
//
//
//  Created by Stephen O'Connor on 1/3/12.
//  License?  Just use it.  I'm not liable.
//

#import <UIKit/UIKit.h>

@interface FadingImageView : UIImageView
{
    NSTimeInterval fadeTime;
    BOOL fadesOnSetImage;
}
@property NSTimeInterval fadeTime;
@property BOOL fadesOnSetImage;  // set to NO to have it behave like a normal UIImageView

- (void)setImage:(UIImage *)anImage animated:(BOOL)fades;  // uses fadeTime property
- (void)setImage:(UIImage *)anImage fadeTime:(NSTimeInterval)duration;  // overrides property and assumes animated (unless fadetime = 0.0)s

@end

and now the .m file

//
//  FadingImageView.m
//
//
//  Created by Stephen O'Connor on 1/3/12.
//  License?  Just use it.  I'm not liable.
//

#import "FadingImageView.h"

@interface FadingImageView()

- (void)setImage:(UIImage *)anImage animated:(BOOL)fades fadeTime:(NSTimeInterval)duration;
- (void)initializeView;  // for common init stuff

@end

@implementation FadingImageView
@synthesize fadeTime, fadesOnSetImage;

-(id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        [self initializeView];
    }
    return self;
}

- (id)initWithCoder:(NSCoder *)aDecoder
{
    self = [super initWithCoder:aDecoder];
    if (self) {
        [self initializeView];
    }
    return self;
}

- (void)initializeView
{
    self.fadeTime = 0.3f;
    self.fadesOnSetImage = YES;
}

- (void)setImage:(UIImage *)anImage
{
    if (self.fadesOnSetImage == YES && anImage != nil) {
        [self setImage:anImage animated:YES];
    }
    else{
        [super setImage: anImage];
    }
}

// uses property
- (void)setImage:(UIImage *)anImage animated:(BOOL)fades
{
    [self setImage:anImage animated:fades fadeTime:self.fadeTime];
}

- (void)setImage:(UIImage *)anImage fadeTime:(NSTimeInterval)duration
{
    [self setImage:anImage animated:YES fadeTime:duration];
}

- (void)setImage:(UIImage *)anImage animated:(BOOL)fades fadeTime:(NSTimeInterval)duration
{
    if (fades) {
        if (anImage != nil) {
            UIImageView *overlay = [[UIImageView alloc] initWithFrame: self.bounds];
            overlay.backgroundColor = self.backgroundColor;
            overlay.image = anImage;
            overlay.alpha = 0.0f;
            [self insertSubview:overlay atIndex:0];

            [UIView animateWithDuration: duration
                                  delay:0.0
                                options:UIViewAnimationCurveLinear
                             animations:^{
                                 overlay.alpha = 1.0f;
                             } completion:^(BOOL finished) {
                                 [super setImage:anImage];
                                 [overlay removeFromSuperview];
                             }
             ];
        }
        else
        {
            [UIView animateWithDuration: duration
                                  delay:0.0
                                options:UIViewAnimationCurveLinear
                             animations:^{
                                 self.alpha = 0.0f;
                             } completion:^(BOOL finished) {
                                 [super setImage:anImage];  // sets it to nil and therefore removes it
                                 self.alpha = 1.0f;    // sets his alpha back to 1.0f
                             }
             ];
        }
    }
    else{
        [super setImage: anImage];
    }
}

@end

There it is! I may get into the further extensions I did with this, such as those for images that load asynchronously. For now, please enjoy!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s