科学是实事求是的学问，来不得半点虚假。
使用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：点击打开链接
