moving iphone app background image

Question

Hey there. I am creating my first iPhone native app (beginner Objective-C). On my main menu title screen, i would like for the background image to move slowly to the left. Is it possible to tile a background image and have it move? I'm basically trying to have my clouds drift across the background. How would you accomplish this?

Answer 1

I think you can do something clever with a UIScrollView. You could animate the views content offset in a background loop once the view loads. Check out the ScrollViewSuite sample code for some good hints about scroll views and tiling. Hope that helps.

Answer 2

I would add a UIImageView to your screen (placed under everything else on the screen). Put the clouds image in the UIImageView and animate the frame value to move it across the screen.

Something like this (this code is untried) would animate the image view, to move left across the screen:

cloudsImage.frame = CGRectMake(0,0,320,100);   // depends on your image

[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:3.0f];  // duration affects how fast it moves 

cloudsImage.frame = CGRectMake(-320,0,320,100);  // moves left off the screen

[UIView commitAnimations];

You could also animate the same image and slide it in from the right at the same time the first one is going out the left side to make it appear as a continuous flow of clouds coming from the right.

cloudsImage1.frame = CGRectMake(0,0,320,100);   // depends on your image
cloudsImage2.frame = CGRectMake(320,0,320,100); // start off the right edge

[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:3.0f];  // duration affects how fast it moves 

cloudsImage1.frame = CGRectMake(-320,0,320,100);  // moves left off the screen
cloudsImage2.frame = CGRectMake(0,0,320,100);     // moves left onto the screen

[UIView commitAnimations];

Answer 3

I did something similar using block-based animation to achieve this effect. Each animation block was defined in a separate function.

Assuming both images are the same size as the screen.

One image starts fully on the screen, one image starts to the left of the screen its right side flush with the left border of the screen (i.e. it's fully offscreen to the left). Let's call the onscreen image 'A' and the offscreen image 'B'.

function1() First block moves both images screen width to the right On completion it sets the image just moved off screen ('A') back to left of screen, then calls function2().

function2() Second block moves both images screen width to the right On completion it sets the image just moved off screen ('B') back to left of screen, then calls function1().

Here's the first function:

-(void)animate_1
{
[UIView animateWithDuration:roadTimerPeriod delay:0.0 
   options:UIViewAnimationOptionCurveLinear|UIViewAnimationOptionAllowUserInteraction 
   animations: ^{
   // frame 1 moves off bottom
 imageAnimatedRoad1.transform = CGAffineTransformTranslate(imageAnimatedRoad1.transform,0,480);
 // frame 2 moves onto top
 imageAnimatedRoad2.transform = CGAffineTransformTranslate(imageAnimatedRoad1.transform,0,480);     
            } 
 completion:^(BOOL finished)
           {
           // reset frame 1 ready to move on
           imageAnimatedRoad1.frame = CGRectMake(0,-480,320,480);
           [self animate_2];
           } ];   
}

Do you think this is a good solution, or have I missed something glaringly obvious?