说到快播，故事肯定就不少。用过的人都知道快播首页有个标签云的特效效果，就是渐隐渐显外加上下滚动，其实还挺好看的。至于其他故事嘛，因为没有酒，所以，还是来说说代码吧~
一开始不是做这个特效需求，但因为在找资料的时候看到了。所以就有了兴趣，再翻了翻，先人们做的都是JQ或者原生的，貌似没有小程序端的呀。本着吃饱了撑的，就看了看部分源码，大概思路就是不断更改Style，给人一种错觉以为是动画效果。（虽然用animation也可以做，但用js肯定相对会容易点啦）
伪3D加强版标签云特效请移步到我另一篇博客： 微信小程序仿快播标签词云滚动特效加强3D版 - 爱上大树的小猪 - 博客园
好了，话也不多说，毕竟都说程序猿挚爱是Code，直接上代码吧。肯定是有可以优化的地方的，如果你们路过有兴趣留下“到此一游”的代码建议，先对你们说声谢谢
效果图
WXML
<view class="container">
<view id="tagscloud">
<text wx:for="{{tagEle}}" wx:key="{{index}}" class="{{index % 2 ? 'tagc2' : index % 3 ? 'tagc5' : 'tagc1'}}" id="tag{{index+1}}" style="opacity:{{item.opacity}};top: {{item.top}};left: {{item.left}}; z-index: {{item.zIndex}};">
{{item.title}}
</text>
</view>
</view> WXSS
page {
width: 100%;
height: 100%;
}
#tagscloud {
width: 700rpx;
height: 520rpx;
position: relative;
top: 40rpx; left: 10%;
font-size: 24rpx;
color: #333;
text-align: center;
}
#tagscloud text {
position: absolute;
top: 0rpx;
left: 0rpx;
color: #333;
font-family: Arial;
text-decoration: none;
margin: 0 20rpx 30rpx 0;
line-height: 36rpx;
text-align: center;
font-size: 28rpx;
padding: 5rpx 10rpx;
display: inline-block;
border-radius: 6rpx;
}
#tagscloud text.tagc1 {
background: #666;
color: #fff;
}
#tagscloud text.tagc2 {
background: #f16e50;
color: #fff;
}
#tagscloud text.tagc5 {
background: #006633;
color: #fff;
}JS
Page({
data: {
tagEle: [],
},
onLoad: function (options) {
let mcList = [] // 存储计算列表数据数组
let dtr = Math.PI / 180 // 计算圆周长值
let tagEle = ['编程之道', '金林苑', '互联网', '金林苑', '资源共享', '2017', '我哦我', '是会计法', '数据开放啦睡觉', '的发夹撒放假了深刻的肌肤', '上看风景', '上看风景', '编程之道', '金林苑', '互联网'] // 标签显示数据
this.setData({ // 赋值给到页面元素渲染
tagEle: tagEle
})
for (let i = 1; i < this.data.tagEle.length + 1; i++) { // 循环遍历要展示的标签数组
let query = wx.createSelectorQuery() // 小程序API获得组件对象
query.select(`#tag${i}`).boundingClientRect(rect => { // 使用选择器获得每个id元素的高宽值
mcList.push({
offsetWidth: rect.width, // 当前id元素的宽度
offsetHeight: rect.height // 当前id元素的高度
})
}).exec()
} // 这里设置定时器是由于上面在获取元素高宽值是异步请求，防止数据未获取串码。需要可以改为同步，这里暂时没处理
setTimeout(() => { // 这里是处理每个元素一开始所在的坐标值，即left和top值
for (let i = 0; i < mcList.length; i++) {
let phi = Math.acos(-1 + (2 * (i + 1) - 1) / mcList.length) // 根据数组长度计算各元素反余弦值
let theta = Math.sqrt(mcList.length * Math.PI) * phi // 根据数组长度计算各元素平方根值
// 以下为坐标初步计算（用以变化）
mcList[i].cx = Math.random() * 220 + 90 * Math.cos(theta) * Math.sin(phi)
// cx代表各元素一开始所在向左left绝对定位的距离，计算cos和sin值是为细节偏差考虑。Math.random()让每次进
mcList[i].cy = Math.random() * 20 + 90 * Math.sin(theta) * Math.sin(phi)
// cy代表各元素一开始所在向上top绝对定位的距离，详情如上 mcList[i].cz = 180 * Math.cos(phi)
// cz作用是用来后续计算控制元素位置的，可以尝试更改乘数值，相信你会看到效果
}
setInterval(() => {
let speed = (Math.min(Math.max(-10, -200), 200) / 90) * 11 // 计算最小值，乘数11越大元素速度越
if (Math.abs(speed) <= 0.01) { // 计算绝对值，若小于0.01即return。细节问题可忽略
return;
}
let sin = Math.sin(speed * dtr) // 计算正弦值
let cos = Math.cos(speed * dtr) // 计算余弦值
for (let i = 0; i < mcList.length; i++) {
let rz1 = mcList[i].cy * sin + mcList[i].cz * cos // 计算前置数据
let rx2 = mcList[i].cx * 1 + rz1 * 0 // 计算前置数据
let ry2 = mcList[i].cy * cos + mcList[i].cz * (-sin) // 计算前置数据
mcList[i].cy = rx2 * 0 + ry2 // 计算cy值用以后面计算赋值top
mcList[i].cz = (rx2 + ry2 * (-0)) * (-0) + rz1 * 1 // 计算cz值用以后面计算赋值top
let alpha = 200 / (200 + mcList[i].cz) // 计算前置alpha
alpha = (alpha - 0.6) * (10 / 6) // 计算前置alpha
mcList[i].alpha = alpha * alpha * alpha - 0.2 // 计算alpha用以后面计算赋值opacity
mcList[i].zIndex = Math.ceil(100 - Math.floor(mcList[i].cz)) // 计算zIndex用以后面计算赋值z-index
}
let styleList = [] // 存储完整渲染列表文字和样式结构
for (let i = 0; i < mcList.length; i++) {
styleList.push({
title: tagEle[i],
left: mcList[i].cx + 125 - mcList[i].offsetWidth / 2 + 'rpx', // 125越大，则距离左边越远
top: mcList[i].cy + 130 - mcList[i].offsetHeight / 2 + 'rpx', // 130越大，则距离上边越远
zIndex: mcList[i].zIndex, // z-index值
opacity: mcList[i].alpha, // opacity值
})
}
this.setData({ // 赋值给到页面渲染
tagEle: styleList
})
}, 60) // 每60毫秒执行一次，时间越短速度越快
}, 300)
}
});
以上就是全部代码，可以直接赋值到你的文件里面然后在开发者工具运行。有好的建议请不要吝啬～来自一只前端伪程序猿
End（转载请注明出处）