UIView.animateKeyFramesWithDuration animiert nicht reibungslos

Question

Ich versuche eine blinkende Animation zu schreiben, aber das Timing fühlt sich an. Ich habe eine einfache Version auf einem Spielplatz:

import UIKit 
import XCPlayground 
let v = UIView() 
v.frame.size = CGSize(width: 200, height: 200) 
v.backgroundColor = UIColor.redColor() 
v.layer.cornerRadius = 100 

UIView.animateKeyframesWithDuration(1, delay: 0, options: .Repeat, animations: { 
    UIView.addKeyframeWithRelativeStartTime(0, relativeDuration: 0.5, animations: { 
     v.alpha = 0.0 
    }) 
    UIView.addKeyframeWithRelativeStartTime(0.5, relativeDuration: 0.5, animations: { 
     v.alpha = 0.5 
    }) 
    }, completion: nil) 

XCPlaygroundPage.currentPage.liveView = v 

Die Ansicht von 0 bis 0,5 verblasst und dann erscheint für eine Sekunde bei voller Alpha stottern, bevor die Animation wieder aufzunehmen. Dasselbe habe ich im Simulator bemerkt.

Gibt es etwas, was mir fehlt, wie die Keyframes funktionieren sollen?

Answer 1

Nach Prüfung glaube ich, dass der Standard für Ihre v Ansicht alpha1.0 ist. Das bedeutet, dass die Animation nach dem Ende der Animation für einen Sekundenbruchteil wieder auf alpha zurückgesetzt wird und dann die Animation wiederholt wird. Um dies auszugleichen und den gewünschten Effekt zu erzielen, sollten Sie möglicherweise alpha auf 0.0 setzen, bevor Sie XCPlaygroundPage.currentPage.liveView = v ausführen.

Updates:

Sie können die Animation Code in 4 Staaten brechen.

1. Zu Beginn ist die alpha1.0.
2. Der erste Keyframe ändert die alpha zu 0.0 in 0,5 Sekunden.
3. Der zweite Keyframe ändert die alpha in 0,5 Sekunden in 0.5.
4. An diesem Punkt ist die Animation beendet. So kehrt die v Ansicht zum Zustand zurück und wiederholt dann Animation.

Staat ist, wo das Blinken der vollen alpha tritt auf, weil die v Ansicht 0.5-1.0 in 0.0 Sekunden geht. Allerdings kann der Computer nichts passieren in 0.0 Sekunden (nicht wirklich wegen der komplizierten Physik möglich), so dass das Ergebnis ist ein Sekundenbruchteil Flash von voller alpha als der Computer versucht, so nah wie möglich 0.0 Sekunden zu bekommen.

Um dies zu umgehen Sie entweder die ursprüngliche alpha-0.5 so auf diese Weise den Zustand der Animation einstellen wird das gleiche wie das Ergebnis seiner Zustand , oder Sie können einen anderen Keyframe sein, der die alpha zurück bringt zu 0.0 bevor die Animation ist über:

Beispiele:

Option 1:

//Import Statements 
//Configuration and Initialization of v view 

v.alpha = 0.5 //<--- This is the key point 

UIView.animateKeyframesWithDuration(1, delay: 0, options: .Repeat, animations: { 
    UIView.addKeyframeWithRelativeStartTime(0, relativeDuration: 0.5, animations: { 
     v.alpha = 0.0 
    }) 
    UIView.addKeyframeWithRelativeStartTime(0.5, relativeDuration: 0.5, animations: { 
     v.alpha = 0.5 
    }) 
}, completion: nil) 

XCPlaygroundPage.currentPage.liveView = v 

Option 2:

//Import Statements 
//Configuration and Initialization of v view 
v.alpha = 0.0 //<-- Make sure to set the original alpha to 0.0 

let duration: NSTimeInterval = 1.8 
let third: NSTimeInterval = 1/3 

UIView.animateKeyframesWithDuration(duration, delay: 0, options: .Repeat, animations: { 
    UIView.addKeyframeWithRelativeStartTime(0, relativeDuration: third, animations: { 
     v.alpha = 0.0 
    }) 
    UIView.addKeyframeWithRelativeStartTime(third, relativeDuration: third, animations: { 
     v.alpha = 0.5 
    }) 
    //Key Point Below. Added Another Frame! 
    UIView.addKeyframeWithRelativeStartTime(third*2, relativeDuration: third, animations: { 
     v.alpha = 0.0 
    }) 
}, completion: nil) 

XCPlaygroundPage.currentPage.liveView = v