rounak / rjimageloader

A recreation of the image loader animation created by Michael Villar for iOS

RJImageLoader

This project is based on Michael Villar's excellent Motion Experiments post. He designed an image loading animation which shows a circular progress indicator, and then reveals the image in an expanding circular ring.

For a detailed explaination of the animation, visit raywenderlich.com.

Usage

#import <UIImageView+RJLoader.h>

//before starting
[self.imageView startLoader];

//to change the color of the indicator, use the startLoaderWithTintColor: method

//update progress
[self.imageView updateImageDownloadProgress:progress];

//after completion
[self.imageView reveal];

To run the example project, clone the repo, and run pod install from the Example directory first.

Installation

RJImageLoader is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod "RJImageLoader"

Author

Rounak Jain.

Follow me on Twitter @r0unak

##Contributors

@bguidolim

License

RJImageLoader is available under the MIT license. See the LICENSE file for more info.

rjimageloader's Issues

every time loading in tableview cell?

Hi I am working with the RJImage Loader using podfile.working fine. I am using in Tableview Cell for image loading but when i scroll then every time it is showing loader and tableview not moving smoothly
below code i am using in cellForRowAtIndexPath

_imageview =cell.mediaImageView;
[_imageview startLoaderWithTintColor:[UIColor redColor]];
// [self indicatore];
__weak typeof(self)weakSelf = self;
urlString = messageString;
[weakSelf.imageview sd_setImageWithURL:[NSURL URLWithString:urlString] placeholderImage:nil options:SDWebImageRetryFailed | SDWebImageRefreshCached progress:^(NSInteger receivedSize, NSInteger expectedSize) {
[weakSelf.imageview updateImageDownloadProgress:(CGFloat)receivedSize/expectedSize];
} completed:^(UIImage image, NSError error, SDImageCacheType cacheType, NSURL *imageURL) {
[weakSelf.imageview reveal];
}];

where i am missing please help me

Bugs

1. pod try RJImageLoader opens broken project.
2. trying out pod in app, animation runs once, then on second run it is inversed and finally after that it's completely gone.

I made a small video: http://cl.ly/1y0G1p050o0M. I think the problem is in SDWebImage:

    self.photoImageView.image = nil;

    [self.photoImageView startLoaderWithTintColor:[UIColor blueColor]];
    NSLog(@"Start loader");

    __weak typeof(self) weakSelf = self;
    [self.photoImageView sd_setImageWithURL:url
                           placeholderImage:nil
                                    options:SDWebImageRetryFailed | SDWebImageRefreshCached
                                   progress:^(NSInteger receivedSize, NSInteger expectedSize) {
                                       dispatch_async(dispatch_get_main_queue(), ^{
                                           CGFloat percent = (CGFloat)receivedSize / expectedSize;
                                           [weakSelf.photoImageView updateImageDownloadProgress:percent];
                                           NSLog(@"Update progress = %f", percent);
                                       });
                                   }
                                  completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {
                                    [weakSelf.photoImageView reveal];
                                    NSLog(@"Reveal loader");
                                  }];

I posted couple of issues in SDWebImage related to this problem. SDWebImage/SDWebImage#1090

Since SDWebImage is a wreck, we can avoid completion handler and run all animations in progress block:

    self.photoImageView.image = nil;

    [self.photoImageView startLoaderWithTintColor:[UIColor blueColor]];
    NSLog(@"Start loader");

    __weak typeof(self) weakSelf = self;
    [self.photoImageView sd_setImageWithURL:url
                           placeholderImage:nil
                                    options:SDWebImageRetryFailed | SDWebImageRefreshCached
                                   progress:^(NSInteger receivedSize, NSInteger expectedSize) {
                                       dispatch_async(dispatch_get_main_queue(), ^{
                                           CGFloat percent = (CGFloat)receivedSize / expectedSize;
                                           [weakSelf.photoImageView updateImageDownloadProgress:percent];
                                           NSLog(@"Update progress = %f", percent);

                                           if(receivedSize == expectedSize) {
                                               [weakSelf.photoImageView reveal];
                                           }
                                       });
                                   }
                                  completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {
                                  }];

But then it's all broken after I run it twice, see video: http://cl.ly/2U192i321D1N

Image flicker

After the reveal animation is done, there is a quick flicker. Is there a way to remove this flicker?

Custom Image from local rep

How load custom image from my local rep. with animation