小程序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了，效果图如下(静态图)，动态你可以参照上面代码运行可以看到效果，本人是新手，希望大神多多指教
