Scrolling the array of images using the CABasicAnimation

Question

I have to scroll the images one by one. THe following are the code which i am using

_imageView is UIImageView and imagesArray is the NSArray with array of objects.

   _imageView.animationImages=imagesArray;
   _imageView.animationDuration=10;
    [_imageView startAnimating];
     
    CABasicAnimation *scrollText;
    scrollText=[CABasicAnimation animationWithKeyPath:@"position.x"];
    scrollText.duration = 10.0;
    scrollText.speed= 3; 
    scrollText.repeatCount = 0;
    scrollText.autoreverses = NO;
    
    scrollText.fromValue = [NSNumber numberWithFloat:500];
    scrollText.toValue = [NSNumber numberWithFloat:-200.0];
    
    [[_imageView layer] addAnimation:scrollText forKey:@"scrollTextKey"];

I can see that images are scrolling and it is changing one by one. But these images are changing irrespectively. I want to change the image one by one when it leaves the frame/Screen. Can any one suggest some idea ?

Answer 1

I'm not quite sure what you are asking. I think you're saying that you want to create an animation where a series of images start at the bottom of the screen and animate up to the top, and off the screen.

To do that, you'd probably want to create an animation that animates an image from off-screen on the bottom to off-screen on the top, and then loop that animation several times with different images. Something like this.

Define an instance variable imageNumber. Set it to zero and call animateImage (below) to start the animation.

The code might look something like this:

-(void) animateImage;
{
  _imageView.image = [imagesArray objectAtIndex: imageNumber];
  CGPoint imageCenter = _imageView.center;
  imageCenter.y = 500;
  _imageView.center  = imageCenter;
  [UIView animateWithDuration: 10
    delay: 0.0
    options: UIViewAnimationOptionCurveLinear
    animations: 
    ^{
       CGPoint newImageCenter = _imageView.center;
       newImageCenter.y = -200;
       _imageView.center  = imageCenter;
    completion:
    ^{
      imageNumber++;
      if (imageNumber < [imagesArray count])
        [self animateImage];
    }
  ];
}