2014-12-26 17 views
20

In ViewController.Swift sono riuscito a creare una casella animata da un punto a un altro. Ho pensato che sarebbe stato facile eseguire il ciclo di looping in modo che il riquadro si animasse su un punto e quindi tornasse alla sua posizione originale e quindi eseguisse nuovamente il ciclo. Sono riuscito a spostare l'oggetto in una posizione e in "completo" spostarlo di nuovo, ma ciò non rende i loop. Come può essere realizzato?Animazione loop continuo UIView.animateWithDuration

ho pensato che forse questo potrebbe funzionare, ma io sinceramente non so:

let boxmoves = [CGRect(x: 120, y: 220, width: 100, height: 100), CGRect(x: 120, y: 120, width: 100, height: 100)] 
for boxmove in boxmoves { 
    coloredSquare.frame = boxmove 
} 

Come potrei centrarlo in base al dispositivo di larghezza (presumo ci sono alcuni matematica coinvolta?)?

Il mio codice:

let coloredSquare = UIView() 

coloredSquare.backgroundColor = UIColor.blueColor() 

coloredSquare.frame = CGRect(x: 120, y: 120, width: 100, height: 100) 

self.view.addSubview(coloredSquare) 

// found repeate but this will not animate as I want. 
//UIView.animateWithDuration(2.0, delay: 0.2, options: UIViewAnimationOptions.Repeat, animations: { 
UIView.animateWithDuration(2.0, animations: { 

    coloredSquare.frame = CGRect(x: 120, y: 220, width: 100, height: 100) 

    }, completion: { finished in 
     UIView.animateWithDuration(2.0, animations: { 
     coloredSquare.frame = CGRect(x: 120, y: 120, width: 100, height: 100) 
     }) 
}) 

risposta

66

Non c'è bisogno di fare l'approccio a blocchi di completamento, basta utilizzare l'argomento opzioni di animazione:

aggiornato per Swift 3,0

UIView.animate(withDuration: 2.0, delay: 0, options: [.repeat, .autoreverse], animations: { 

    coloredSquare.frame = CGRect(x: 120, y: 220, width: 100, height: 100) 

}, completion: nil) 

Se per qualsiasi motivo per cui vuoi interrompere l'animazione in un secondo momento, usa semplicemente:

coloredSquare.layer.removeAllAnimations() 
+0

Wow, è stato così facile. Grazie @Mazyod! Sai come centrarlo in base alla larghezza del dispositivo? –

+1

@JohanNdiyoLinnarsson Bene, dovresti rimuovere tutti quei valori codificati, ovviamente. Prova ad impostare la cornice con le dimensioni che desideri, quindi ad animare la proprietà 'coloredSquare.center', invece della cornice. Per centrarlo nella vista, prova 'coloredSquare.center = view.center', o meglio' coloredSquare.center = CGPoint (x: view.bounds.midX, y: view.bounds.midY) ' – Mazyod

+0

se non sei usando l'autolayout, dovresti anche impostare la proprietà 'autoresizingMask' su margini flessibili. – Mazyod