小程序3D标签云

微信小程序实现3D标签云
在网上查找了许多3d标签云的案列，一般都是用原生和jquery写的，然后参考
https://www.cnblogs.com/axes/p/3501424.html这篇文章
在小程序里面实现标签云，具体代码如下

wxml

// An highlighted block
<view class="tagBall">
  <a class="tag" wx:for="{{tagEle}}" wx:key="{{index}}" style="opacity:{{item.o}};z-index:{{item.z}};left: {{item.x}}rpx;top: {{item.y}}rpx;transform: scale({{item.s}})">
    {{item.title}}
  </a>
 </view>

wxss

.tagBall{
      width: 420rpx;
      height: 300rpx;
      margin:300rpx auto;
      position: relative;
      left: 120rpx;
  }
  .tag{
      display: block;
      position: absolute;
      left: 0rpx;
      top: 0rpx;
      color: #000;
      text-decoration: none;
      font-size: 32rpx;
      font-family: "微软雅黑";
      font-weight: bold;
  }
  .tag:hover{border:1px solid #666;}

js

innit() {
     var tagEle = [
       {
         title: '被子',
         x: 0,
         y: 0,
         z: 0,
         s: 0,
         o: 1,
         f: 15,
         angleX: 0,
         angleY: 0
       },
       {
         title: '咖啡機',
         x: 0,
         y: 0,
         z: 0,
         s: 0,
         o: 1,
         f: 15,
         angleX: 0,
         angleY: 0
       },
       {
         title: '飛機',
         x: 0,
         y: 0,
         z: 0,
         s: 0,
         o: 1,
         f: 15,
         angleX: 0,
         angleY: 0
       },
       {
         title: '电脑',
         x: 0,
         y: 0,
         z: 0,
         s: 0,
         o: 1,
         f: 15,
         angleX: 0,
         angleY: 0
       },
       {
         title: '手机',
         x: 0,
         y: 0,
         z: 0,
         s: 0,
         o: 1,
         f: 15,
         angleX: 0,
         angleY: 0
       },
       {
         title: '键盘',
         x: 0,
         y: 0,
         z: 0,
         s: 0,
         o: 1,
         f: 15,
         angleX: 0,
         angleY: 0
       },
       {
         title: '奶飞机',
         x: 0,
         y: 0,
         z: 0,
         s: 0,
         o: 1,
         f: 15,
         angleX: 0,
         angleY: 0
       },
       {
         title: '桌子',
         x: 0,
         y: 0,
         z: 0,
         s: 0,
         o: 1,
         f: 15,
         angleX: 0,
         angleY: 0
       },
       {
         title: '板凳',
         x: 0,
         y: 0,
         z: 0,
         s: 0,
         o: 1,
         f: 15,
         angleX: 0,
         angleY: 0
       },
       {
         title: '杯子',
         x: 0,
         y: 0,
         z: 0,
         s: 0,
         o: 1,
         f: 15,
         angleX:0,
         angleY:0
       },
       {
         title: '被子',
         x: 0,
         y: 0,
         z: 0,
         s: 0,
         o: 1,
         f: 15,
         angleX: 0,
         angleY: 0
       },
       {
         title: '咖啡機',
         x: 0,
         y: 0,
         z: 0,
         s: 0,
         o: 1,
         f: 15,
         angleX: 0,
         angleY: 0
       },
       {
         title: '飛機',
         x: 0,
         y: 0,
         z: 0,
         s: 0,
         o: 1,
         f: 15,
         angleX: 0,
         angleY: 0
       },
       {
         title: '电脑',
         x: 0,
         y: 0,
         z: 0,
         s: 0,
         o: 1,
         f: 15,
         angleX: 0,
         angleY: 0
       },
       {
         title: '手机',
         x: 0,
         y: 0,
         z: 0,
         s: 0,
         o: 1,
         f: 15,
         angleX: 0,
         angleY: 0
       },
       {
         title: '键盘',
         x: 0,
         y: 0,
         z: 0,
         s: 0,
         o: 1,
         f: 15,
         angleX: 0,
         angleY: 0
       },
       {
         title: '奶飞机',
         x: 0,
         y: 0,
         z: 0,
         s: 0,
         o: 1,
         f: 15,
         angleX: 0,
         angleY: 0
       },
       {
         title: '桌子',
         x: 0,
         y: 0,
         z: 0,
         s: 0,
         o: 1,
         f: 15,
         angleX: 0,
         angleY: 0
       },
       {
         title: '板凳',
         x: 0,
         y: 0,
         z: 0,
         s: 0,
         o: 1,
         f: 15,
         angleX: 0,
         angleY: 0
       },
       {
         title: '杯子',
         x: 0,
         y: 0,
         z: 0,
         s: 0,
         o: 1,
         f: 15,
         angleX: 0,
         angleY: 0
       }
     ]
     for (var i = 0; i < tagEle.length; i++) {
       var fallLength = 100 //圆的焦点
       var angleX = Math.PI / 100
       var angleY = Math.PI / 100
       var k = (2 * (i + 1) - 1) / tagEle.length - 1;
       //计算按圆形旋转
       var a = Math.acos(k);
       var b = a * Math.sqrt(tagEle.length * Math.PI);
      //计算元素x，y坐标
       var numx = 120 * Math.sin(a) * Math.cos(b)
       var numy = 120 * Math.sin(a) * Math.sin(b);
       var numz = 220 * Math.cos(a);

      // console.log(numo)
       //计算元素缩放大小
       tagEle[i].x = numx * 2
       tagEle[i].y = numy * 2
       tagEle[i].z = numz
       tagEle[i].s = 250 / (400 - tagEle[i].z)
     }
      //动画
       setInterval( () =>{
         for (var i = 0; i < tagEle.length; i++) {
           var a = Math.acos(k);
           var numz = 240 * Math.cos(a);
           tagEle[i].s = 250 / (400 - tagEle[i].z)
           var cos = Math.cos(angleX);
           var sin = Math.sin(angleX);
           var y1 = tagEle[i].y * cos - tagEle[i].z * sin;
           var z1 = tagEle[i].z * cos + tagEle[i].y * sin;
           tagEle[i].y = y1;
           tagEle[i].z = z1;

           var cos = Math.cos(angleY);
           var sin = Math.sin(angleY);
           var x1 = tagEle[i].x * cos - tagEle[i].z * sin;
           var z1 = tagEle[i].z * cos + tagEle[i].x * sin;
           tagEle[i].x = x1;
           tagEle[i].z = z1;
           this.setData({
             tagEle: tagEle
           })
         }
       }, 100)
  },

最后把innit(）在onShow()方法里面调用就ok了，效果图如下(静态图)，动态你可以参照上面代码运行可以看到效果，本人是新手，希望大神多多指教