iOS Crossfading Multiple Images in imageviews

Question

I have 9 images that I need to cross fade. I tried to do animation with animationImages method of imageview. But unfortunately, it does not support cross fading effect between images. Can anybody tell me how to achieve this?

Here's a shorter version and very good results http://stackoverflow.com/a/5057691/1344237 — iosMentalist, Nov 29 '13 at 09:23

score 4 · Accepted Answer · answered Oct 10 '12 at 00:24

I usually use Core Animation, specifically CABasicAnimation,

I used this recently, an image view with a couple of gesture recognizers for left and right swipe. Check out the fading animations I am using:

_someImageView = [[UIImageView alloc] initWithFrame:myFrame];
_someImageView.image = [myArrayOfImages objectAtIndex:0];
[self.view addSubview:_someImageView];
[_someImageView release];

_currentImageIndex = 0;

_someImageView.userInteractionEnabled = YES;

UISwipeGestureRecognizer *swipeLeftGesture = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(changeImage:)];
swipeLeftGesture.direction = UISwipeGestureRecognizerDirectionLeft;
[_someImageView addGestureRecognizer:swipeLeftGesture];
[swipeLeftGesture release];

UISwipeGestureRecognizer *swipeRightGesture = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(changeImage:)];
swipeRightGesture.direction = UISwipeGestureRecognizerDirectionRight;
[_someImageView addGestureRecognizer:swipeRightGesture];
[swipeRightGesture release];

Then this is called every time I swipe, or if you prefer to do something time based, then have your timer call this, just make sure you increment a counter so that you can loop the images:

- (void)changeImage:(UISwipeGestureRecognizer *)swipe{

    NSArray *images = [myArrayOfImages images];
    NSInteger nextImageInteger = _currentImageIndex;


    if(swipe.direction == UISwipeGestureRecognizerDirectionLeft)
        nextImageInteger++;
    else
        nextImageInteger--;


    if(nextImageInteger < 0)
        nextImageInteger = images.count -1;
    else if(nextImageInteger > images.count - 1)
        nextImageInteger = 0;

    _currentImageIndex = nextImageInteger;

    UIImage *target = [images objectAtIndex:_currentImageIndex];

    CABasicAnimation *crossFade = [CABasicAnimation animationWithKeyPath:@"contents"];
    crossFade.duration      = 0.5;
    crossFade.fromValue     = _someImageView.image;
    crossFade.toValue       = target;
    [_someImageView.layer addAnimation:crossFade forKey:@"animateContents"];
    _someImageView.image = target;
}

score 1 · Answer 2 · answered Oct 10 '12 at 00:16

1

Just create two image views and lay them on top of one another. When you want to crossfade to the next image, just set the bottom image view's image to the image you want to fade to, and animate the alpha of the top image view to 0. Rinse and repeat.

answered Oct 10 '12 at 00:16

eric.mitchell

8,817
12
54
92

This although it would do the trick, is not really the best way. Check out my answer using Core Animation: http://stackoverflow.com/a/12810273/662605 – Daniel Oct 10 '12 at 00:27

score 0 · Answer 3 · edited Nov 17 '16 at 21:19

- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view from its nib.
UIImage *img=[UIImage imageNamed:@"images.jpeg"];
imgview=[[UIImageView alloc]init];
imgview.frame=CGRectMake(30,90, img.size.width, img.size.height);
[self.view addSubview:imgview];
[self animateImages];
}
- (void)animateImages
{
static int count = 0;
NSArray *animationImages = @[[UIImage imageNamed:@"images.jpeg"], [UIImage imageNamed:@"images (1).jpeg"]];
UIImage *image = [animationImages objectAtIndex:(count % [animationImages count])];

[UIView transitionWithView:imgview
                  duration:2.0f // animation duration
                   options:UIViewAnimationOptionTransitionCrossDissolve
                animations:^{
                    imgview.image = image;
                } completion:^(BOOL finished) {
                    [self animateImages];
                    count++;
                }];
}

iOS Crossfading Multiple Images in imageviews

3 Answers3