教程制作机械时钟

　　这次带给大家的案例是基于AxureRP8。0，利用了8。0所特有的新功能旋转。随着对RP8。0的了解，我是越来越喜欢这个版本，尤其是这个新增的的旋转功能，绝对是我做原型时的御用特效师（duangduangduang的特效就靠它了）。
　　其实这个案例我已经构思了很长时间，只是因为时间关系，一直都没有实施，有时候画原型、写教程也是需要一点感觉的，感觉来了，事半功倍，没有感觉，只会浪费时间（这么说貌似有点矫情）。
　　（原型效果图）
　　原型预览
　　预览地址：http：raedme。cnaxurelab009clockindex。html
　　制作过程
　　制作Clock时钟原型，需要解决的核心问题有以下三个：
　　绘制时钟部件，包括时针、分针、秒针、表盘等，当然也可使用PS直接制作所需图片，或上网寻找相关素材（本案例中的表盘为网上下载，表针均用Axure绘制）
　　实现表针的旋转和逻辑，这里是两层概念，一层是要实现表针的旋转动作，二层是要处理好秒、分、时的递进逻辑关系，也就是秒针旋转一周，分针要对应的走一分，分针走一圈，相应的时针要走一个点。
　　当原型预览时，可以动态显示当前系统时间。
　　明确了以上问题后，接下来就可以动手画原型了。
　　。绘制时钟部件
　　表盘可以自行绘制，也可从网上下载相应图片（上图中的表盘为网上下载）。
　　绘制表针的时候需要注意一点，就是要考虑到对表针进行旋转的时候需要有一个轴心，在上图中可以看到我的表针下端都有一些空白区域，这个是为了保证整个表针部件的中心位置正好是表针旋转的轴心，而后面的旋转动作也是加在表针部件的中心位置。
　　另外一个就是可以通过形状的运算及组合来形成一个表针部件，但是在时间过程中发现，旋转组合后的部件，在浏览器预览效果的时候容易导致部件错位，因此建议将表针转化为PNG图片，这样可以保证原型预览时旋转效果的完美。
　　第三个需要注意的点就是，将表盘、时针、分针、秒针组合在一起的时候，需要绝对的中心重合，这个时候需要考虑到各个部件的尺寸问题，居中排列是可以保证两边的距离都是1个完整的像素（如果出现0。5个像素可能会有问题）。
　　那么基于以上几点，在加上你的耐心细致，相信很快就可以搞定一套时钟部件。那么接下来就进入我们第二个过程。
　　。时钟走时逻辑
　　这个过程就是要让时钟动起来，并且可以正确的走时。动起来自然是给时针加上相关动作，但是正确的走时就需要一个完整而又合理的逻辑。
　　添加3个辅助部件文本框，分别命名为时、分、秒，并分别用来显示时、分、秒，由于文本框有一个特殊的事件文本改变时，所以可以利用这个事件实现计时以及循环触发所需事件。
　　在秒文本框上增加如下事件：
　　【解释】
　　Case1：当文本框秒的值等于59时，等待1秒，设置time（time为第4个文本框的名称）的值为当前时间，顺时针旋转秒针6（因为一圈60秒360，所以每秒6），设置文本框秒的值等于0（因为59的下一秒是0），设置文本框分的值1（因为秒针走到59后，再过1秒，分针要1），顺时针旋转分针6（因为分针走1分旋转的角度是6），顺时针旋转时针到当前时30当前分2的位置（这个请仔细体会一下）。
　　Case2：其他情况，等待1秒，设置time的值为当前时间，顺时针旋转秒针6，设置文本框秒的值1。
　　在分文本框上增加如下事件：
　　【解释】
　　Case1：当文本框分的值等于59时，等待60秒，设置文本框分的值为0，设置文本框时的值1。
　　在文本框时上增加如下事件：
　　【解释】
　　Case1：当文本框时的值等于23时，等待3600秒，设置文本框时的值为0。
　　到这里就完成了时钟走时的逻辑，那接下来就是解决如何在原型预览时（也就是页面加载时）获取当前系统时间。
　　。获取当前系统时间
　　由于上一步中时针走时用到了3个辅助文本框，分别表示时、分、秒，那在这一步，获取当前系统时间的时候，我也采用单独获取的方式，也就是单独获取当前的时、分、秒，然后赋值给文本框时、分、秒。
　　【解释】
　　Case1：第一个Set是把获取的当前系统时间的时、分、秒分别复制为文本框时、分、秒；第二个Rotate是根据当前获取的时分秒，来分别将时针、分针、秒针旋转到指定的位置。
　　当时钟读取并显示了当前系统时间后，就会按照之前设置好的走时逻辑继续走时，并可以和当前系统时间保持同步（不同浏览器会出现不同步的情况，本人测试Edge和IE11浏览器兼容效果最好）。
　　。总结
　　OK，到这里整个案例就讲完了，而且文中也讲述了所有的事件、动作、逻辑，接下来感兴趣的小伙伴就需要自己去动手实践了。当然如果有更好的方式方法也欢迎与我交流（微信：urmagic）。
　　原型下载：
　　http：pan。baidu。coms1nuWP2Zn密码：dtbf