微信小程序模仿快播标签云滚动特效

         说到快播，故事肯定就不少。用过的人都知道快播首页有个标签云的特效效果，就是渐隐渐显外加上下滚动，其实还挺好看的。至于其他故事嘛，因为没有酒，所以，还是来说说代码吧~

        一开始不是做这个特效需求，但因为在找资料的时候看到了。所以就有了兴趣，再翻了翻，先人们做的都是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（转载请注明出处）