热点滚动 :
当前位置 主页 > 国家政策 >

Axure 80教程 制作机械时钟

  这次带给大家的案例是基于 Axure RP 8.0,利用了 8.0 所特有的新功能——旋转。随着对 RP 8.0 的了解,我是越来越喜欢这个版本,尤其是这个新增的的“旋转”功能,绝对是我做原型时的御用特效师(duang duang duang 的特效就靠它了)。

  其实这个案例我已经构思了很长时间,只是因为时间关系,一直都没有实施,有时候画原型、写教程也是需要一点感觉的,感觉来了,事半功倍,没有感觉,只会浪费时间(这么说貌似有点矫情)。

  绘制时钟部件,包括时针、分针、秒针、表盘等,当然也可使用 PS 直接制作所需图片,或上网寻找相关素材(本案例中的表盘为网上下载,表针均用 Axure 绘制)

  实现表针的旋转和逻辑,这里是两层概念,一层是要实现表针的旋转动作,二层是要处理好秒、分、时的递进逻辑关系,也就是秒针旋转一周,分针要对应的走一分,分针走一圈,相应的时针要走一个点。

  绘制表针的时候需要注意一点,就是要考虑到对表针进行旋转的时候需要有一个轴心,在上图中可以看到我的表针下端都有一些空白区域,这个是为了保证整个表针部件的中心位置正好是表针旋转的轴心,而后面的旋转动作也是加在表针部件的中心位置。

  另外一个就是可以通过形状的运算及组合来形成一个表针部件,但是在时间过程中发现,旋转组合后的部件,在浏览器预览效果的时候容易导致部件错位,因此建议将表针转化为 PNG 图片,这样可以保证原型预览时旋转效果的完美。

  第三个需要注意的点就是,将表盘、时针、分针、秒针组合在一起的时候,需要绝对的中心重合,这个时候需要考虑到各个部件的尺寸问题,居中排列是可以保证两边的距离都是 1 个完整的像素(如果出现 0.5 个像素可能会有问题)。

  那么基于以上几点,在加上你的耐心细致,相信很快就可以搞定一套时钟部件。那么接下来就进入我们第二个过程。

  这个过程就是要让时钟动起来,并且可以正确的走时。动起来自然是给时针加上相关动作,但是正确的走时就需要一个完整而又合理的逻辑。

  ① 添加 3 个辅助部件——文本框,分别命名为“时”、“分”、“秒”,并分别用来显示时、分、秒,由于文本框有一个特殊的事件——文本改变时,所以可以利用这个事件实现计时以及循环触发所需事件。

  Case 1:当文本框“秒”的值等于 59 时,等待 1 秒,设置 time(time 为第 4 个文本框的名称) 的值为当前时间,Axure 80教程 制作机械时钟顺时针旋转秒针 6°(因为一圈 60 秒 360°,所以每秒 6°),设置文本框“秒”的值等于 0(因为 59 的下一秒是 0),设置文本框“分”的值 +1(因为秒针走到 59 后,再过 1 秒,分针要 +1),顺时针旋转分针 6°(因为分针走 1 分旋转的角度是 6°),顺时针旋转时针到“当前时*30°+当前分/2°”的位置(这个请仔细体会一下)。

  Case 2:其他情况,等待 1 秒,设置 time 的值为当前时间,顺时针旋转秒针 6°,设置文本框“秒”的值 +1。

  Case 1:当文本框“分”的值等于 59 时,等待 60 秒,设置文本框“分”的值为 0,设置文本框“时”的值 +1。

  Case 1:当文本框“时”的值等于 23 时,等待 3600 。

相关文章