我们缺的不是技术,而是创意...

2017-08-24 00:00 出处:360java.com 作者:360java  阅读()
周末闲在家确实无聊。宅的不成样子了。偶然发现国外一个web设计的网站上有一个3D时钟。顿时来了兴趣。其实一看代码,不是svg,也不是canvas,而是简单的利用层级关系,大小关系作

  周末闲在家确实无聊。宅的不成样子了。偶然发现国外一个web设计的网站上有一个3D时钟。顿时来了兴趣。其实一看代码,不是svg,也不是canvas,而是简单的利用层级关系,大小关系作了一个视觉差。看起来会有立体运动的感觉。

  于是,借着源码,我稍微把它整理一下,利用闭包规避了它大量的全局变量,稍微封装了一下,增加了几项可配置性。觉得好玩,分享给大家。
  这个效果主要有两个核心的变换,一个是时钟整体圆周的变化,一个是组成时钟的小元素的位置和层级的变化。
  核心变换代码主要有两段:

mainloop: function () {
// rotations
_dir == 'left' ? A-=0.1 : A+=0.1;
rx
+=px;
ry
+=py;
crx
=Math.cos(rx);
srx
=Math.sin(rx);
cry
=Math.cos(ry+Math.PI/2);
sry=Math.sin(ry+Math.PI/2);
// return to the horizontale
rx*=.9; ry*=.9; px*=.9; py*=.9;
// refresh time
.
.
.
// call animation
for(var i in O){
for(var j in O[i].O){
O[i].O[j].anim();
}
}
setTimeout(arguments.callee,
32);
}
分享到:
本文标签: 程序员

相关文章

发表评论(共条评论)愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。

Copyright (C) java学习 360java 360java.com, All Rights Reserved.

苏ICP备16022210号