Animate UIImageView Diagonally

Question

I'd like to be able to animate my UIImageView background in a diagonal fashion. Meaning the background would animate and scroll from the top left of the screen towards the bottom right of the screen. Ideally, this would be a continuous animation.

I have the directions figured out, however, what I have seems to take a copy of the background & animate it over a static background. This causes for a weird effect.

See gif:

Here is the code:

var imageView = UIImageView()


override func viewDidLoad() {
    super.viewDidLoad()

    self.setup();


}

func setup() {


    self.imageView.frame = self.view.bounds
    self.imageView.image = UIImage(named: "myimage.jpg")
    self.view.addSubview(self.imageView)

    self.scroll()


}

func scroll() {

    var theImage = UIImage(named: "myimage.jpg")!
    var pattern = UIColor(patternImage: theImage)
    var layer = CALayer()

    layer.backgroundColor = pattern.CGColor

    layer.transform = CATransform3DMakeScale(1,-1,1)
    layer.anchorPoint = CGPointMake(0, 1)

    var viewSize = self.imageView.bounds.size
    layer.frame = CGRectMake(0,0, theImage.size.width + viewSize.width, viewSize.height)

    self.imageView.layer.addSublayer(layer)

    var startPoint = CGPointZero
    var endPoint = CGPointMake(theImage.size.width, theImage.size.height + 15)

    var animation = CABasicAnimation(keyPath: "position")
    animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
    animation.fromValue = NSValue(CGPoint:startPoint)
    animation.toValue = NSValue(CGPoint:endPoint)
    animation.repeatCount = Float.infinity
    animation.duration = 1.0


    layer.addAnimation(animation, forKey: "position")

}

Is anyone able to figure out how to make the whole background scroll? Do i just need a larger image, and scroll that? If that is the case, what does the contentMode of the imageView need to be set at?

Thanks

---- Update

I've reworked the code a bit, and have a working version of what I wanted. I'm curious for some feedback, as I'm still not 100% comfortable with animations in general (but i'm learning! :) )

-- I removed the whole background image in general, as DuncanC suggested it wasn't serving a good purpose. Now, i'm just making an image layer, trying to make if sufficiently big, and looping the animation. Thoughts?

override func viewDidLoad() {
    super.viewDidLoad()

    self.scroll()
}

func scroll() {

    var theImage = UIImage(named: "myimage.jpg")!
    var pattern = UIColor(patternImage: theImage)
    var layer = CALayer()
    layer.backgroundColor = pattern.CGColor

    layer.transform = CATransform3DMakeScale(1,-1,1)
    layer.anchorPoint = CGPointMake(0, 1)

    // i'm making the view large here so the animation can keep running smoothly without
    // showing what is behind our image
    // is there a better way to do this?
    var viewSize = CGSizeMake(self.view.bounds.size.height * 10, self.view.bounds.size.width * 10)
    layer.frame = CGRectMake(0,0, theImage.size.width + viewSize.width, viewSize.height)

    self.view.layer.addSublayer(layer)
    var startPoint = CGPointMake(-theImage.size.width, -theImage.size.height)
    var endPoint = CGPointMake(0, 0)

    var animation = CABasicAnimation(keyPath: "position")
    animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
    animation.fromValue = NSValue(CGPoint:startPoint)
    animation.toValue = NSValue(CGPoint:endPoint)
    animation.repeatCount = Float.infinity
    animation.duration = 3.0


    layer.addAnimation(animation, forKey: "position")        
}

**Result:*

Answer 1

Your code doesn't make a lot of sense. You have an image view that contains the image myimage.jpg, and then you create a CALayer that contains that image as a pattern color. You add the layer to your image view and animate it's position.

Just use a UIView animation and animate the center of your image view directly. If you're using AutoLayout then you'll need to add horizontal and vertical position constraints, wire them up as IBOutlets, and then in your animation block change the constraints and call layoutIfNeeded() on the image view's superview.