雪莉果的Axure原型工厂vol.002 加载动画（一）——旋转加载

微信公众号：雪莉果的Axure原型工厂

0.Axure的形状也是一门学问

我们经常需要给页面添加一个正在加载中的效果，可能是一个进度条，可能是一个旋转的圆圈；现在，先让我们看看下面这个例子。

两个像蝌蚪一样的图形在绕着中间的loading旋转，中间的loading还在不停的闪烁；通过上一节课，你可以已经想到了旋转和闪烁可以通过循环触发来实现，但是这个蝌蚪一样的图形呢，需要在网上照一张图么，或者找你的美工帮你画一个么？
当然，都不需要，你只需要了解在Axure中，形状是可以进行合并去除操作的，便可以画出各种奇怪的图形。

1.交互拆解

那么和上一课相同，我们还是将效果按步骤进行拆解：

1）载入页面后，显示出loading文字和外圈需要旋转的图形

2）Loading文字调整可见度到0，然后循环触发

3）图形按照顺时针旋转一周，然后循环触发

用流程图的形式进行展示，如下图：

那么，让我们按照步骤来实现。

2.交互设置步骤

1)首先创建所有需要的元件，背景和loading文字很简单便完成了，那么重点便是那两个蝌蚪一样的图形。
首先放两个原型组件，一个直径200，一个直径160，将圆心重叠

框选两个元件，右键，选择变换形状中的去除，你便可以得到一个圆环。

2)添加一个矩形元件，挡住圆环的右半，全选，再次使用形状中的去除，这一次得到了一个半圆环。


3)再添加一个矩形元件，挡住半圆环的下半，全选，再次使用形状中的去除，这一次得到了一个平头蝌蚪型。


4)在头部中间添加一个点，拖出一个角，再右键修改为曲线，便得到我们所需要的蝌蚪形状了。

5)然后我们就可以调整样式，将元件的宽度再调整到100，设置填充为线性，选择合适的颜色，再去除边框。

6)然后我们便可以给这个元件设置交互，在载入时进行旋转，顺时针360度，线性且时间为3000毫秒，并且将锚点改到右下角；再等待3000毫秒后进行循环触发。


7)然后我们复制这个元件，进行水平和垂直翻转，将复制后的元件的交互中，旋转的锚点改为左上，调整元件的位置，让蝌蚪一号的右下角和二号的左上角重叠。

8)然后添加loading的文字，并且加入闪烁的效果。

9)添加一个背景，这个加载动画便完成了。

3.一些说在最后的话

你总是要会一些不属于你职位的技能。

微信公众号：雪莉果的Axure原型工厂