The reason your animation doesn’t work as planned is due to the way you encoded and used Core Animation. The main animations are all GPUs. CA infact handles a couple of things very well to optimize the animation.
One element of this is the raw parallel processing power of modern graphics cards, and the other is that Core Animation can cache the contents of CALayer on the map so that your code does not need to be constantly redrawn. This, by the way, is part of the reason the iPhone UI is so incredibly fast on some relatively modest hardware. Core Animation can automatically use a multi-core Mac because the layer tree is displayed on a separate stream .
The last line is imp. CAs operate in a separate thread (and not in the main thread). Therefore, returning to your problem, you have 2 CA blocks, each of which is trying to animate the same transform.translation.y Both at the same time! How it works?
To solve this problem, either do -
- What someone suggested put a delay for the second animation, so that after the first animations, the second kicks only after the first completion.
- or try to make the whole animation in one block (again, as someone suggested).
I just wanted to emphasize the theory and reasoning about how Core Animation works. Hope this helps ...