使用AxureRP8模拟物理时钟

特别说明:透过有趣味的案例学习到一些知识点,是本站教程的一贯宗旨。这个案例并没有太多实用性,但是通过这个案例学到的知识点,可以灵活应用到原型的制作中。

首先,先来看我们要做的内容。

通过上图大家能够看到,这就是我们最终要实现的模拟物理时钟。

那么,参考这张图片,我们先来准备元件。

这些元件,分别是一个表盘的图片和三个用于制作指针的矩形。

表盘图片下载:http://www.iaxure.com/training/images/section38/u1807.png

接下来,我们把指针摆放在表盘上。

注意:指针底部在表盘中心点的下方,与中心点的距离为10px。

完成元件的准备之后,接下来,我们就可以添加交互了。

这里,我们需要解决两个问题:

1、获取系统的当前时间;

2、让时钟指针不停的根据系统时间旋转。

那么,获取系统时间,我们可以通过系统变量进行获取。

我们知道,在【插入变量或函数】的列表中有一些关于日期时间的系统变量与函数。

但是,这里用到的系统变量,在列表中是没有的。

这些系统变量分别是:Year、Month、Day、Hours、Minutes和Seconds。

这六个系统变量能够获取到当前系统时间的年、月、日、时、分、秒。

以上是我们解决第一个问题的办法。

接下来,如何让时钟指针不停的旋转呢?

既然是不停的旋转,不停、不停、不要停……这肯定循环的效果。

在我们所知道的元件中,只有动态面板才有循环的功能,我们可以借助这个功能。

但是,动态面板的循环功能,实际上是动态面板多个状态不停的切换功能。

动态面板默认只有一个状态“State1”,所以在之前准备元件的步骤中,我们可以在概要中给动态面板添加一个新的状态“State2”。

有了多个状态的动态面板,就可以通过循环的功能,不停的切换自身的状态了。

那么,这个状态,我们可以设置成每秒钟切换一次。

并且,在每次状态切换的时候,旋转时钟指针到新的角度就可以了。

知道了解决问题的办法,接下来,我们添加交互。

步骤一、让动态面板开始循环切换状态;

在动态面板的【载入时】,我们添加用例并设置动作【设置面板状态】于“当前元件”,【选择状态】为【Next】,并且勾选【向后循环】与【循环间隔】的选项。因为时钟指针每秒钟旋转一定角度,所以循环间隔保持默认的1000毫秒不变。这里注意,取消【首个状态延时1000毫秒后切换】选项的勾选,因为时钟时页面打开时就要刷新为最新时间,所以无需等待。

步骤二、动态面板切换状态时设置秒针的角度;

我们在动态面板的【状态改变时】设置交互,添加用例并设置【旋转】的动作;这里,我们先勾选秒针“SS”这个目标元件,让它旋转【到达】指定的角度;我们知道一分钟为60秒,那么每秒钟旋转的角度为360/60,也就是6度。所以,旋转的角度中我们填写公式“[[Seconds*6]]”。然后,旋转的方向保持【顺时针】不变,锚点选择【底部】。不过,我们知道指针的底部和中心点有10px的距离,所以,在锚点偏移的设置中,我们要设置y轴的偏移为“-10”px。

步骤三、动态面板切换状态时设置分针的角度;

继续上一步的设置,我们勾选目标元件“MM”,并且,参考秒针的设置进行分针的设置。

步骤四、动态面板切换状态时设置时针的角度;

继续上一步的设置,我们勾选目标元件“HH”,并且,参考秒针的设置进行时针的设置。但是,时针的角度计算和秒针、分针是不一样的。因为,小时的刻度是12个,所以,每个刻度角度是30度;并且,时针并非指向整点刻度,随着分钟的增加,还要有一定比例的偏移。所以,时针的角度我们可以分别计算整点的刻度和偏移的刻度,把它们加在一起。这里,我们填写公式“[[Hours*30+Minutes/60*30]]”。

在完成以上步骤之后,时钟已经能够正常运行。

但是,运行一段时间后,大家会发现有时针偏离位置的情况出现。

这是因为,在计算时针的角度时,除法的结果会有浮点小数出现,正是因为小数导致了时针产生偏移的诡异现象。

那么,既然知道是浮点小数作怪,我们可以通过对小数进行处理的函数toFixed()将小数变为整数来解决这个问题。

我们将之前写好的公式改为“[[(Hours*30+Minutes/60*30).toFixed(0)]]”。

toFixed(x):保留小数位数的函数,参数为保留小数的位数;参数为0时,结果为整数。

以上就是通过Axure模拟物理时钟的所有步骤,完整交互内容如下图。

在此将这个案例分享给所有学习Axure的同学。

感谢大家对Axure原创教程网的支持!

源文件下载:http://downloads.iaxure.com/Clock.rp

最后,邀请大家关注微信订阅号“iaxure”(二维码在本站首页右上方),及时获取本站最新动态。

 


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » 使用AxureRP8模拟物理时钟

喜欢 (2)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(4)个小伙伴在吐槽
  1. 刚刚在马云家入了一本《Axure RP8 入门手册》,找了好多家店铺都没现货呢
    WING2017-06-15 15:16 回复
  2. 老哥 稳 :mrgreen:
    大浩浩2017-06-15 17:04 回复
  3. 书买不了哇。 😥
    亚索3652017-06-15 17:05 回复
  4. 跟着做了一遍,没毛病
    kankio2017-06-15 17:36 回复