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

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

        一开始不是做这个特效需求，但因为在找资料的时候看到了。所以就有了兴趣，再翻了翻，先人们做的都是JQ或者原生的，貌似没有小程序端的呀。本着吃饱了撑的，就看了看部分源码，大概思路就是不断更改Style，给人一种错觉以为是动画效果。（虽然用animation也可以做，但用js肯定相对会容易点啦）

        伪3D加强版标签云特效请移步到我另一篇博客：  www.cnblogs.com/xiaozhu007/…

        好了，话也不多说，毕竟都说程序猿挚爱是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（转载请注明出处）

转载于:https://juejin.im/post/5cc120615188252e803d2f26