How to animate an on-screen image

[#1]

As a follow on from my last forum post, I am going to demonstrate adding an image to the screen, attaching an animation to the image and adding a button to start the animation. Once again everything that will be displaying by the receiver will be inside the PageForName: method.

To add an image to the screen, you will use an uveImage object.

uveImage *image = [[uveImage alloc] initImageWithName:@"Remote" imageURL:[NSURL URLWithString:@"remote.jpg"] frame:CGRectMake(10, 10, 100, 100)];
[page addGadget:image];

The first parameter for the uveImage object is the name of the object. This is what you will use to reference  the object later in your code, for example when we wish to attach the animation to the image. The second parameter is the a url that will point to the location of the image. The file formats that U-verse Enabled support are JPEG and PNG. It is recommended  that JPEGs be used where possible as the file size will be about half the size of a PNG image with the same numbers of pixels.  The final parameter is the frame you wish to place the image in. Here I supplying a frame with the origin at 10,10 and a size of 100, 100.

To create the animation, there are a few steps. First we need to create the animation step object

uveAnimationPan *animation =  [[uveAnimationPan alloc] initWithFrom:0 deltaX:100 deltaY:0 duration:1.0];
[animationPan setAutoReverse:YES];
[animationPan setLoop:YES];	

The animation step type we are creating is a pan animation. The from parameter is an offset you can supply from where the animation should start from. The deltaX and deltaY are how much you wish to move the image to. The duration is how long you wish the animation to take. Unfortunately this is not a time parameter and is hardware dependent, so do not rely on this for precise timing of events.  We are also setting the animation to loop, execute continuously, and to auto-reverse, once the image has moved 100 pixels to the right, it will then move 100 pixels to the left.

The next step is to create an animation container and attach the pan animation to the container and add the container to the page.

uveAnimationContainer *container = [[uveAnimationContainer alloc] initWithName:@"container"];   
[container addAnimationStep:animation];
[page addAnimationContainer:container];

The next step is to create a uveActionAnimation object and an uveActionContainer to place the action in. The purpose of this step is to create an action that we can attach to the button we will create and trigger when the button is clicked.

uveActionAnimation *actionAnimation = [[uveActionAnimation alloc] initActionWithName: @"action" nameOfTargetControl:@"Remote" animationName:@"container"];
    
uveActionContainer *actionContainer = [[uveActionContainer alloc] initWithName:@"actionContainer"];

The important point to note here are the parameters to the uveActionAnimation initActionWithName:nameOfTargetControl:animationName. The nameOfTargetControl is being passed the name of the uveImage we created earlier, as this is what we want to animate. We are also passing the name of the animation container to the animationName parameter as this is the animation we want to associate with the image.

Now we can create the uveButton and set the action container with our animation as the onClick handler.

uveButton *button = [[uveButton alloc] initButtonWithName:@"button" text:@"Pan"];
[button setFrame= CGRectMake(10, 120, 100, 40)]; 
[button setOnClick:actionContainer];
[page addGadget:button];

The full pageForName: is below

- (uvePage*)pageForName:(NSString*)pageName withParams:(NSMutableDictionary*)params forFrame:(CGRect)tvFrame
{    
    // page
    uvePage * page = [[uvePage alloc] initPageWithName:@"Animation"];
    page.backgroundColor = [UIColor redColor];
    
    uveImage *image = [[uveImage alloc] initImageWithName:@"Remote" imageURL:[NSURL URLWithString:@"remote.jpg"] frame:CGRectMake(10, 10, 100, 100)];
   [page addGadget:image];

   uveAnimationPan *animation =  [[uveAnimationPan alloc] initWithFrom:0 deltaX:100 deltaY:0    duration:1.0];
   [animationPan setAutoReverse:YES];
   [animationPan setLoop:YES];
   uveAnimationContainer *container = [[uveAnimationContainer alloc]  initWithName:@"container"];   
   [container addAnimationStep:animation];
   [page addAnimationContainer:container];

   uveActionAnimation *actionAnimation = [[uveActionAnimation alloc] initActionWithName: @"action" nameOfTargetControl:@"Remote" animationName:@"container"]; 
   uveActionContainer *actionContainer = [[uveActionContainer alloc] initWithName:@"actionContainer"];

   uveButton *button = [[uveButton alloc] initButtonWithName:@"button" text:@"Pan"];
   [button setFrame= CGRectMake(10, 120, 100, 40)]; 
   [button setOnClick:actionContainer];
   [page addGadget:button];

    return page;
}