Axure教程：制作超简单机械加载效果

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/15107.html

可以学到什么？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/15107.html

1. 循环动态面板的应用
2. 有关循环动画怎么处理
3. 自带元件库的使用

第一步：绘制文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/15107.html

在系统元件库里搜索“齿轮”。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/15107.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/15107.html

添加三个到画布，设置尺寸180*180，依次命名齿轮1、齿轮2、齿轮3，如图分布：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/15107.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/15107.html

第二步：制作动效文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/15107.html

创建一个动态面板，添加2个状态，命名“控制”。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/15107.html

新建交互【状态改变时】：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/15107.html

1. 旋转齿轮2顺时针经过360°，动画线性5000ms；
2. 旋转齿轮3逆时针经过360°，动画线性5000ms；
3. 旋转齿轮1逆时针经过360°，动画线性5000ms。

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/15107.html

然后需要驱动“控制”动态面板循环的交互，在什么都不选择的情况下，点击交互，页面载入时，设置“控制”动态面板下一项循环间隔5000ms。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/15107.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/15107.html

以上做的两个步骤即每隔5秒触发一次动态面板循环，动态面板循环一次，就转动齿轮一周，转动时间5秒。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/15107.html

第三步：效果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/15107.html

有没有感觉很舒服！！！用循环动态面板同样可以做出加载中省略号从一点到三点循环下去的效果，大家动动脑筋做做看吧！文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/15107.html