bz_moving_balls/index.js

基于zrender实现的运动小球

import zrender from 'zrender'
/***
    params Object 
        {dom String require} 容器id
        {ballNum Number} 小球数量
        {colorArr Array}  颜色种类
        {speed Array}  速度范围
        {rMinMax Array}  小球半径范围
***/
const movingBalls=(params)=>{
    if(!params||Object.prototype.toString(params)!='[object Object]'){
        console.warn('参数必须为对象')
        return;
    }
    if(!params.dom){
        console.warn('容器id必传')
        return;
    }
    const ballNum=params.ballNum||10;
    const colorArr=params.colorArr||['#ff6b68','#ff0000','#0000ff','#000000','#585858'];
    const speed=params.speed||[10,20];
    const rMinMax=params.rMinMax||[20,40];
    const zr=zrender.init(document.getElementById(params.dom));

    class CreateBall{
        constructor(params){
            this.dirX=this.getRandom(0,2);
            this.dirY=this.getRandom(0,2);
            this.speed=this.getRandom(speed[0],speed[1]);
            this.ballX=this.getRandom(10,zr.getWidth()-10);
            this.ballY=this.getRandom(10,zr.getHeight()-10);
            this.ballR=this.getRandom(rMinMax[0],rMinMax[1]);
            var	ballColorIndex=this.getRandom(0,colorArr.length-1);
            var ball=new zrender.Circle({
                shape:{
                    cx:this.ballX,
                    cy:this.ballY,
                    r:this.ballR
                },
                style:{
                    fill:colorArr[ballColorIndex]
                }
            });
            this.createMoveEffect(ball)
        }
        getRandom(min,max){  //获得任意范围随机数
            return parseInt(Math.random()*(max-min)+min);
        }
        createMoveEffect(ballItem){
            setInterval(()=>{
                var posX=ballItem.shape.cx,
                    posY=ballItem.shape.cy;
                /*x轴方向*/
                if(this.dirX){  
                    posX-=this.speed;
                    if(posX<=(0+this.ballR)){
                        this.dirX=!this.dirX;
                    }
                }else{
                    posX+=this.speed;
                    if(posX>=(zr.getWidth()-this.ballR)){
                        this.dirX=!this.dirX;
                    }
                }
                /*y轴方向*/
                if(this.dirY){ 
                    posY-=this.speed;
                    if(posY<=(0+this.ballR)){
                        this.dirY=!this.dirY;
                    }
                }else{
                    posY+=this.speed;
                    if(posY>=(zr.getHeight()-this.ballR)){
                        this.dirY=!this.dirY;
                    }
                }
                ballItem.animateTo({
                    shape:{ cx:posX,cy:posY }
                },100,0,'linear')
                zr.add(ballItem)
            },100)
        }
    }
    (()=>{
        for(var i=0;i<ballNum;i++){
            new CreateBall();
        }
    })()

}

export { movingBalls }