最近在做快手的高仿真原型，其中的录像按钮在很多具备录像功能的软件都有应用，因此尝试着用Axure实现了一下，效果如下。

其中环形进度条的基本实现原理可以参见文章https://www.pmyes.com/thread-35479.htm《利用动态面板实现环形进度条加载》,不过本文再此基础上更进一步，实现了进度条的启停控制，恢复初始状态设置等功能。

从图中可以看出，点击默认状态的按钮后，切换到录制状态，点击中间的启停按钮进行启停状态的切换，点击删除按钮后切换默认按钮，同时进度条状态恢复初始状态。因此：

1）用一个动态面板装载默认状态的按钮和录制状态按钮；

2）在录制状态中实现环形进度条，同时在中间用一个动态面板装载启动和停止两个状态的图标；

3）顶部一个标签用于实现事件提示，这里我们设置总时间为11.5s，初始状态为隐藏；

4）顶部一个删除按钮，初始状态为隐藏。

因此我们先把元素绘制出来：

1）左图的顶部时一个标签，默认值时0.0s，底部是一个按钮，中间是一个动态面板，在第一个状态中花两个圆，并设置底色作为默认按钮；

2）右边是面板的第二个状态，其中包含了环形进度条的左右半圆，就是两个动态面板（参见https://www.pmyes.com/thread-35479.htm《利用动态面板实现环形进度条加载》），其中左、右半圆的遮挡矩形需要设置圆角。

3）右图中间是作为底色的两个圆，最中间是一个启停按钮的动态面板，包含两个图标。

把上面右图中的元素组合起来：

首先我们先说一下环形进度条启停控制的原理，https://www.pmyes.com/thread-35479.htm《利用动态面板实现环形进度条加载中环形进度条》实现的进度条在载入以后就直接旋转左、右半圆的遮挡矩形，露出底部的圆的边沿，如果要进行启停控制，就要改为通过一个定时器定时去旋转左、右半圆的遮挡矩形，比如每个100ms去旋转3°，按下停止键的时候销毁定时器，启动的时候重设定时器，从而实现启停控制。具体就是：

1）我们在录制按钮中加入一个动态面板，新建两个空状态，作为定时器（参见https://www.pmyes.com/thread-35463.htm动态面板的基本使用），定时器每100ms改变一次状态（在后面进行设置），然后我们为其添加状态改变时的事件，去触发元件动作，这里我们假设的旋转360°需要11.5s，我们假设右半圆遮挡矩形旋转180°需要5.8s，左半圆矩形旋转180°需要5.7s，那么每间隔100ms

右半圆遮挡矩形需要旋转0.1s * 180°/5.8s，即（180/5.8）°

左半圆遮挡矩形需要旋转0.1s * 180°/5.7s，即（180/5.7）°。

同时在时间小于5.8s的时候只旋转右边的遮挡矩形，在时间大于等于5.8s，小于11.5s的时候旋转左边的遮挡矩形，时间为11.5s时，销毁定时器。

时间数值从前面隐藏的标签中获取，每次状态改变时，通过设置文本将标签中的数值累加0.1s，因为从标签中获取的字符串带有字符“s"，所以我们通过slice函数截取了字符"s"以前的数字进行运算。

旋转遮挡矩形的角度见上面的计算，时间为100ms，这样就可以看到线性的变化。

2）下面介绍触发和销毁定时器的设置

有两个地方需要触发定时器，点击默认按钮时，点击启停面板中的启动按钮时；

下图时默认按钮的设置，就是为定时器面板设置向后循环，间隔时间100ms，不勾选“收个状态延时100ms后切换”,这样设置定时器后可以立刻触发状态改变事件，启动进度条。

点击启停按钮中暂停图标时，销毁定时器，销毁设置非常简单，直接停止循环即可。

当然在启停按钮中还进了状态的切换和标签即删除按钮的隐藏和显示切换，这些时直接设置即可，不在赘述，可以参见附件。

最后要说的就是在停止状态，按下删除后，进度条的恢复问题，进度条的恢复其实就是把旋转了的左、右遮挡矩形再逆时针旋转回原来位置的过程：

同样，也要分条件进行，注意旋转的锚点和顺时针旋转是一样的：

1）当事件小于5.8s的时候，只需要旋转右半圆遮挡矩形，旋转角度应该为标签中记录的时间乘以180/5.8，标签中时间单位是s；

2）否则，右半圆遮挡矩形直接逆时针旋转180°，而左半圆遮挡矩形为标签记录时间减去5.8s以后乘以180/5.7；

3）只要按下删除按钮必须进行隐藏当前按钮、拍摄时间标签和切换按钮面板的操作。

通过上述设置可以将进度条恢复到初始状态。

最后，这里只讲解了核心的交互设置，其余设置可以参见附件中。

https://www.axureshop.com/shop/24308中有高保真的快手相机原型，欢迎查看。

https://www.axureshop.com/shop/24308中有一些综合实战案例，欢迎大家下载交流学习。