Solution for layer animation flicker in IOS coreanimation _ios

An example of a core animation layer animation on the web is to move the cloud in view from left to right until it is moved out of the screen, then move the cloud to the left and then repeat the motion.

All animations are done on the layer, but there is a small problem, that is, the first time each cloud animation completes, will have a flicker in its original position, and then will move to the right end of the screen, and the subsequent motion animation does not have this problem:

Because of the low frame rate used to record GIF files, it is difficult to show this problem on the diagram above. However, when the actual app is running, each cloud flashes at the initial position and then runs the subsequent animation when it is first moved out of the screen. Why is that?

Because the layer animation differs from the animation on the view level, it does not actually modify any of the properties of the original view. In the animation of moving clouds, you seem to change the x-coordinate of the cloud to move it to the right, but in fact the original cloud ImageView is still in place, Only the CA creates a temporary drawing to move with its appearance, and the original cloud is temporarily hidden; Once the move animation completes, the temporary object is deleted and the original cloud appears at the initial position.

So why is it only the first time the animation flashes? Because after the first animation, I modified the x coordinates of the cloud view in the code, so the x coordinates of the clouds are the same as the layer animation, which will ensure that the subsequent animations will not "flash" on the Fromvalue.

Know the reason, the solution is very simple, I just before the first animation to change the x coordinates of the cloud to the specified position, while adjusting the value of Fromvalue to the original position can:

Func Animatecloud (layer:calayer) {let
 cloudspeed = 15.0/double (view.layer.frame.size.width) Let
 duration: Nstimeinterval = Double (view.layer.frame.size.width-layer.frame.origin.x) * Cloudspeed
 //Advance storage of cloud layer initial position 
 Let Fromvalue = layer.position
 //Set the final position of the cloud
 layer.position.x =-layer.bounds.width/2 let

 cloudmove = Cabasicanimation (keypath: "position.x")
 Cloudmove.fillmode = kcafillmodeforwards
 // Cloudmove.removedoncompletion = False
 cloudmove.duration = Duration
 //Set the initial position of the cloud
 Cloudmove.fromvalue = fromvalue.x
 Cloudmove.tovalue = self.view.bounds.size.width + layer.bounds.width/2
 cloudmove.delegate = Self
 cloudmove.setvalue ("Cloud", Forkey: "name")
 cloudmove.setvalue (layer, Forkey: "Layer")
 Layer.addanimation (Cloudmove, Forkey:nil)
 }

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.