肥猫SEO论坛»论坛首页 › 行业交流 › 软件下载 › 如何实现动态钟表转动？

高端网站建设可签合同可上门沟通	站群程序定制/蜘蛛池租用	全行业SEO接单QQ1624516415	全行业SEO接单QQ1624516415
2000+站点外链一键通发	原创SEO文章代写【点击】	点击加入本站VIP 发帖免审核	广告位招租

honghu2

23万积分	0 好友	7万主题

发消息

如何实现动态钟表转动？

TA的其它主题

发表于 2021-9-26 09:57 | 查看: 260| 回复: 0

若何实现动态钟表滚动？

编纂导语：经由过程Axure，咱们可以实现动态钟表滚动，可是若何快速而简略的实现这一功效呢？本文作者骑士交友网经由过程现实的实践操作，为咱们做出了树模和总结。

看到几篇关于钟表动态的原型设计，感受都好贫苦，用了超等多的秒针分针和时针之间的往返加减来计较扭转角度；这篇文章将讲授纷歧样的建造法子，简略易懂（东西：axure9）。

我感觉做原型不触及到函数的建造起锁缘软件网来仍是很快的（固然，触及到中继器这个仍是有点深的，我也玩了好久，差未几可以实现一些繁杂的交互，今后有时候在写），晓得道理后就不会太繁杂，这篇用到了动态面板和简略的获得日期函数（右下角为钟表）。

操纵到了函数：
获得当前体系的小时：[[Now.getUTCHours()]];（这个函数用的时辰发明老是比体系时候多4个小时，不晓得是甚么缘由，必要减去才行，你们可以测验考试一下获得当前体系的分钟：[[Now.getUTCMinutes()]]获得当前体系的秒数：[[Now.getUTCSecond()]]1、根基元件圆形*2（实在一个就够了，两个为了都雅一点点）动态面板*3（3个状况定名为：秒针、分针、时针）线段*3（别离代表时针、分针、秒针）齿轮*1（无关紧要）2、思绪
获得当前体系的时候，操纵动态面板往返交互，可以及时刷新获得的时候，进而进指针可以不绝的扭转。必要注重的点：每一个动态面板里的组件必需重合，否则将会呈现表针不重合。
3、具体添加交互

将时针、分针、秒针别离放到三个动态面板中，然后先添加秒针的动作，载入时-设置动态面板（下一项，轮回，1000ms），在设置：状况扭转时-扭转（线段-[[Now.getUTCSecond()*6]]-锚点：中心位置），为甚么乘以6，由于圆360除以60的钟表格，每格是6度。

分针：和秒针同样，函数换成[[Now.getUTCMinutes()*6]]，为甚么分针也乘6？和秒针同样，分针一格代表6度，获得当前体系的时候分*6就是扭转的角度。

时针：[[(((Now.getUTCHours()-4)*30)+((Now.getUTCMinutes()/60)*5)).toFixed(0)]]，时针思绪和秒针、分玉米视频针同样，只是要加被骗前分针的值，函数中减4是前面说的会比当前时多四。

这里减去，时针走一下是30度，加之分的值：（当前的分除以60）乘以5；后面的函数：.toFixed(0)，由于加之分的值可能为小时，咱们这里要取整。

这里就竣事了，预览可以看看有无实现；可以加点细节，如表盘、色彩区别美化一下，中心我的小齿轮就是本身加的，感受多了点机器感。

本文由 @鑫小包原创公布于人人都是产物司理，未经允许，制止转载

题图来自 Unsplash，基于 CC0 协定

收藏0 回复显示全部楼层道具举报

返回列表

		自动登录	找回密码
密码			立即注册