Cause and solution of the flicker of layer animation in Coreanimation

Panda Pig • Patty original or translated works. Welcome reprint, Reprint please indicate the source.
If you feel that the writing is not good please more advice, if you feel good please support a lot of praise. Thank you! Hopy;)

An example of a core animation layer animation on the web is moving the clouds from left to right in the view until you move out of the screen, then move the cloud to the leftmost end and then repeat the animation.

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

Because the frame rate used when recording a GIF file is low, it is more difficult to demonstrate this problem. But when the app runs, each cloud flashes at its initial position when it first moves out of the screen and then runs the subsequent animation. Why is that?

Because the layer animation differs from the animation on the view plane, it does not actually modify any of the properties of the original view. In the case of the animated motion of the cloud, you seem to have changed the x-coordinate of the cloud to move it to the right, but actually the original cloud ImageView is still there. But the CA uses its appearance to create a temporary drawing to move, the original cloud is temporarily hidden; Once the move animation is complete, the temporary object is deleted and the original cloud appears in its original position.

So why is the animation only flashing the first time? Because at the end of the first animation, I modified the x-coordinate of the cloud view in the code, so the x-coordinates of the clouds are the same as the fromvalue of the layer animation, which guarantees that the subsequent animations will not "blink"

Know the reason, the solution is very simple, I just before the first animation to change the x-coordinate of the cloud to the specified position, while adjusting the value of the fromvalue to the initial position:

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//Pre-store cloud layer's initial position let Fromvalue = Layer. PositionSet the final position layer of the cloud. Position. x=-layer. Bounds. Width/2Let Cloudmove = Cabasicanimation (keypath:"Position.x") Cloudmove. Fillmode= Kcafillmodeforwards//cloudmove. Removedoncompletion= False Cloudmove. Duration= Duration//Set the initial position of the cloud Cloudmove. Fromvalue= Fromvalue. xCloudmove. Tovalue= Self. View. Bounds. Size. Width+ Layer. Bounds. Width/2Cloudmove. Delegate= Self Cloudmove. SetValue("Cloud", Forkey:"Name") Cloudmove. SetValue(Layer, Forkey:"Layer") layer. Addanimation(Cloudmove, Forkey:nil)}

Cause and solution of the flicker of layer animation in Coreanimation