贵州省住房和城乡建设管理委员会网站网店代运营的套路
说到快播，故事肯定就不少。用过的人都知道快播首页有个标签云的特效效果，就是渐隐渐显外加上下滚动，其实还挺好看的。至于其他故事嘛，因为没有酒，所以，还是来说说代码吧~
一开始不是做这个特效需求，但因为在找资料的时候看到了。所以就有了兴趣，再翻了翻，先人们做的都是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（转载请注明出处）