Axure教程 | 漂亮的不像实力派的锤子时钟

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

shuizishizhong

之前曾发过一个教程,用来显示秒表的,《如何用Axure设计锤子手机的秒表计时器》,当然这个和锤子手机的秒表无任何关系,唯一有联系的就是分、秒级的计算和显示。

今天,随着axure8的推出,它的旋转功能,终于让我们可以真的可以实现锤子的世界时间。

这个例子其实很简单,可以学习到知识点有下面三个:

  1. 只用到了日期相关函数
  2. axure8的旋转功能
  3. 以及通过显示和隐藏来循环处理的技巧

只是这次我们做的是高保真的效果,背景图部分使用了锤子的截图,重新画了下小时、分钟和秒钟的指针。

先睹为快,单击这里查看在线演示

一、准备素材

到花瓣上找张锤子手机时钟的背景图,使用PS重新简单制作了小时、分钟和秒钟的指针,这三个指针图片的大小和宽度一样,因为axure8里的旋转是围绕部件的中心旋转的,所以这里统一了大小,方便旋转处理。

准备时钟素材

三个指针要在水平和垂直方向对齐,这样就会围绕着相同的中心点旋转。

另外在axure里设置了下三个指针的阴影效果。

二、使用显示/隐藏事件处理循环

在显示事件里等待一秒后再隐藏,隐藏事件里淡入淡出显示指针,然后开始计算当前时间,旋转指针到正确的位置。

显示隐藏事件处理事件循环

为了先触发循环,在页面加载时先触发部件的隐藏事件,另外将时钟移到页面中央。

页面加载的事件触发

怎么样,足够简单吧,可以自己试一下哦!

有任何问题欢迎随时交流。

 

本文由 @Axure原型设计工场 原创发布于人人都是产品经理 ,未经许可,禁止转载。

您的赞赏,是对我创作的最大鼓励。

评论( 6

登录后参与评论
  1. 作为一个用了axure多年的产品狗也放弃她了,现在有好的新工具好用多了
    比如mockplus、Principle等等。

    http://www.8kvv.com 上面特别全,建议看看
    :mrgreen: :mrgreen: :mrgreen: :mrgreen:

    回复
  2. 请问这个旋转的角度公式是如何得出的,能帮忙解释下吗,谢谢!

    回复
    1. 回复

      表盘360° 出发前 对于12点指针都是偏移90° 出发时 获取系统时间 分钟*6°-90°=分针偏移角度 秒针同理 时针=小时*30-90 因为每小时时针偏30°

  3. @Axure原型设计工场 :sad:

    回复
  4. 在执行的时候,时分秒针都错位了,请大神指示 :???:

    回复
    1. 回复

      改成绝对位置试试~ :cool:

加载中