Erstellen Sie ein kontinuierlich rotierendes Quadrat auf dem Bildschirm mit animateKeyframesWithDuration

Question

Ich habe versucht, den folgenden Code zu verwenden, um ein kontinuierlich rotierendes Quadrat auf dem Bildschirm zu erstellen. Aber ich weiß nicht, warum sich die Drehzahl ändert. Wie kann ich den Code ändern, um die Drehzahl invariabel zu machen? Ich habe verschiedene UIViewKeyframeAnimationOptions versucht, aber scheint keiner von ihnen zu arbeiten.

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

Das ist wirklich merkwürdig ... UIView.animateKeyframesWithDuration funktioniert nicht, wie ich es mit UIViewKeyframeAnimationOptions.CalculationModeLinear|UIViewKeyframeAnimationOpti‌​ons.Repeat mit Optionen bestanden erwarten würde.

Wenn Sie die Nicht-Block-Methode zum Erstellen einer Keyframe-Animation verwenden (siehe unten), wird die Drehung wie erwartet wiederholt.

Wenn ich herausfinden, warum die Block-basierte Option nicht funktioniert, werde ich versuchen, daran zu erinnern, die Antwort auch hier zu aktualisieren!

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

hinzufügen UIViewKeyframeAnimationOptionCalculationModeLinear Optionen Keyframe tun. Das Standardverhalten für UIView-Animationen besteht darin, die Animation zu vereinfachen. d.h., starte langsam, gehe auf Geschwindigkeit und bremse dann wieder kurz vor dem Ende ab.

Answer 3

ich konfrontiert vor demselben Problem, das ist, wie ich es funktioniert:

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

ich dieses Problem nur gab es heraus zuvor. Ich glaube nicht, dass es einen Doc gibt, aber es funktioniert einfach.

Answer 4

AFAIU, dies passiert, weil die Standardanimationskurve UIViewAnimationOption.CurveEaseInOut ist.

Leider hat UIViewKeyframeAnimationOptions keine Optionen zum Ändern der Kurve, aber Sie können sie manuell hinzufügen!

Mit dieser Erweiterung:

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) } 
} 

Jetzt können Sie Kurve Optionen in UIView.animateKeyframesWithDuration Methode

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