无插件的词云浮动效果。怎么样把这个的代码ts改成vue2可以用的?
https://blog.csdn.net/weixin_43254676/article/details/125483236?ops_request_misc=&request_id=8e524d2a0c434354912f0568e48d06b5&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-
看了一下代码,基本可以直接用。 如果你是 js语法。那就 把 ts转换成js 。把类型声明去掉即可 ,private 去掉 。该改 var ,let,const看情况而定。
// 定义私有变量
var wordData = [
'高新企业',
'100.9万',
'怀柔区国家',
'一核四区',
'实验室挂牌',
'高新企业',
'企业入驻',
'一核四区',
];
var colorList = [
'#FF7866',
'#5DEC6B',
'#ff646f',
'#00F6FF',
'#2eccff',
'#E2CE22',
'#0090FF',
'#1BDA87',
];
var contentEle = [];
var direction = '-1';
var speed = 1000;
var width = 360;
var height = 200;
// 初始化函数
function init() {
var RADIUSX = (width - 50) / 2;
var RADIUSY = (height - 50) / 2;
contentEle = [];
for (var i = 0; i < wordData.length; i += 1) {
var k = -1 + (2 * (i + 1) - 1) / wordData.length;
var a = Math.acos(k);
var b = a * Math.sqrt(wordData.length * Math.PI);
var x = RADIUSX * Math.sin(a) * Math.cos(b);
var y = RADIUSY * Math.sin(a) * Math.sin(b);
var z = RADIUSX * Math.cos(a);
var singleEle = {
x: x,
y: y,
z: z,
style: {},
};
contentEle.push(singleEle);
}
animate();
}
// 动画函数
function animate() {
rotateX();
rotateY();
move();
window.requestAnimationFrame(animate);
}
// 绕X轴旋转
function rotateX() {
var angleX = ['-1', '1'].includes(direction)
? Math.PI / Infinity
: Math.PI / ((Number(direction) / 2) * Number(speed));
var cos = Math.cos(angleX);
var sin = Math.sin(angleX);
contentEle = contentEle.map(function(t) {
var y1 = t.y * cos - t.z * sin;
var z1 = t.z * cos + t.y * sin;
return {
x: t.x,
y: y1,
z: z1,
style: t.style,
};
});
}
// 绕Y轴旋转
function rotateY() {
var angleY = ['-2', '2'].includes(direction)
? Math.PI / Infinity
: Math.PI / (Number(direction) * Number(speed));
var cos = Math.cos(angleY);
var sin = Math.sin(angleY);
contentEle = contentEle.map(function(t) {
var x1 = t.x * cos - t.z * sin;
var z1 = t.z * cos + t.x * sin;
return {
x: x1,
y: t.y,
z: z1,
style: t.style,
};
});
}
// 移动函数
function move() {
var CX = width / 2;
var CY = height / 2;
contentEle = contentEle.map(function(singleEle) {
var x = singleEle.x;
var y = singleEle.y;
var z = singleEle.z;
var fallLength = 500;
var RADIUS = (width - 50) / 2;
var scale = fallLength / (fallLength - z);
var alpha = (z + RADIUS) / (2 * RADIUS);
var left = x + CX - 15 + 'px';
var top = y + CY - 15 + 'px';
var transform = 'translate(' + left + ', ' + top + ') scale(' + scale + ')';
var style = {
opacity: alpha + 0.5,
zIndex: parseInt(String(scale * 100), 10),
transform: transform,
};
return {
x: x,
y: y,
z: z,
style: style,
};
});
}
// 初始化
init();