canvas使用two.js模拟小程序首页气泡效果

使用canvas框架two.js模拟微信小程序首页气泡动画
直接上代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>canvas使用two.js模拟小程序首页气泡效果</title>
        <style type="text/css">
            body{
                background-color: #FEF1F2;
            }
            svg{
                background-color:rgba(0,0,0,0);
            }
            #oimg{width:490px;position:absolute;top:200px;left:0px;z-index:2;}
            #oimg2{width:490px;position:absolute;top:197px;left:0px;z-index:0;}
            #draw-shapes{position:absolute;z-index:1;left:0px;}
        </style>
        <script type="text/javascript" src="two.js" ></script>
</head>
<body>
    <!--创建一个div作为一个选区-->
    <div id="draw-shapes">
            
            
    </div>
    <img src="img/png1.png" id="oimg"/>
    <img src="img/png2.png" id="oimg2"/>
    <script type="text/javascript">         
	    var elem = document.getElementById('draw-shapes');/*原生的JS代码 取到你所创建的Div*/
	    var params = { width: 520, height: 400}; //设置二维空间的宽高
	    var two = new Two(params).appendTo(elem); //新建一个在div中的二维空间   
	    
	    var color_arr=['rgba(104,173,240,0.7)','rgba(255,184,102,0.7)','rgba(104,173,240,0.7)','rgba(253,214,100,0.7)','rgba(255,99,0,0.7)'];
	    
	    function create_ele(){
	    	//随机小球的初始x值
	    	var crrent_x=Math.ceil(Math.random()*420);
	    	if(crrent_x<90){
	    		crrent_x=90;
	    	}
	    	//随机小球的初始半径
//	    	var crrent_r=Math.ceil(Math.random()*30);
//	    	if(crrent_r<20){
//	    		crrent_r=20;
//	    	}
			var crrent_r_arr=[50,40,30];
			var crrent_r=crrent_r_arr[Math.floor(Math.random()*3)];
	    	//随机小球颜色
	    	var crrent_color=color_arr[Math.floor(Math.random()*5)];
	    	//创建小球
	    	var crrent_y=450;
	    	var ele_cir=two.makeCircle(crrent_x, 350, crrent_r);
	    	ele_cir.fill = crrent_color;  //fill 填充色
	    	ele_cir.linewidth =0;// 边线的宽度
	    	ele_cir.globalAlpha=0.5;
	    	var ox_max=crrent_x+20;
	    	var oy_max=450;
	    	var ox_min=crrent_x-20;
	    	var oy_min=-50;
	    	var x_steep=0.3;
	    	two.update();// 将生成的空间，图形投射到网页上。
	    	two.bind('update',function(frameCount){
		    	crrent_y=crrent_y-1; 
		    	if(crrent_x>ox_max){
		    		x_steep=-0.3;
		    		crrent_x=crrent_x+x_steep;
		    	}else if(crrent_x<ox_min){
		    		x_steep=0.3;
		    		crrent_x=crrent_x+x_steep;
		    	}else{
		    		crrent_x=crrent_x+x_steep;
		    	}
		    	
		    	if(crrent_y<oy_min){
		    		crrent_y=oy_max;
		    	}
		    	ele_cir.translation.set(crrent_x,crrent_y);
		    }).play();
	    }
	  var ball_num=0;
	  var timer=setInterval(function(){
	  	if(ball_num<10){
	  		create_ele();
	  		ball_num++;
	  	}else{
	  		clearInterval(timer);
	  	}
	  },700)
       
     	
    </script>
    </body>
</html>
附上two.js官网：点击打开链接
效果gif图：
线上demo：点击打开链接
canvas使用two.js模拟小程序首页气泡效果

猜你喜欢
