老规矩先看效果：

简单的步骤：

1、选择椭圆工具，新建一个圆形，不填充，描边16， 透明度15%，如下图：

2、用钢笔工具画箭头，分成2部分，一部分是那个三角箭头，一部分是箭头的垂直线，如下图：

3、将两个形状层的line cap都设置为round，给箭头和箭头直线做path动画，

让箭头变成一条直线，让垂直线变成一个小圆点（这一步也可以用trim path实现），如下图：

4、将 “半透明圆环” 复制一层 命名为 “运动的圆环”，将透明度改为100%，描边为6，

给其添加trim path, 添加关键帧，start从100-0，实现一个由远点变成圆环的效果。

5、双击矩形工具，新建一个矩形，命名为“波浪线”，高度设为6，跟上面用钢笔画的形状粗细保持一致。如下图：

6、给“波浪线”添加遮罩，让它的宽度跟三角变形后的直线保持一致，并给它添加ripple效果，如下图：

给它的center of ripple和wave height做关键帧动画，具体自己多尝试一下吧。 如上图所以，这个波浪线中间有个“疙瘩”，一时半会没想到解决办法，

如果你有好的办法可以解决这个问题，烦请告知。

7、添加文字效果，文字动画是用number做的， 给它做了 透明度、大小的动画效果。

8、将 步骤3 里的 直线，做path动画，让它变成一个“勾”。变形的时候注意多添加一些细节，让动画看起来更真实、舒服。

由于是文字教程、无法详细说明每一个步骤，大家多思考，即使不看教程也应该可以做出来。

这个教程没有特别难懂的知识点，就是一些基本的变形，trim path(修整路径)和一个ripple效果，所以就不提供源文件了。

大家多动手做做，不要只是收藏。 欢饮交流，感谢点赞，求粉。