iphone fading of images

Question

wat i want is to show an image in image view and fade the image after 5 seconds and show the next image .the images are stored in an array objects...i was able to make a su

Answer 1

@user652878 This answeres your question regarding fading seemlessly from one image to the next:

Create the following properties in your view controllers header:

UIImageView *imageViewBottom, *imageViewTop;
    NSArray *imageArray; 

Then add this code to your implimentaion file:

int topIndex = 0, prevTopIndex = 1; 
- (void)viewDidLoad {

    imageViewBottom = [[UIImageView alloc] initWithFrame:CGRectMake(0,0,320,480)];
    [self.view addSubview:imageViewBottom]; 

    imageViewTop = [[UIImageView alloc] initWithFrame:CGRectMake(0,0,320,480)];
    [self.view addSubview:imageViewTop];

    imageArray = [NSArray arrayWithObjects:  
                  [UIImage imageNamed:@"lori.png"],
                  [UIImage imageNamed:@"miranda.png"],
                  [UIImage imageNamed:@"taylor.png"],
                  [UIImage imageNamed:@"ingrid.png"],
                  [UIImage imageNamed:@"kasey.png"], 
                  [UIImage imageNamed:@"wreckers.png"], nil];


    NSTimer *timer = [NSTimer timerWithTimeInterval:5.0 
                                              target:self 
                                            selector:@selector(onTimer) 
                                            userInfo:nil 
                                             repeats:YES];

    [[NSRunLoop currentRunLoop] addTimer:timer forMode:NSDefaultRunLoopMode];
    [timer fire];

    [super viewDidLoad];
}

-(void)onTimer{
    if(topIndex %2 == 0){
        [UIView animateWithDuration:5.0 animations:^
        {
            imageViewTop.alpha = 0.0;
        }]; 
        imageViewTop.image = [imageArray objectAtIndex:prevTopIndex];
        imageViewBottom.image = [imageArray objectAtIndex:topIndex];
    }else{
        [UIView animateWithDuration:5.0 animations:^
         {
             imageViewTop.alpha = 1.0;
         }];    
        imageViewTop.image = [imageArray objectAtIndex:topIndex];
        imageViewBottom.image = [imageArray objectAtIndex:prevTopIndex];
    }
    prevTopIndex = topIndex; 
    if(topIndex == [imageArray count]-1){
        topIndex = 0; 
    }else{
        topIndex++; 
    }
}

Answer 2

You can use a repeating NSTimer to call a special method which animates the image views alpha property from 0.0 to 1.0 continuously. Here is some code I have written which works:

- (void)viewDidLoad {
    imgView.animationImages=[NSArray arrayWithObjects:  
                             [UIImage imageNamed:@"lori.png"],
                             [UIImage imageNamed:@"miranda.png"],
                             [UIImage imageNamed:@"taylor.png"],
                             [UIImage imageNamed:@"ingrid.png"],
                             [UIImage imageNamed:@"kasey.png"], 
                             [UIImage imageNamed:@"wreckers.png"], nil];



    imgView.animationDuration=20.0;
    imgView.animationRepeatCount=0;
    [imgView startAnimating];
    [self.view addSubview:imgView];
    [imgView release];
    //The timers time interval is the imageViews animation duration devided by the number of images in the animationImages array. 20/5 = 4 
    NSTimer *timer = [NSTimer timerWithTimeInterval:4.0 
                                              target:self 
                                            selector:@selector(onTimer) 
                                            userInfo:nil 
                                             repeats:YES];

    [[NSRunLoop currentRunLoop] addTimer:timer forMode:NSDefaultRunLoopMode];
    [timer fire];

    [super viewDidLoad];
}

//It is important that the animation durations within these animation blocks add up to 4 
//(the time interval of the timer). If you change the time interval then the time intervals 
//in these blocks must also be changed to refelect the amount of time an image is displayed. 
//Failing to do this will mean your fading animation will go out of phase with the switching of images.   

-(void)onTimer{
        [UIView animateWithDuration:3.0 animations:^{
            imgView.alpha = 0.0; 
        }];
        [UIView animateWithDuration:1.0 animations:^{
            imgView.alpha = 1.0; 
        }];
    }

If you want the fade duration to last for 5 seconds instead of 4, you need to increase your image views animationDuration property to 25, and then increase the fade animation durations in the two blocks such that the sum fade time = 5.

Answer 3

Here's what worked for me when I wanted to animate a set of messages as images to the user. No matter how many images you have this code will rotate through them.

[self.messageBottom = [[UIImageView alloc] initWithFrame:CGRectMake(289, 262, 171, 38)];
[self addSubview:messageBottom];
[messageBottom setAlpha:0.0];
[messageBottom release];

self.messageTop = [[UIImageView alloc] initWithFrame:CGRectMake(289, 262, 171, 38)];
[self addSubview:messageTop];
[messageTop setAlpha:1.0];
[messageTop release];


self.messageImgsArray =[NSArray arrayWithObjects:  
                        [UIImage imageNamed:@"image1.png"],
                        [UIImage imageNamed:@"image2.png"],
                        [UIImage imageNamed:@"image3.png"],
                        [UIImage imageNamed:@"image4.png"],
                        [UIImage imageNamed:@"image5.png"],nil];


topIndex = 0, bottomIndex = 1;     
[messageTop setImage:[messageImgsArray objectAtIndex:topIndex]];

//The timers time interval is the imageViews animation duration devided by the number of images in the animationImages array. 20/5 = 4 
NSTimer *timer = [NSTimer timerWithTimeInterval:2.0 
                                         target:self 
                                       selector:@selector(onTimer) 
                                       userInfo:nil 
                                        repeats:YES];

[[NSRunLoop currentRunLoop] addTimer:timer forMode:NSDefaultRunLoopMode];

}


-(void)onTimer{

    [UIView animateWithDuration:1 animations:^{

        //set the image of the image that is not currently visible

        if (messageTop.alpha == 0) {
            [messageTop setImage:[messageImgsArray objectAtIndex:topIndex]];
        }
        if (messageBottom.alpha == 0) {
            [messageBottom setImage:[messageImgsArray objectAtIndex:bottomIndex]];
        }

        //make sure the images rotate
        [messageTop setAlpha:messageTop.alpha == 0 ? 1 : 0];
        [messageBottom setAlpha:messageBottom.alpha == 0 ? 1 : 0];

        //make sure the images play in a loop

        topIndex = topIndex < [messageImgsArray count]-1 ? bottomIndex+1 : 0;
        bottomIndex = bottomIndex < [messageImgsArray count]-1 ? bottomIndex+1 : 0;

    }];
}