首先，感谢@Jaret的loading效果及FAB教程，这个动效的制作思路来源于此。

先看效果（pixate自带的录屏效果太渣，导成gif后速度也不太对，以源文件效果为准）：

这个带有下载过程及反馈的下载按钮是如今比较流行的，拆解其动效过程如下：

1. 点击按钮触发
2. 按钮向中间收起“变成”圆形进度环，并显示停止按钮
3. 进度环状走完360度
4. 环“填充”成实心圆形，出现对勾
5. 在走进度期间，点击停止按钮触发
6. 所有元素重置到初始状态

先准备图片素材透明png，我使用的是sketch处理，图片list：

1. btn-download 下载按钮的圆角矩形
2. text-download “download”的文字部分
3. ico-stop 停止按钮图标
4. ring-track 环状轨迹
5. loading-cover  半环的白色遮罩
6. ring-loading-l 左半环进度条
7. ring-loading-r 右半环进度条
8. ring-ok 实心圆形（这个图使用了2次）
9. tick 白色对勾

需要确保 1、4、5、6、7、8图片高度一样，并且4、5、6、7、8尺寸一样

点击按钮向中间收起圆形：

由于pixate只能贴图不能做矢量形变，所以是用障眼法。实现思路是是用最简的方式，圆角矩形scale变小，并淡出，露出后层的圆形。由于是等高的元素，scale只在x轴上进行，所以clip也可以省掉。

为了让缩放造成的残影变得自然，淡出与scale要有时间差，设置一个delay值。

接着考虑，需要把一个实心的圆角矩形过渡到空心环，所以在圆角矩形淡出后先露出实心圆形，再过渡到圆环，注意图层顺序。实心圆形在btn消失后开始淡出，需要delay的时间设置。

环状loading效果完全参考@jaret的“【Pixate初级教程】制作简单的Circle Progress动画效果”，各位可以去他的教程查看。环状loading完成后，把环“填充”成实心圆，然后显示对勾。

最后，需要实现在loading过程中点击停止按钮，重置所有元素的交互，因此针对所有进行过单向动画的图层，要逐一补充由btn_stop触发的逆向动画。注意，由于原本btn是在btn_stop图层之上的，因此在btn触发后续动画后，要用reorder把btn调整到后面去，然后在stop触发下再调回来。

这个动效需要计算一下各个效果之间的时间衔接。下图为动画模拟时间轴，表述了触发到完成的各图层时间，可以看到有很多delay需要设置。

所有图层顺序：

放上源文件供参考。