Viewcontroller Hintergrundbild mit horizontaler Animation

Question

Ich versuche ein animiertes Hintergrundbild für einen meiner View-Controller zu erstellen, wo das Bild horizontal von links nach rechts scrollt und dann wiederholt wird, wenn es das Ende des Bildes horizontal erreicht hat. Dieser Effekt ist in Spielen mit SpriteKit extrem häufig, aber es gibt keine klaren Informationen darüber, wie man es in einem Standard-View-Controller mit UIKit macht. Extra-Punkte, wenn Sie mir sagen, wie die oberen Grenzen des Bildes auf der Unterseite des Navigationsleiste lieber als die Spitze des View-Controllers :)

Hier ist das Bild:

Answer 1

Verwenden Sie zwei Kopien das Bild. Beginnen Sie mit einem Bild, das den Bildschirm vollständig einnimmt. Der andere ist zu seiner Linken. Animiere nach rechts, so dass die zweite Kopie die erste Kopie vom Bildschirm verschiebt. Wenn die Animation das Ende erreicht hat, so dass nur eine Kopie den Bildschirm vollständig besetzt, springen Sie zurück zum Anfang und wiederholen Sie den Vorgang. Der Sprung ist nicht sichtbar, da die Bilder identisch sind und der Sprung ausgeführt wird, wenn sie sich in identischen Positionen befinden.

Die nette Sache ist, dass das Verhalten, das ich gerade beschrieben habe, der Standard für eine wiederholende CABasicAnimation ist; Es springt automatisch am Ende jeder Wiederholung zum Start zurück. So konnte ich eine Proof-of-Concept schreiben sehr schnell (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() 
     } 

    }