axure8.0快速入门新手教程:挂钟

2017年4月19日 阅读:274

挂钟,这种设计不多见,但是我曾经也在很多个人博客上见到过,让访客进入他的博客立马有一种空间感。无论如何,学着做一个挂钟,是非常有利于你对axure原型时间类函数的理解和熟悉。所以,这一章就以挂钟为案例,教大家如何使用axure8.0制作出来。

第一步:拖拉摆放好相关控件

首先,一个160X160的黑框白底椭圆形,命名为“底盘”,上面放4条水平线(分别为30、60、120和150四种角度)和4个数字(分别为12、3、6和9),再在上面盖一层140X140的黑框白底椭圆形,这样,挂钟的钟盘就算画好了。

然后,就是摆上“秒钟”、“分钟”和“时钟”了,分别对准9点、3点和12点。“秒钟”为红色,“分钟”和“时钟”为黑色,“秒钟”最长最细,“时钟”最短最粗,而“分钟”居于前两者之间。

第二步:为“底盘”添加载入时用例

触发“底盘”显示时用例

第三步:为“底盘”添加显示时用例

1、绝对顺时针旋转时针、分针和秒针,旋转角度分别为getHours()*30、Now.getMinutes()*6-90和Now.getSeconds()*6-270。

2、等待1000毫秒

3、隐藏“底盘”

4、显示“底盘”

点击预览就可以看见挂钟行走的效果了。同时也可以随时关注我的个人博客:http://weidublog.com,因为工作过程中有很多这些axure原型设计小技巧的例子,所以我会坚持分享下去,希望对大家有帮助,你们对我的关注就是我的动力。

效果图:axure原型设计之挂钟
更多原型案例:http://weidublog.com/index.php/2017/03/20/181/

作者:维度
转载请注明出处:http://weidublog.com/index.php/2017/04/19/495/

没有评论

评论已关闭。