针对https://github.com/bitjjj/JS-3D-TagCloud这个版本的做了移动端性能优化(使用transform做偏移及缩放,优化帧)。基本原理一致。
class TagCould {
    mcList = [];
    active = false; // 事件控制
    lasta = ;
    lastb = ;
    distr = true;
    mouseX = ;
    mouseY = ;
    aA = null;
    oDiv = null;
    _now = ;
    _then = Date.now();
    _delta = ;
    isStart = false;
    defaultOptions = {
        dtr: Math.PI / ,
        d: ,
        tspeed: ,
        size: ,
        howElliptical: ,
        fps: ,
        radius: (window.innerWidth + ) /  >  ?  : (window.innerWidth + ) / 
    };
    constructor(container, tags = [], options = {}) {
        this.container = container;
        this.tags = tags;
        options = Object.assign(this.defaultOptions, options);
        for (var p in options) {
            this[p] = options[p];
        }
        this._interval =  / this.fps;
        window.requestAnimationFrame =
            window.requestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.msRequestAnimationFrame;
        this.init();
    }
    init() {
        this.createTag();
        this.setOffset();
        this.sineCosine(, , );
        this.positionAll();
        this.tick();
        this.bindEvent();
    }
    start() {
        this.isStart = true;
    }
    pause() {
        this.isStart = false;
    }
    createTag() {
        this.oDiv = typeof this.container == 'string' ? document.getElementById(this.container) : this.container;
        for (let i = ; i < this.tags.length; i++) {
            const item = this.tags[i];
            let aElE = document.createElement('a');
            aElE.innerHTML = item.text;
            aElE.classList.add(`tag${i}`);
            aElE.classList.add(`tag`);
            item.className && aElE.classList.add(item.className);
            aElE.setAttribute('href', item.url || 'javascript:;');
            this.oDiv.appendChild(aElE);
        }
    }
    setOffset() {
        this.oDiv = typeof this.container == 'string' ? document.getElementById(this.container) : this.container;
        let i = ,
            oTag = null;
        this.aA = this.oDiv.getElementsByTagName('a');
        for (i = ; i < this.aA.length; i++) {
            oTag = {};
            oTag.offsetWidth = this.aA[i].offsetWidth;
            oTag.offsetHeight = this.aA[i].offsetHeight;
            this.mcList.push(oTag);
        }
    }
    bindEvent() {
        let self = this;
        document.addEventListener(
            'mouseover',
            function() {
                self.active = true;
            },
            false
        );
        document.addEventListener(
            'mouseout',
            function() {
                self.active = false;
            },
            false
        );
        document.addEventListener(
            'mousemove',
            function(evt) {
                //var oEvent=window.event || evt;
                self.onmove(window.event || evt);
            },
            false
        );
        document.addEventListener(
            'touchstart',
            function() {
                self.active = true;
            },
            false
        );
        document.addEventListener(
            'touchmove',
            function(evt) {
                self.onmove(window.event || evt);
            },
            false
        );
        document.addEventListener(
            'touchend',
            function() {
                self.active = false;
            },
            false
        );
    }
    tick() {
        if (window.requestAnimationFrame) {
            window.requestAnimationFrame(this.tick.bind(this));
            this._now = Date.now();
            this._delta = this._now - this._then;
            if (this._delta > this._interval) {
                // 这里不能简单then=now,否则还会出现上边简单做法的细微时间差问题。例如fps=10,每帧100ms,而现在每16ms(60fps)执行一次draw。16*7=112>100,需要7次才实际绘制一次。这个情况下,实际10帧需要112*10=1120ms>1000ms才绘制完成。
                this._then = this._now - this._delta % this._interval;
                this.update(); // ... Code for Drawing the Frame ...
            }
        } else {
            setTimeout(this._tick, this._interval);
            this.update();
        }
    }
    onmove(oEvent) {
        oEvent.preventDefault();
        if (oEvent.touches && oEvent.touches.length > ) {
            oEvent.clientX = oEvent.touches[].clientX;
            oEvent.clientY = oEvent.touches[].clientY;
        }
        this.mouseX = oEvent.clientX - (this.oDiv.offsetLeft + this.oDiv.offsetWidth / );
        this.mouseY = oEvent.clientY - (this.oDiv.offsetTop + this.oDiv.offsetHeight / );
        this.mouseX /= ;
        this.mouseY /= ;
    }
    update() {
        if (!this.isStart) {
            return false;
        }
        var a, b;
        if (this.active) {
            a = -Math.min(Math.max(-this.mouseY, -this.size), this.size) / this.radius * this.tspeed;
            b = Math.min(Math.max(-this.mouseX, -this.size), this.size) / this.radius * this.tspeed;
        } else {
            a = this.lasta * 0.999;
            b = this.lastb * 0.999;
        }
        this.lasta = a;
        this.lastb = b;
        if (Math.abs(a) <= 0.01 && Math.abs(b) <= 0.01) {
            return;
        }
        var c = ;
        this.sineCosine(a, b, c);
        for (var j = ; j < this.mcList.length; j++) {
            var rx1 = this.mcList[j].cx,
                ry1 = this.mcList[j].cy * this.ca + this.mcList[j].cz * -this.sa,
                rz1 = this.mcList[j].cy * this.sa + this.mcList[j].cz * this.ca,
                rx2 = rx1 * this.cb + rz1 * this.sb,
                ry2 = ry1,
                rz2 = rx1 * -this.sb + rz1 * this.cb,
                rx3 = rx2 * this.cc + ry2 * -this.sc,
                ry3 = rx2 * this.sc + ry2 * this.cc,
                rz3 = rz2;
            this.mcList[j].cx = rx3;
            this.mcList[j].cy = ry3;
            this.mcList[j].cz = rz3;
            var per = this.d / (this.d + rz3);
            this.mcList[j].x = this.howElliptical * rx3 * per - this.howElliptical * ;
            this.mcList[j].y = ry3 * per;
            this.mcList[j].scale = per;
            this.mcList[j].alpha = per;
            this.mcList[j].alpha = (this.mcList[j].alpha - 0.6) * ( / );
        }
        this.doPosition();
        this.depthSort();
    }
    depthSort() {
        var i = ,
            aTmp = [];
        for (i = ; i < this.aA.length; i++) {
            aTmp.push(this.aA[i]);
        }
        aTmp.sort(function(vItem1, vItem2) {
            if (vItem1.cz > vItem2.cz) {
                return -;
            } else if (vItem1.cz < vItem2.cz) {
                return ;
            } else {
                return ;
            }
        });
        for (i = ; i < aTmp.length; i++) {
            aTmp[i].style.zIndex = i;
        }
    }
    positionAll() {
        var phi = ,
            theta = ,
            max = this.mcList.length,
            i = ,
            aTmp = [],
            oFragment = document.createDocumentFragment();
        //随机排序
        for (i = ; i < this.aA.length; i++) {
            aTmp.push(this.aA[i]);
        }
        aTmp.sort(function() {
            return Math.random() < 0.5 ?  : -;
        });
        for (i = ; i < aTmp.length; i++) {
            oFragment.appendChild(aTmp[i]);
        }
        this.oDiv.appendChild(oFragment);
        for (var i = ; i < max + ; i++) {
            if (this.distr) {
                phi = Math.acos(- + ( * i - ) / max);
                theta = Math.sqrt(max * Math.PI) * phi;
            } else {
                phi = Math.random() * Math.PI;
                theta = Math.random() * ( * Math.PI);
            }
            //坐标变换
            this.mcList[i - ].cx = this.radius * Math.cos(theta) * Math.sin(phi);
            this.mcList[i - ].cy = this.radius * Math.sin(theta) * Math.sin(phi);
            this.mcList[i - ].cz = this.radius * Math.cos(phi);
            this.aA[i - ].style.webkitTransform = `translate(${this.mcList[i - ].cx +
                this.oDiv.offsetWidth /  -
                this.mcList[i - ].offsetWidth /  +
                'px'},${this.mcList[i - ].cy +
                this.oDiv.offsetHeight /  -
                this.mcList[i - ].offsetHeight /  +
                'px'}) scale(${this.mcList[i - ].scale || })`;
        }
    }
    doPosition() {
        var l = this.oDiv.offsetWidth / ,
            t = this.oDiv.offsetHeight / ;
        for (var i = ; i < this.mcList.length; i++) {
            this.aA[i].style.webkitTransform = `translate(${this.mcList[i].cx +
                l -
                this.mcList[i].offsetWidth /  +
                'px'},${this.mcList[i].cy + t - this.mcList[i].offsetHeight /  + 'px'}) scale(${this.mcList[i]
                .scale})`;
            this.aA[i].style.opacity = this.mcList[i].alpha;
        }
    }
    sineCosine(a, b, c) {
        this.sa = Math.sin(a * this.dtr);
        this.ca = Math.cos(a * this.dtr);
        this.sb = Math.sin(b * this.dtr);
        this.cb = Math.cos(b * this.dtr);
        this.sc = Math.sin(c * this.dtr);
        this.cc = Math.cos(c * this.dtr);
    }
}
 
export default TagCould;
05-28 04:21