Axure制作与系统时间匹配的时钟操作实例

今天给大家带来一个可以与系统时间匹配的时钟。

话不多说，先上动画效果展示：

教程开始：

一、先准备需要的组件，

1、指针（秒针、分针、时针）大家可以用场举行代替，也可以下载自己喜欢的样式。

2、然后准备圆形4个，前3个大小随意，但是这3个圆形尺寸要一致，第四个要小一些，可以把指针尾部都盖就可以。

3、动态面板一个，state1，复制一个，state2，用于改变状态。

4、几个矩形或者文本标签都可以，用于获取系统时间，以及分块显示时间。

5、文本标签，用于标记3点6点9点12点，大家可以多做一些，把1~12点都写出来也可以。

6、组件样式如果下：

二、开始制作，

1、首先对动态面板添加事件，载入时，设定动态面板为next，向后循环1000毫秒（1000毫秒=1秒）如图：

2、接下来我开始获取系统时间，这里需要用到一个函数，[[Now.toLocaleTimeString(“en-GB”)]]获取后的格式 例 12:08:27，我们在动态面板状态改变时候增加事件为：设置文本那个长条矩形为：[[Now.toLocaleTimeString(“en-GB”)]]如图：

此时大家可以F5预览一下，这样就看见系统时间在变动，1秒1秒的增加。如图

3、接下来我们让另外几个矩形获取这个长矩形的小时，分钟，秒，要用到substr函数，用于获取指定字符串的第几位，

然后还是在动态面板上添加事件，状态改变时，设定3个矩形分别为：[[LVAR1.substr(0,2)]]，[[LVAR1.substr(3,2)]]，[[LVAR1.substr(6,2)]]

意思是获取上图的09:52:14→substr(0,2)就是从第0位开始到第2位也就是获取的09在这矩形上，之后同上，就不一一解释了。如图：

此时F5效果如下：

现在我们已经获取到系统时间，并且已经分块显示了，接下来我们要制作时钟表盘了，以及让时钟指针都转动。

4、我们把3个圆形跟3个指针分别组合起来（把圆形的填充颜色设置为空），指着的尾巴一定要在圆形的中心点位上，否则转圈的时候可能回跑偏。如图：

5、现在开始对秒针，分针，时针，进行转圈设置，还是在面板状态改变时添加事件：设定旋转角度等于秒针*6（因为60秒正好转一圈，1圈=360度，秒针*6正好最大得到360度，也就是一圈）如图：

然后设定分针旋转为：分针一圈也是360度，所以也要用分针*6等于一圈，[[((LVAR1 LVAR2/60)*6).toFixed(0)]] ，但是我们要注意一个细节，秒针走动的同时，分针也会跟随移动，1分钟移动距离不大，但是会动，所以我们要用分针的角度 秒针/60的角度来判定，这个.toFixed(0)是不保留小数的意思，如果保留了，分针旋转会有问题，大家可以自己测试一下。如图：

6、都设定完毕后，我们把这些简单移动一下，都重叠在一起，把动态面板跟长矩形隐藏，看看效果吧。把表盘制作出来，小圆盖在指针尾巴上，就可以了。大家可以根据自己的审美，更换表盘等。如图：

按下F5，看看效果吧！加油各位小伙伴们。

以上就是Axure制作与系统时间匹配的时钟操作实例的全部内容介绍了，关于更多Axure教程信息，欢迎关注北极熊素材库，给你带来最丰富的素材图片和最有用的教程，更多最新资讯。