Interrupt UIView transition - ios

Question

Is there any possibility to interrupt a UIView.transition at its current state on iOS?
To give you a bit of context: I have a UIButton where I need to animate the title color - the animation can have different delays attached to it, though. Since UIView.transition does not support delays, I simply delayed execution of the entire block:
DispatchQueue.main.asyncAfter(deadline: .now() + delay) {
UIView.transition(with: button, duration: 0.4, options: [.beginFromCurrentState, .allowUserInteraction, .transitionCrossDissolve], animations: {
button.setTitleColor(selected ? .red : .black, for: .normal)
}, completion: nil)
}
The issue here is that, if this code is executed in quick succession with different delays, the outcome can be unexpected. So for example this could be called with selected=true, delay=0.5 and immediately after that with selected=false, delay=0.0. In this scenario, the button would end up red even though it should be black.
Therefore, I am looking for a method to either have UIView.transform with a delay, interrupt a UIView.transform or make setTitleColor() animatable through UIView.animate.

Answer 1

I actually created a framework to do this specifically, you can trigger animations relative to time progress, or value interpolation progress. Framework and documentation can be found here:
https://github.com/AntonTheDev/FlightAnimator
The following examples assume you a CATextLayer backed view, as this is not a question about how to set that up, here is a small example to get you started:
class CircleProgressView: UIView {
.....
override class func layerClass() -> AnyClass {
return CircleProgressLayer.self
}
}
Example 1:
Assuming you have a CATextLayer backed view, we can animate the it's foreground color as follows, and trigger another animation relative to time:
var midPointColor = UIColor.orange.cgColor
var finalColor = UIColor.orange.cgColor
var keyPath = "foregroundColor"
textView.animate { [unowned self] (a) in
a.value(midPointColor, forKeyPath : keyPath).duration(1.0).easing(.OutCubic)
// This will trigger the interruption
// at 0.5 seconds into the animation
animator.triggerOnProgress(0.5, onView: self.textView, animator: { (a) in
a.value(finalColor, forKeyPath : keyPath).duration(1.0).easing(.OutCubic)
})
}
Example 2:
Just as in the prior example, once you have a CATextLayer backed view, we can animate it's foregroundColor relative to the progress matrix of the RBG values, calculated based on the magnitude progress of the 3 values:
var midPointColor = UIColor.orange.cgColor
var finalColor = UIColor.orange.cgColor
var keyPath = "foregroundColor"
textView.animate { [unowned self] (a) in
a.value(midPointColor, forKeyPath : keyPath).duration(1.0).easing(.OutCubic)
// This will trigger the interruption
// when the magnitude of the starting point
// is equal to 0.5 relative to the final point
a.triggerOnValueProgress(0.5, onView: self.textView, animator: { (a) in
a.value(finalColor, forKeyPath : keyPath).duration(1.0).easing(.OutCubic)
})
}
Hope this helps :)