Make Image Wrap Around Screen Edge? - iPhone Obj-C

Question

I couldn't figure out a quick, concise way to explain what I'm trying to accomplish (which has made it difficult to find an answer searching Google), so I'll just try to elaborate more here. What I am trying to accomplish is moving a UIImageView to the top edge of the iPhone's screen and then keep moving it up, but once the image passes the top edge, have it appear at the bottom of the screen, as it continues moving through.

I've been using the basic [UIView commitAnimations] commands for the basic moving of objects in my application, so it'd be nice if this could be accomplished using using that (though it doesn't have to).

Answer 1

You don't need to mess around with scroll views or switch to cocos2d to implement simple animations. All you need to do is create 2 CALayer objects and then assign layer.contents to the same image.

CALayer *layer1 = [CALayer layer]
CALayer *layer2 = [CALayer layer]
UIImage *image = [UIImage imageNamed:@"whatever.png"];

layer1.contents = (id) image.CGImage;
layer2.contents = (id) image.CGImage;

Then use a normal animation to update the position of the two frames as described this Apple QA doc . You just need to determine the height of the window and then make sure that the start and end Y points of the 2 CALayers are always 1 height of difference. So, when layer1 animates to Y = -1 that means that layer2 would be at Height-1. Only when both layers are partially exposed would you see then both, that is how you get this effect to work and seem to be only 1 layer.

Answer 2

I think you could do this with a UIScrollView... here's something I wrote on cyclic scroll views a while ago.

I would begin by making the content size be the height of the window with the image view at one edge. As the image scrolls off the visible area the next page is coming into view with another image that looks the same but is not. I think this could save you a lot of frame calculations, nested animation blocks and other confusions. You could certainly do it with discrete views but I think it could be reinventing the wheel.

Answer 3

The best way to implement this is to create a CCNode subclass that will contain first and second sprite and will swap them if required. In this way all your logic will be very simple. You will just work with one CCNode (subclass) and will not think about swaping sprites - it will be done automatically by your class

@interface MyNode : CCNode
{
CCSprite *sprite1;
CCSprite *sprite2;
CCSprite *currentSprite;
bool isChanging; //indicates that now two sprites are visible
}
@end