UIImageView animation from left to right

Question

I want to move my UIImageView from left to right and vice versa. I accomplish half of it by using the following code:

[UIView setAnimationDuration:1.0];
[UIView setAnimationRepeatCount:10];
[UIView setAnimationRepeatAutoreverses:YES];

CGPoint pos = mover.center;
pos.x = 100.0f;
mover.center = pos;

[UIView commitAnimations];

Where mover is a UIImageView . The problem I am facing is that I am unable to move it from left to right completely. The above code is only moving it from right to center. I want to go further left from center. Can anybody guide me please?

Answer 1

I don't think UIKit animations provide you direct key frame animations to get the oscillation effect. We can try to achieve it using delegates by triggering one animation after another but it is not as efficient as CAKeyframeAnimation . To use this, you will have to include the QuartzCore framework in your project and #import <QuartzCore/QuartzCore.h> . You can achieve your oscillation effect by doing something like this,

self.mover.center = CGPointMake(160, 240);

CAKeyframeAnimation *animation;

animation = [CAKeyframeAnimation animationWithKeyPath:@"position.x"];
animation.duration = 3.0f;
animation.repeatCount = 10;
animation.values = [NSArray arrayWithObjects:
                    [NSNumber numberWithFloat:160.0f],
                    [NSNumber numberWithFloat:320.0f],
                    [NSNumber numberWithFloat:160.0f],
                    [NSNumber numberWithFloat:0.0f],
                    [NSNumber numberWithFloat:160.0f], nil]; 
animation.keyTimes = [NSArray arrayWithObjects:
                      [NSNumber numberWithFloat:0.0],
                      [NSNumber numberWithFloat:0.25],
                      [NSNumber numberWithFloat:.5], 
                      [NSNumber numberWithFloat:.75],
                      [NSNumber numberWithFloat:1.0], nil];    

animation.removedOnCompletion = NO;

[self.mover.layer addAnimation:animation forKey:nil];

This snippet of code oscillates a view left to right pretty close to your description although to get the exact effect you want you might have to change it a little.

Answer 2

Assuming you can target iOS4, this can be achieved by

   typedef void (^completionBlock)(BOOL);
   completionBlock moveToExtremeRight = ^(BOOL finished){
       // animate, with repetition, from extreme left to extreme right 
       [UIView animateWithDuration:2.0 // twice as long!
                          delay:0.0
                         options:UIViewAnimationOptionAllowUserInteraction|UIViewAnimationOptionRepeat|UIViewAnimationAutoReverse
                     animations:^{
                          mover.transform = CGAffineTransformMakeTranslation(100, 0);
                     }
                     completion:nil
       ];
   };
   mover.transform = CGAffineTransformIdentity;
   // animate once, to the extreme left
   [UIView animateWithDuration:1.0
                          delay:0.0
                        options:UIViewAnimationOptionAllowUserInteraction
                     animations:^{
                          // or whatever is appropriate 'extreme left'
                          mover.transform = CGAffineTransformMakeTranslation(-100, 0);
                     }
                     // on completion, start a repeating animation
                     completion:moveToExtremeRight
   ];

Answer 3

Instead of setting center you should look into setting the transform. With center you set the center which means you have to calculate the center correctly in relation to the image size.

To move it left set the transform to a translation of -320. To move it back set it to the identitiy transform.