UIView.animateKeyFramesWithDuration not animating smoothly - swift

Question

I am trying to write a blinking animation, but the timing of it feels off. I made a simple version in a playground:
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
The view fades from 0 to 0.5 and then appears to stutter at full alpha for a second before resuming the animation. I noticed the same thing in the simulator.
Is there something I am missing about how the keyframes are supposed to work?

Answer 1

Upon inspection, I believe the default for your v view's alpha is 1.0. This means that after your animation ends for a split second it is at full alpha again, and then the animation is repeated. To compensate for this and acquire the effect you want, you may consider setting its alpha to 0.0 before you run XCPlaygroundPage.currentPage.liveView = v.
Updates:
You can break the animation your code into 4 states.
At the start, the alpha is 1.0.
The first keyframe changes the alpha to 0.0 in 0.5 seconds.
The second keyframe changes the alpha to 0.5 in 0.5 seconds.
At this point, the animation has ended. So the v view reverts to state 1 and repeats then animation.
State 4 is where the blink of full alpha occurs because the v view is going from 0.5 to 1.0 in 0.0 seconds. However, the computer cannot make anything happen in 0.0 seconds (not actually possible because of complicated physics) so the result is a split second flash of full alpha as the computer tries to get as close to 0.0 seconds as it can.
To circumvent this you can either set the original alpha to 0.5 so that way the animation's state 1 will be the same as the result of its state 3, or you can add another keyframe that brings the alpha back to 0.0 before the animation is over:
Examples:
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