![](https://i-blog.csdnimg.cn/img_convert/5dd4449674c663dcc13dcaecb929d322.gif)
大家好,我是大明同学。
这期内容,我们来用Axure制作一组动效。
![](https://i-blog.csdnimg.cn/img_convert/2812e9187e69ad3817cf31c65a4cb6ef.gif)
动效
创建动效元件
1.打开一个新的 RP 文件并在画布上打开 Page 1。
2.选中画布,将画布填充颜色设置为蓝色(#0052D9)。
![](https://i-blog.csdnimg.cn/img_convert/d15e3cf7783bb87fcd47ba83b558dc1f.png)
3.在元件库中拖出一个圆形元件,选中矩形元件,样式窗格中,将圆形元件宽高值设为20,线宽设置为0。
![](https://i-blog.csdnimg.cn/img_convert/7b9689e7cc5103545875fde0d0d63b39.png)
创建交互
创建圆形交互状态
1.选中圆形元件,在交互窗格中点击新建交互,载入时,显示 当前 等待800毫秒,隐藏 当前 等待 200毫秒,触发事件 当前 载入时。
![](https://i-blog.csdnimg.cn/img_convert/b6a7b4d42045302f903ff7aaa0589ec3.png)
2.添加动作 显示时,设置尺寸 当前 宽高 100 锚点居中 线性 600 毫秒,设置不透明度 当前 20% 线性 600毫秒。
![](https://i-blog.csdnimg.cn/img_convert/3b795db1793dcc3f32803e32b8e83fa7.png)
3.添加动作 隐藏,设置尺寸 当前 宽高 20 锚点居中 线性 600 毫秒,设置不透明度 当前 100% 。
![](https://i-blog.csdnimg.cn/img_convert/2e13922f5cc2a6255217435cebd5a6e9.png)
4.选中圆形元件设置为隐藏。
![](https://i-blog.csdnimg.cn/img_convert/fd19f78570252006ac6fb666edac1147.png)
预览交互
点击预览,预览效果。
![](https://i-blog.csdnimg.cn/img_convert/6a74ea5692c9281e01414f0cbeb01e44.gif)
动效
创建动效元件
1.复制三个前面做好的圆形动效元件粘贴到画布上。
![](https://i-blog.csdnimg.cn/img_convert/4d9b8323a8b7e4d56c379cb646d4b849.png)
2.选中三个复制的圆形动效元件,先选择顶部对齐,在选择居中对齐,右键组合元件。
![](https://i-blog.csdnimg.cn/img_convert/2d80f3e2069be22f660aa0b6fe342cbb.png)
创建交互
创建圆形交互状态
1.在概要窗格中,选中第一个圆形动效,在交互窗格,载入时,添加等待 400毫秒。
![](https://i-blog.csdnimg.cn/img_convert/59cc967d2d96a6603f78cdbe7ee6fa2c.png)
2.在概要窗格中,选中第二个圆形动效,在交互窗格,载入时,添加等待 200毫秒,显示等待 800毫秒 改为 等待 1000毫秒。
![](https://i-blog.csdnimg.cn/img_convert/76d1b54e2cce32a6bb6b809f25ea69ef.png)
3.在概要窗格中,选中第三个圆形动效,在交互窗格,载入时,显示等待 800毫秒 改为 等待 1200毫秒。
![](https://i-blog.csdnimg.cn/img_convert/b4f60cf10e68be25c172b79d8a083037.png)
预览交互
点击预览,预览效果。
![](https://i-blog.csdnimg.cn/img_convert/a79a380dfb98ee77877236892fa1f840.gif)
动效
创建动效元件
1.在元件库中拖出一个圆形元件,选中矩形元件,样式窗格中,将圆形元件宽高值设为200,填充色设为透明,线宽设置为1,线宽颜色为白色。
![](https://i-blog.csdnimg.cn/img_convert/58c8eee09437eac1e3b1a182aa6fe355.png)
2.在元件库中拖出一个圆形元件,选中矩形元件,样式窗格中,将圆形元件宽高值设为21,线宽设置为0。
![](https://i-blog.csdnimg.cn/img_convert/407324094a2164d0559cb781e8cf3a0f.png)
3.选中空心和实心圆形元件,顶部对齐,选中实心圆形元件,将y轴值改为 223,并右键组合。
![](https://i-blog.csdnimg.cn/img_convert/a7f46271740df5d5df98b403e69f97f2.png)
创建交互
创建实心圆形交互状态
1.选中实心圆形元件,在交互窗格中点击新建交互,载入时,旋转 当前 经过 360° 缓进缓出 2000毫秒 偏移进过(0,100)锚点居中。
![](https://i-blog.csdnimg.cn/img_convert/2639023ce1addaee940f9608f6f9a27a.png)
2.添加动作 等待 2000毫秒。
![](https://i-blog.csdnimg.cn/img_convert/a2a209f4beba7baf220f24b682ccd0d5.png)
3.添加动作 触发事件 当前 载入时。
![](https://i-blog.csdnimg.cn/img_convert/e32e7d1dbce56175776ee39b2b2de2f5.png)
预览交互
点击预览,预览效果。
![](https://i-blog.csdnimg.cn/img_convert/fb82e833095876c2349f1420ef5955d8.gif)
动效
创建动效元件
1.在元件库中拖出一个圆形元件,选中矩形元件,样式窗格中,将圆形元件宽高值设为25,线宽设置为0。
![](https://i-blog.csdnimg.cn/img_convert/477584e51cc5a00763062373ec0837e2.png)
创建交互
创建实心圆形交互状态
1.选中实心圆形元件,在交互窗格中点击新建交互,载入时,移动 当前 经过(0,-100)缓慢退出 200毫秒。
![](https://i-blog.csdnimg.cn/img_convert/0f75db2ec30bce34b1d6e93f148a5a0f.png)
2.添加动作 移动 当前 经过(0,100)缓慢进入 200毫秒。
![](https://i-blog.csdnimg.cn/img_convert/2fa099b5afaa3e6ad7c669c24602eaf8.png)
3.添加动作 等待 1600 毫秒。
![](https://i-blog.csdnimg.cn/img_convert/02ce1797e9ae6ec58a69117675fcdef4.png)
4.添加动作 触发事件 当前 载入时 。
![](https://i-blog.csdnimg.cn/img_convert/07d79b3e580143ecde134318f942a4a4.png)
5.复制三个动效圆形元件 。
![](https://i-blog.csdnimg.cn/img_convert/6b32859d326cc8f3dab0313a125fcbe8.png)
6.选中 四个动效圆形元件,顶部对齐,水平分布,右键组合。
![](https://i-blog.csdnimg.cn/img_convert/ae03e792ff87be4ae30c97cbcd62fd68.png)
7.在概要窗格中选中第一个动效圆形元件,在交互窗格中,载入时,添加等待 1200毫秒, 等待 1600毫秒 改为 400毫秒 。
![](https://i-blog.csdnimg.cn/img_convert/c5acdf2dab38d0e1a5be94a87357c1ca.png)
8.在概要窗格中选中第二个动效圆形元件,在交互窗格中,载入时,添加等待 800毫秒, 等待 1600毫秒 改为 800毫秒 。
![](https://i-blog.csdnimg.cn/img_convert/2e8c90e34164bfa378ffcd5809813b46.png)
9.在概要窗格中选中第二个动效圆形元件,在交互窗格中,载入时,添加等待 400毫秒, 等待 1600毫秒 改为 1200毫秒 。
![](https://i-blog.csdnimg.cn/img_convert/542d8afa96f67a8399b7ae9f8fd5f1c7.png)
预览交互
点击预览,预览效果。
![](https://i-blog.csdnimg.cn/img_convert/8f64376bda237537dd9f87de60401153.gif)
动效
创建动效元件
1.在元件库中拖出一个圆形元件,选中矩形元件,样式窗格中,将圆形元件宽高值设为25,线宽设置为0。
![](https://i-blog.csdnimg.cn/img_convert/40776761f126b49953eea5ab96c1d1c0.png)
创建交互
创建实心圆形交互状态
1.选中实心圆形元件,在交互窗格中点击新建交互,载入时,设置尺寸 宽高值为50 锚点居中 线性 500毫秒。
![](https://i-blog.csdnimg.cn/img_convert/e211f68dbb00615e72880482e794a3ba.png)
2.添加交互,设置尺寸 宽高值为25 锚点居中 线性 500毫秒。
![](https://i-blog.csdnimg.cn/img_convert/50c3fcdd0e6213549cef8ef808b9fbbd.png)
3.添加动作 等待 1500毫秒。
![](https://i-blog.csdnimg.cn/img_convert/efa103d777907525c94dd9fe56011eb4.png)
4.添加动作 触发事件 当前 载入时 。
![](https://i-blog.csdnimg.cn/img_convert/57abf607d709b776bd75120bed65a951.png)
5.复制两个动态圆形元件。
![](https://i-blog.csdnimg.cn/img_convert/fd74d6ccf911b19a3f3078198520c285.png)
6.选中三个动态圆形元件 顶部对齐 水平分布 右键组合 。
![](https://i-blog.csdnimg.cn/img_convert/b78101ff5ed6966ea56eaed82b3e2435.png)
7.在概要窗格中选中第一个动效圆形元件,在交互窗格中,载入时,添加等待 1000毫秒, 等待 1500毫秒 改为 500毫秒 。
![](https://i-blog.csdnimg.cn/img_convert/1f8f327db2295fcd37f3256c62d5592c.png)
8.在概要窗格中选中第二个动效圆形元件,在交互窗格中,载入时,添加等待 500毫秒, 等待 1500毫秒 改为 100毫秒 。
![](https://i-blog.csdnimg.cn/img_convert/9e45f4d67be23690b38ec2f8124aae65.png)
预览交互
点击预览,预览效果。
![](https://i-blog.csdnimg.cn/img_convert/13b57e9175bc2a0623b87aa581030993.gif)
预览地址: https://ujs7ug.axshare.com
好的,这期内容到这里就结束。
我是大明同学。
下期见。