Axure综合小案例（动态时钟)

Axure综合小案例（动态时钟)

对于制作动态时钟我们所需要解决的两个难点:

1. 如何让指针动起来.(可以使用动态面板使指针动起来)
2. 指针动的角度(可以使用日期函数使指针偏移正确角度)

动态面板部分.使用了动态面板制作幻灯片,可以实现图片在指定时间内进行切换

1.0 素材准备

1.表盘素材

2.0 动态面板进行设置

1.开始设置动态面板,在添在用例载入时添加动作

关于循环面板交互动作已经解决,此时已经解决了动,下面还需要解决角度

向下是正数,向下是负数

2.设置状态

3.设置时针分针秒针状态

设置角度所需要的函数
秒针: [[Now.getSeconds()*6]]
分针: [[(Now.getMinutes()*6+Now.getSeconds()/60*6).toFixed(decimalPoints)]]
时针: [[(Now.getHours()*30+Now.getMinutes()/60*30).toFixed(0)]]

在秒针中可以直接使用函数获取秒针,因为一秒跨越6度(360/60),所以乘以6

在分针中可以使用函数获取分钟数,跨越6度,而且需要加上此时秒针度数,才是最准确的

在时针中同理,需要加上分钟度数.

3.0效果图