Axure 制作极简时钟教程

少啰嗦，先看东西。

一张图看明白用了哪些元件以及它们的命名（表框中心的圆点是中心点（圆形），只起到装饰作用，就不标出来了）。

注意：

1. 动态面板中至少需要2个状态，状态中不用放任何内容。
2. 时针、分针的透明度设置为60%，经过星期和日期上方的时候才不会挡住内容。
3. 画完界面之后将整个表框组件放在表壳和组件的正上方，就是下面的效果。

开始写交互。

首先是日期的获取，很简单，在载入的时候用函数获取日期并设置文本即可。

接下来是星期的获取，也不复杂，只是函数获取到的日期是英文的，如果你想显示为中文，就需要做一个判断和转换。

接下来是时分秒针的交互，做起来很简单，但是思路很重要。

1. 时分秒针的动态效果本身是围绕指针一端的旋转交互。
2. 秒针60秒走过360°，每秒走过6°，所以用当前时间的秒数*6就可以得出秒针当前应该处于多少度。
3. 分针跟秒针相同。
4. 时针12小时走过360°，每小时走过30°。

接下来做交互，循环判断用动态面板，这个之前讲过，还没看过的可以看一下。传送门>>

首先在控制器（动态面板）载入时开始循环。

接下来在动态面板状态改变时设置3根指针旋转，分别用函数获取当前的时分秒，并乘以对应旋转的角度，这里注意锚点要选择正下方，否则你会得到3根位置很奇怪的指针。

非常简单，你也来尝试一下吧。

本文由微信公众号：产品锦李（ID：IMPM996） 授权发布，未经许可，禁止转载