教程 | 用 Axure 制作具有动态效果的环形进度条

在进行原型制作的时候，经常会遇到这样一个交互：进度条。并且有时候进度条会自动“走动”到指定的位置，并且具有动态效果。

 

今天这个案例就是进度条。但是它是简单的进度条吗？NO！它是环形进度条，并且是具有动态效果的环形进度条。那么有些朋友会问说了，直线型的进度条我会做，但是环形的应该怎么做呢？

 

问得好。接下来我们就一起来看看。

 

首先看看效果是如何的。打开页面之后，进度条会从初始的位置慢慢“走动”到一个具体的位置，我们可以看到它“走动”的路径。

 

 

 

 

大家可以打开预览看看，直观感受它的效果是如何的。https://ptmqpq.axshare.com

 

 

一、搭建页面元素

 

诸如手机外壳之类的元素的搭建这里就不说了，不清楚的同学可以查看我们之前的文章，或者直接和我们交流。这里我们只看重点部分，也就是进度条的部分。

 

对于环形的图形，大家有没有概念要怎么做的？需要想到，我们可以利用圆形或者扇形或者二者结合使用。

 

这样一说相信