【Axure中继器】利用中继器的“监听”事件实现时钟的效果

Axure上实现时钟的效果，有很多方式或者也有过很多案例。
这里我分享一个利用Axure中继器的监听来实现。
先看效果：
https://urrtqy.axshare.com

实现思路：
1 、时钟，无非就是要让秒针转起来，这个转起来的动作，肯定是一个循环的事件；
2 、秒针转一圈后，分钟就转一格；分钟转一圈后，时针就转一大格；
3 、为了逼真，秒针在转动的过程中，分针要根据秒针转了多少，要转动对应的角度，而不能在最后转一格；时针也是同样的道理；
4 、如何实现循环？传统的做法是用一个面板，每隔一秒切换状态一次，不停的切换就能实现循环的效果；这里使用的中继器的Loaded交互来实现（我对比了一下，中继器更容易实现）。

需要的组件：一个时钟的图片（网上一大把），需要找那种一个小时被分成 5 小格的那种；
三根线段，分别命名为：S-Line、 M-Line 、 H-Line，并设置不同的颜色；
一个中继器，不需要任何数据，且设置为“隐藏”；
三个全局变量：second、min、hour，分别用来存储秒、分和小时。
时钟最终的排列如下图：

变量设置如下图：

接下来是交互
1 、页面加载时，变量初始化

2 、在中继器的加载事件中增加交互如下：

转动线段的角度说明：
1 、秒针，就是当前多少秒，就转动秒数 * 6（每一小格是 6°，一圈是 360°）
2 、分针，就是当前多少分，就转动多少小格，另外，需要加上秒针走了多少后，分针在一小格中的偏移量，
偏移量的计算方式是：一小格是 6°，60 秒一圈转 6°，所以偏移量 = 秒数 * （6°/60）
3 、时钟有点不同，一个小时是转动 30°，所以是当前的小时*30°，再加上偏移量，时钟的偏移量计算方式是：60 分钟转 30°，那么 n 分钟就需要转(n/2）° 了

后面的交互就是：
等待 1000 毫秒（就是一秒），又触发加载事件，就形成了循环了。

–完–