Creare un quadrato a rotazione continua sullo schermo utilizzando animateKeyframesWithDuration

Question

Ho provato a utilizzare il codice seguente per creare un quadrato a rotazione continua sullo schermo. Ma non so perché la velocità di rotazione sta cambiando. Come posso cambiare il codice per rendere invariabile la velocità di rotazione? Ho provato diversi UIViewKeyframeAnimationOptions, ma sembra che nessuno di loro funzioni.

override func viewDidLoad() { 
    super.viewDidLoad() 

    let square = UIView() 
    square.frame = CGRect(x: 55, y: 300, width: 40, height: 40) 
    square.backgroundColor = UIColor.redColor() 
    self.view.addSubview(square) 

    let duration = 1.0 
    let delay = 0.0 
    let options = UIViewKeyframeAnimationOptions.Repeat 
     UIView.animateKeyframesWithDuration(duration, delay: delay, options: options, animations: { 
     let fullRotation = CGFloat(M_PI * 2) 

     UIView.addKeyframeWithRelativeStartTime(0, relativeDuration: 1/3, animations: { 
      square.transform = CGAffineTransformMakeRotation(1/3 * fullRotation) 
     })       
     UIView.addKeyframeWithRelativeStartTime(1/3, relativeDuration: 1/3, animations: { 
      square.transform = CGAffineTransformMakeRotation(2/3 * fullRotation) 
     })       
     UIView.addKeyframeWithRelativeStartTime(2/3, relativeDuration: 1/3, animations: { 
      square.transform = CGAffineTransformMakeRotation(3/3 * fullRotation) 
     }) 
     }, completion: {finished in 
     }) 
    }   

Answer 1

Questo è davvero strano ... UIView.animateKeyframesWithDuration non funziona come mi aspetterei che con UIViewKeyframeAnimationOptions.CalculationModeLinear|UIViewKeyframeAnimationOpti‌​ons.Repeat passato con le opzioni.

Se si utilizza il metodo non blocco per la creazione di un'animazione di fotogrammi chiave (vedere di seguito), la rotazione si ripete come previsto.

Se scopro perché l'opzione basata su blocchi non funziona, cercherò di ricordare di aggiornare anche qui la risposta!

override func viewDidLoad() { 
    super.viewDidLoad() 


    let square = UIView() 
    square.frame = CGRect(x: 55, y: 300, width: 40, height: 40) 
    square.backgroundColor = UIColor.redColor() 
    self.view.addSubview(square) 

    let fullRotation = CGFloat(M_PI * 2) 

    let animation = CAKeyframeAnimation() 
    animation.keyPath = "transform.rotation.z" 
    animation.duration = 2 
    animation.removedOnCompletion = false 
    animation.fillMode = kCAFillModeForwards 
    animation.repeatCount = Float.infinity 
    animation.values = [fullRotation/4, fullRotation/2, fullRotation*3/4, fullRotation] 

    square.layer.addAnimation(animation, forKey: "rotate") 

} 

Answer 2

Aggiungi UIViewKeyframeAnimationOptionCalculationModeLinear inserisci le tue opzioni di fotogramma chiave. Il comportamento predefinito per le animazioni di UIView è di "facilitare l'entrata/uscita" dell'animazione. Ad esempio, iniziare lentamente, andare fino alla velocità, quindi rallentare di nuovo appena verso la fine.

Answer 3

Ho affrontato lo stesso problema prima, questo è come faccio funzionare:

let raw = UIViewKeyframeAnimationOptions.Repeat.rawValue | UIViewAnimationOptions.CurveLinear.rawValue 
let options = UIViewKeyframeAnimationOptions(rawValue: raw) 

ho pensato che questo problema poco prima ha dato in su. Non penso che ci sia un documento a riguardo, ma funziona.

Answer 4

AFAIU, questo sta accadendo perché la curva di animazione predefinita è UIViewAnimationOption.CurveEaseInOut.

Sfortunatamente, UIViewKeyframeAnimationOptions non ha opzioni per cambiare la curva, ma è possibile aggiungerli manualmente!

utilizzare questa estensione:

extension UIViewKeyframeAnimationOptions { 
    static var CurveEaseInOut: UIViewKeyframeAnimationOptions { return UIViewKeyframeAnimationOptions(rawValue: UIViewAnimationOptions.CurveEaseInOut.rawValue) } 
    static var CurveEaseIn: UIViewKeyframeAnimationOptions { return UIViewKeyframeAnimationOptions(rawValue: UIViewAnimationOptions.CurveEaseIn.rawValue) } 
    static var CurveEaseOut: UIViewKeyframeAnimationOptions { return UIViewKeyframeAnimationOptions(rawValue: UIViewAnimationOptions.CurveEaseOut.rawValue) } 
    static var CurveLinear: UIViewKeyframeAnimationOptions { return UIViewKeyframeAnimationOptions(rawValue: UIViewAnimationOptions.CurveLinear.rawValue) } 
} 

Ora è possibile utilizzare le opzioni di curve in UIView.animateKeyframesWithDuration metodo

let keyframeOptions: UIViewKeyframeAnimationOptions = [.Repeat, .CurveLinear] 
UIView.animateKeyframesWithDuration(duration, delay: delay, options: keyframeOptions, animations: { 
    // add key frames here 
}, completion: nil)