Question

I have a UIImageView with an array of images it iterates through to form an animation.

[imageView setAnimationImages:arrayOfImages];

I now need to move this image view along a path whilst it is animating. I had a look through the source code of this example. It uses UIBezierPath to create the path and CALayer to represent the object that moves along the path. But how would I do this for a animating UIImageView?

Many thanks for any advice.

Answer 1

[EDIT] Please note I also had to add the UIImageView as a subview to the current view.

Finally figured it out using the example I gave before. Here are my steps:

1. Create the path. (note P = CGPointMake in the code below)

   UIBezierPath *trackPath = [UIBezierPath bezierPath];
   [trackPath moveToPoint:P(160, 25)];
   [trackPath addCurveToPoint:P(300, 120)
            controlPoint1:P(320, 0)
            controlPoint2:P(300, 80)];
   [trackPath addCurveToPoint:P(80, 380)
            controlPoint1:P(300, 200)
            controlPoint2:P(200, 480)];
   

   ….

2. Create the UIImageView and give it an array of animation images.

   UIImageView *test = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 30, 30)];
   [test setAnimationImages:[NSArray arrayWithObjects:[UIImage imageNamed:@"bee-1"],    
   [UIImage imageNamed:@"bee-2"], nil]];
   [test startAnimating];
   

3. Set the UIImageView’s layer position and add the layer to the view’s layer:

   [test.layer setPosition:P(160,25)];
   [self.view.layer addSublayer:test.layer];
   

4. Create the CAKeyframeAnimation:

   CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@"position"];
   anim.path = trackPath.CGPath;
   anim.rotationMode = kCAAnimationRotateAuto;
   anim.repeatCount = HUGE_VALF;
   anim.duration = 8.0;
   [test.layer addAnimation:anim forKey:@"race"];