1. 主页 > 行业资讯 > 设计文章 >

如何实现动态时钟旋转?

编者按:通过Axure可以实现动态时钟旋转,但是如何快速简单地实现这个功能呢?本文作者通过实际操作为我们进行了论证和总结。

看到几个关于时钟动力学的原型设计,感觉很麻烦。我用了很多秒分针和时针之间的来回加减来计算旋转角度;本文将讲解不同的制作方法,简单易懂(工具:axure9)。

我觉得不涉及功能做原型很快(当然涉及到复读机还是有点深的,而且我玩了很久,差不多能实现一些复杂的交互,后面还有时间写),知道原理就不会太复杂了。本文使用动态面板和简单的获取日期功能(右下角的时钟)。

该功能用于:

获取当前系统的小时:[[Now.getUTCHours()]];(这个函数用的时候发现总是比系统时间多4个小时,不知道是什么原因,需要减去才行,你们可以尝试一下获取当前系统的分钟:[[Now.getUTCMinutes()]]获取当前系统的秒数:[[Now.getUTCSecond()]]

一.基本要素

圆形*2(其实一个就够了,两个为了好看一点点)动态面板*3(3个状态命名为:秒针、分针、时针)线段*3(分别代表时针、分针、秒针)齿轮*1(可有可无)

第二,观念

获取当前系统的时间,使用动态面板进行来回交互,可以实时刷新获取的时间,然后指针可以连续旋转。注意:每个动态面板中的组件必须重合,否则指针会错位。

第三,详细添加交互

将时针、分针、秒针分别放入三个动态面板,然后先加入秒针的动作。加载时-设置动态面板(下一项,循环,1000毫秒),设置时:状态改变-旋转(线段-[[现在。getutsecend()* 6]]-锚点:中间位置),为什么要乘以6?

分针:和秒针一样,功能改为[[now . getutchminutes()* 6]]。分针为什么要乘以6?和秒针一样,分针代表6度,获取当前系统的时间分*6就是旋转角度。

时针:[[((((现在。getutchours ()-4) * 30)+((现在。getutchminutes()/60)* 5))。tofixed (0)]

这里减去,时针30度,加上点的值:(当前点除以60)乘以5;以下函数:。toFixed(0),因为积分加的值可能是小时,所以这里需要四舍五入。

这是结尾,预览一下看看有没有实现;可以添加一些细节,比如表盘,颜色区分,美化。中间是我自己加的小齿轮,感觉有点机械。

本文由网上采集发布,不代表我们立场,如有侵权请联系我删除,转载联系作者并注明出处:http://ffjianzhan.cn/a/sjwz/525.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息