Endless repeating scrolling/animated background in

Question

I'm stuck on animating 2 images that scroll on the iPhone view horizontally infinitely. The background can not have any gaps in it. If this can be done with just 1 image that would be great but I can't seem to get it. Here's the code I have so far:

-(void)moveImages {
CABasicAnimation *theAnimation; 
theAnimation=[CABasicAnimation animationWithKeyPath:@"transform.translation.x"];
theAnimation.duration=10;
theAnimation.repeatCount=100;
theAnimation.autoreverses=NO;
theAnimation.fromValue=[NSNumber numberWithFloat:320];
theAnimation.toValue=[NSNumber numberWithFloat:-320];
[theImage.layer addAnimation:theAnimation forKey:@"animateLayer"];

CABasicAnimation *theAnimation2;
theAnimation2=[CABasicAnimation animationWithKeyPath:@"transform.translation.x"];
theAnimation2.duration=10;
theAnimation2.repeatCount=100;
theAnimation2.autoreverses=NO;
theAnimation2.fromValue=[NSNumber numberWithFloat:640];
theAnimation2.toValue=[NSNumber numberWithFloat:-640];
[theImage2.layer addAnimation:theAnimation2 forKey:@"animateLayer2"];


}

Answer 1

Well, in code you could create a new image that is the composite of these two. This composite image is 960 pixels wide, and has the first image copied to the rightmost and leftmost positions. The middle position is the second image.

You start the image left shifted 640 pixels so you can only see the first image. Then you animate 640 pixels. When you restart the animation the image is always left shifted 640 pixels.

This way you have one animation.