Axure如何制作排名动效图原型效果？

Question

如题所述

Answer 1

大家应该都见过排名表排行榜自动变化的效果，也就是谁的数值越大，谁就会往前排名！对于这样的一个动效效果，应该怎么使用Axure原型软件制作出来呢？下面就来教一教大家怎么操作哦~零基础小白想要自学Axure做产品原型，那么专业教学就可以事半功倍！选择的Axure自学视频课，就能够在最短的时间获取到最全面的Axure知识~感兴趣就就进~

Axure制作排名动效图原型效果方法：

1.自动轮播效果

2.点击选择效果

使用说明如下图填写“数据中继器”的表格即可。

第一行column1-10为标题，填写完之后，可以自动填写到下拉列表。

no列不需要修改

text为纵坐标，例如广东省、江苏省

column1-10，除了第一行外，其他填写数据即可。

另外，还有两个文本框需要填写：

“逻辑最大值”：即中继器表格数据里面的最大值。

“条形最大长度”：即条形最大值的宽度，案例中为600，用于运算各个数据的条形的长度。

制作方法（1）制作动态面板

材料10个text文本框，10个条形，10个number文本框制作下拉列表，按钮1-10组成组合按钮组，点击下拉列表是显示按钮组，点击按钮或空白地方隐藏按钮组。

（3）制作中继器

如下图所示制作中继器，只需要填写好表格即可，中继器只是做逻辑处理。

（4）中继器交互

每项加载时：

如果no=0，设置按钮1=item.column1；；按钮10=item.column10

如果no=1，设置text1=item.text；如果no=10，设置text10=item.text

（5）按钮的交互

点击按钮1时，设置number1=no1行的column1值；；number1=no10行的column1值。

设置条形1和text1的尺寸=number1*系数，系数=条形最大长度/逻辑最大值，动画为线性；

设置上下移动：这里需要对中继器进行排序（按column1的降序排列），排列之后，找到no1的index序号。例如如果no1的序号为1，证明他还是排在第一，no1的序号为2，证明已经跌到第二了。所以我们移动text1、条形1、text1的组合，这里注意要移动到绝对位置，x=0，y=(no1的序号-1)*组合的高度，记得动画也是线性。

其余案例同样思路完成。到这里恭喜你已经完成了点击选择的动态效果了。

（6）自动播放

这个其实很简单，鼠标单击按钮时，先等待动画时间结束，再触发点击下一个按钮，如此类推就可以了。

以上就是关于“Axure如何制作排名动效图原型效果？”的全部内容分享了，希望能够帮助到你~更多Axure技巧学习，尽在！Axure相关文章、Axure相关问答、Axure专业自学视频课都是你学习提升的好帮手~想要快速有效的学习掌握Axure，那么Axure视频课就真的千万不要错过了！专业讲师、全面知识点、从0到1逐渐掌握~下面为各位小伙伴推荐几套Axure相对热门的基础课：