Change image after UIImageView had started/completed animation

Question

I need my image view to change its .image at the beginning and end of each animation.

This is the animation:

- (void)performLeft{

    CGPoint point0 = imView.layer.position;
    CGPoint point1 = { point0.x - 4, point0.y };

    CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"position.x"];
    anim.fromValue    = @(point0.x);
    anim.toValue  = @(point1.x);
    anim.duration   = 0.2f;
    anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

    // First we update the model layer's property.
    imView.layer.position = point1;
    // Now we attach the animation.
    [imView.layer  addAnimation:anim forKey:@"position.x"];
}

I know that I could call...

[anim animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)];

But I don't know how I could use an animation to change the image of imView? So how do I use an animation to change the .image of my image view?

Thank you!

Answer 1

The short answer is that you can't use Core Animation to change the image of an image view. Core Animation operates on layers, not views. Further, Core Animation only creates the appearance of changes. The underlying layers don't actually change at all.

I would suggest using UIView animation instead of CAAnimation objects. Then you could use your completion method to change the image.

UIImage animation is easier to do, and it DOES change the properties of the images that you are animating.

UIImage animation based code would look something like this:

- (void)performLeft
{
  CGFloat center = imView.center;
  center.x = center.x - 4;
  imView.image = startingImage;  //Set your stating image before animation begins
  [UIView animateWithDuration: 0.2
  delay: 0.0
  options: UIViewAnimationOptionCurveEaseIn
  animations: 
  ^{
     imView.center = center;
  }
  completion:
  ^{
  imView.image = endingImage;  //Set the ending image once the animation completes
  }
  ];
}