canvas制作加载动画并打包发布（原生js和react框架）

动画效果：

      

原生js实现：

var mycanvas= document.getElementById('mycanvas');
if(mycanvas.getContext){
  var ctx = mycanvas.getContext('2d');
}
function circle({x,y,r,color}){
  this.x = x;
  this.y = y;
  this.r = r;
  this.color = color
}
circle.prototype.draw=function(){
    ctx.beginPath();
    ctx.fillStyle=this.color;
    ctx.arc(this.x,this.y,this.r,0,Math.PI*2,false); 
    ctx.closePath();
    ctx.fill();
 }

var colorli=['#FB5A1B','#F5C253','#69E012','#36A43D','#143476']
var xli=[20,60,100,140,180];   
var cirli = [];
var rli=[8,6,4,3,0]

function initCircleGroup(){
    for(let i=0;i<xli.length;i++){
      cirli.push(new circle({
        x: xli[i],
        y: 15,
        r: rli[i],
        color: colorli[i]
        }))
     }
  }

function resetCircleGroup(){
  for(let i=0;i<cirli.length;i++){
    cirli[i].r=rli[i];
  }
}

initCircleGroup();

function bigger(cir,i){
   cir.r+=0.4;
  // console.log(cir.r)
    cir.draw()
  if(cir.r>=15){
     flag=0;
     sraf=window.requestAnimationFrame(()=>{
       smaller(cir,i);
     });
  }
} 
var flag=0;
function smaller(cir,i){
  cir.r-=0.4; 
  if(cir.r<0){
    cir.r=0;
  }
  cir.draw();
  if(cir.r===0&&i===4)