3D标签云的简单实现

3D标签云的实现

　　最近在做一些小Demo，看到了3D标签云觉得很酷炫，就学着做了一下。虽然看起来有点难，但是分解了看其实还是很普通的js运动的实现。
　　效果预览https://chestnut647.github.io/Demo/cloudTag/

---

分解

1. 球体的实现
   
   • 通过设置角度（α， β）确定标签的坐标位置
   • 球体的实现是通过字体大小和透明度来实现的，远处的标签更小、透明度更低
2. 球体的旋转
   
   • 开启定时器，定时通过鼠标的位置来改变球体各个标签位置来达到旋转动画的效果
     

     ---

球体的相关公式

标签分布

　　在 球体坐标系中， x y z是通过三个值来确定，即以下三个公式

　　　　　　 x = r * sinθ * cosφ y = r * sinθ * sinφz= r * cos θ

　　因此我们可以通过对θ φ取随机值，从而把标签分布在球体的表面上，在标签分布的时候，不能随意分布，要均匀分布。引入以下两个公式：

　　　　　　θ = arccos((2 * i - 1)/ len - 1); φ = θ * sqrt(len * PI)

　　其中，（2 * i - 1）/len - 1 是-1 到 1 中均匀分布的数列， 然后用arccos值得到均匀分布的θ值，第二个式子是θ的等差数列

球体旋转

　　旋转公式：

　　　　　 x1 = cosθ * x - sinθ * y; y1 = cosθ * y + sinθ * x;　

　　其中x y 是旋转前坐标， θ是逆时针旋转角度， x1 y1是旋转后的坐标，参考来源 http://www.cnblogs.com/ywxgod/archive/2010/08/06/1793609.html

---

代码实现

html部分

使用一个wrap来包裹住所有的标签
- wrap是一个相对定位，用来代表圆心
- a标签是绝对定位， 在圆上的坐标x y 即为a的left 和top 值

<div id="wrap">
<a href="#" class="tag">前端学习</a>