Фоновое изображение Viewcontroller с горизонтальной анимацией

Question

Я пытаюсь создать анимированное фоновое изображение для одного из моих контроллеров представления, где изображение прокручивается горизонтально слева направо, а затем повторяет, когда оно достигло конца изображения по горизонтали. Этот эффект чрезвычайно распространен в играх с SpriteKit, но нет четкой информации о том, как это сделать в стандартном контроллере представления с UIKit. Дополнительные очки, если вы можете сказать мне, как установить верхние пределы на изображение, чтобы в нижней части панели навигации, а не в верхней части контроллера вид :)

Вот изображение:

Answer 1

Используйте две копии изображение. Начните с одного изображения, полностью занимающего экран. Остальное - слева от него. Анимируйте вправо, чтобы вторая копия выталкивала первую копию с экрана. Когда анимация достигает конца, так что только одна копия полностью занимает экран, вернитесь к началу и повторите. Скачок не будет виден, потому что изображения идентичны, и скачок выполняется, когда они находятся в одинаковых положениях.

Приятно, что поведение, которое я только что описал, является значением по умолчанию для повторяющейся CABasicAnimation; он автоматически возвращается к началу в конце каждого повторения. Таким образом, я был в состоянии написать доказательство правильности концепции очень быстро (Swift 3, IOS 10):

let im = UIImage(named:"stuff")! 
    // create double image 
    let r = UIGraphicsImageRenderer(size: 
     CGSize(width:im.size.width*2,height:im.size.height)) 
    let im2 = r.image { _ in 
     im.draw(at: .zero) 
     im.draw(at: CGPoint(x: im.size.width, y: 0)) 
    } 
    // create layer to hold double image 
    let imlay = CALayer() 
    imlay.frame.size = im2.size 
    imlay.contents = im2.cgImage 
    // put it inside a single-image-sized container 
    let scroll = CALayer() 
    scroll.frame = CGRect(origin: .zero, size: im.size) 
    scroll.masksToBounds = true 
    scroll.addSublayer(imlay) 
    scroll.bounds.origin = CGPoint(x:im.size.width, y:0) 
    // put it in the interface 
    self.view.layer.addSublayer(scroll) 
    // animate 
    let anim = CABasicAnimation(keyPath: "bounds.origin") 
    anim.toValue = NSValue(cgPoint: .zero) 
    anim.duration = 10 
    anim.repeatCount = .infinity 
    scroll.add(anim, forKey: nil) 

Answer 2

You can achieve it by setting the `frame` of your `imageview` within an animation block like below: 


func animate(){ 
     imageView.frame.origin.x = 0 
     UIView.animateWithDuration(2, delay: 0.0, options: .CurveLinear, animations: {[unowned self]() -> Void in 

      self.imageView.frame.origin.x = self.view.frame.size.width 
      }) {[unowned self] (finsihed) -> Void in 
       self.animate() 
     } 

    }