雪莉果的Axure原型工厂vol.007 循环触发的应用（二）——模拟股票走势

0.最近有一个这样的话题

先看下面一个示例：

这是一个模拟股市走势图的原型，点击开始后，数据会随机进行上涨和下跌（什么，你说股市并不是随机的？），点击重置可以清空数据，每次点击开始，都能走出不一样的走势图。有些经验的产品肯定知道，使用中继器便可以画出这样的图，但是该怎么做出这种一点一点变化的动画呢？
第一课的时候我们不就讲过循环触发么，这个时候就刚好用上。
当然，为何这一课放在了循环触发应用而不是中继器应用，我上一课也说了，需要让中继器休息休息。

1.交互拆解

和之前一样，为了更好的理解这个原型做了什么，我们将交互进行拆解。

1）初始状态，没有数据，可是按钮可用，重置按钮不可用

2）点击开始，按钮变为不可用状态，走势图开始自动新增

3）当走势图走到最右侧，不再新增数据，显示上涨或下跌具体的点数，重置按钮启用

4）点击重置按钮，数据清空，文本清空，开始按钮启用

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

接着，我们就按照上述步骤，来制作进度条原型。

2.交互设置步骤

1）首先创建所有需要的元件，并且为各元件命名，方便设置交互时选择。

其中，走势图实际为中继器，只需要一个直线的元件，包括2列，分别为开始点数pre和到达点数now。

2）然后，添加一个全局变量pre，用以存储每一行的当前数据，用作下一行的开始数据。

3）然后，来设计中继器中直线的位置，长度和旋转角度。
我们让每个时间段的横坐标为20，纵坐标代表当前时间段的涨跌变化，也就是中继器中的now-pre的值。对于线段，位置代表线段的中点，即x为20的一半，y为上下位置的中心，但是因为涨跌数据为正时需要向上走，而axure中，向上为负值，则y=[[(-Item.pre-Item.now)/2]]。
旋转角度则需要一点数学知识，为[[Math.atan((Item.now-Item.pre)/20)*180/3.1415926]]，(Item.now-Item.pre)/20可以算出旋转角度的tan值，然后使用atan换算出角度，又因为这时算出的角度是弧度制，需要转化成角度制。
长度就简单了，小学就学过的勾股定律，[[Math.sqrt(20*20+Math.pow(Item.now-Item.pre,2))]]，直角边的平方和再开方即可。

4）这时候，我们添加一些数据，测试一下公式是否正确：

没有问题，我们清空数据，开始下一步操作。
5）开始按钮的操作需要分多个情形：
当中继器里的数据小于25行（因为图的宽度是500，每一行数据宽度是20），则像中继器中添加一行数据，pre就是全局变量的pre，这个值会在每次绘制元件时更新，而now=[[pre+Math.random()*40-20]],表示随机增加或减少-20到20的数值（当然，你如果觉得这不够刺激，还可以再增大一些）。然后等待100毫秒后再循环触发；

如果中继器里的数据到达25行了，则不再循环触发，这时需要给文本赋值，并且根据最后的pre大于或这小于0，来赋值上涨或者下跌

6）最后给重置按钮设置交互，清空中继器的所有数据，清空赋值的文本组件，然后启用开始按钮即可。

当然，你还可以做点儿别的效果，比如上涨为红色，下跌为绿色，这些就留给大家自己去实现吧。

3.一些说在最后的话

是不是没有想到，作为一个产品经理，扎实的数学功底也是必不可少的。

演示地址: link