How to create a side scroller effect with images?

Question

I want to add some images (clouds) in the backgrounds of my app and create a effect of endless side scroller with them. That them keep popping from the left and keep going to the right.

I tried to implement that way:

class AnimateClouds: UIImageView {
    override init(frame: CGRect) {
        super.init(frame: frame)
    }
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        animateClouds()
    }


    func animateClouds() {
        UIView.animateWithDuration(0, delay:0, options: [.Repeat], animations: {
            self.center.x = self.center.x

            }) { (completed) -> Void in
                UIView.animateWithDuration(50, delay: 0, options: [.Repeat, .Autoreverse], animations: { () -> Void in

                    // self.center.x = self.center.x - (self.superview?.frame.size.width)! / 3

                    self.center.x = self.center.x + (self.superview?.frame.size.width)! //+ (self.frame.size.width) * 2
                    }, completion: { animationFinished in

                        self.removeFromSuperview()


                })
        }
    }
}

But I don't think that look good, and besides, I have to create a lot of clouds images in my storyboard and change their custom class. What's the better way to do that? I'm not making this app in Sprite Kit.

Answer 1

Ok you want to move the cloud images left to right endlessly. When you want to have such animation, it is easy to write animation but making the animation look smooth and visually great is the thing that really matters.

So you're saying there are multiple cloud images in your story board, which means that all of these cloud images will be appearing at different position (origin) of the screen, this means when they travel from left to right, the duration required to travel from origin to right most end of the screen is different for each of the cloud images.

So not only the code to animate the cloud images matter, the duration of the animation matters as well. So you need to calculate the duration carefully and animate the cloud image for that amount of duration.

So that's lotta theory lets see a code snippet which achieves the desired animation effect.

func animateCloud(cloud: UIImageView) {
//Assuming the cloud image will take 60 seconds to travel from
//left most point to the right most point of view controller's view
//and determining the speed at cloud travels
let cloudSpeed = 60.0/view.frame.size.width

//Since each cloud images are at different position (origin)
//The distance from each cloud to right end of screen will be different and
//The time taken (duration) by the each cloud to travel to right end of view will be different
let duration = (view.frame.size.width - cloud.frame.size.width) * cloudSpeed

UIView.animateiWithDuration(NSTimeInterval(duration), delay:0.0, options:.CurveLinear, animations: {
    cloud.frame.origin.x = self.view.frame.width
}, completion: {
      cloud.frame.origin.x = -cloud.frame.size.width
      self.animateCloud(cloud) // For endless animation
})
}

This should do the trick. You can add as many images you want and then call the animateCloud() method to animate the cloud images.