CABasicAnimation byValue strange behavior - ios

Question

I was reading the 12th number of Objc.io and encountered a problem when trying the first pieces of code.
In the first part "A Basic Animation" the last piece of code uses byValue to interpolate a property using initial property value and adding byValue.
So I tried the code in my project and discovered it wasn't working and had a really strange behavior.
Here's a very short gif illustrating the problem :
And here's the only code I'm using :
class ViewController: UIViewController {
var rocket1: UIView!
var rocket2: UIView!
override func viewDidLoad() {
super.viewDidLoad()
rocket1 = UIView(frame: CGRect(x: 20, y: 100, width: 50, height: 20))
rocket1.backgroundColor = UIColor.redColor()
rocket2 = UIView(frame: CGRect(x: 20, y: 150, width: 50, height: 20))
rocket2.backgroundColor = UIColor.blueColor()
self.view.addSubview(rocket1)
self.view.addSubview(rocket2)
}
#IBAction func button() {
let animation = CABasicAnimation(keyPath: "position.x")
animation.byValue = 300
animation.duration = 1
rocket1.layer.addAnimation(animation, forKey: "basic")
rocket1.layer.position.x += 300
animation.beginTime = CACurrentMediaTime() + 0.5
rocket2.layer.addAnimation(animation, forKey: "basic")
rocket2.layer.position.x += 300
}
}
If you want to try the project here's the full project (use iPhone 6 simulator or shapes will be hidden because 5S is too "short") : https://dl.dropboxusercontent.com/u/378166/VCoreAnimation.zip

Answer 1

you should create a completion block for this animation like this:
#IBAction func button() {
let animation = CABasicAnimation(keyPath: "position.x")
animation.byValue = 300
animation.duration = 1
CATransaction.begin()
CATransaction.setCompletionBlock({
rocket1.layer.position.x += 300
})
rocket1.layer.addAnimation(animation, forKey: "basic")
CATransaction.commit()
animation.beginTime = CACurrentMediaTime() + 0.5
CATransaction.begin()
CATransaction.setCompletionBlock({
rocket2.layer.position.x += 300
})
rocket2.layer.addAnimation(animation, forKey: "basic")
CATransaction.commit()
}
In this case we need 2 CATransaction blocks since we have 2 animations running with a time diference from each other.