I am trying to animate something to the below effect:

Any suggestions on achieving my intended result would be greatly appreciated. Thanks in advance.

CodePudding user response：

Your shape layer’s “base state” is to have a line drawn.

You create an animation that animates strokeStart and strokeEnd, but after the animation ends, it is removed, and your layer returns to it’s base state.

Add code to set strokeEnd to 0 before you submit your animations. That will set the “base state” to not showing a line, which is what you want.