利用canvas实现的加载动画效果实例代码

/*核心代码*/

/*分析动画，其实动画只有两次的执行*/

   varfor_index = 1;//记录当前执行动画的序列

   varinterval = setInterval(function(){

    if(for_index == 1){

     if(squre4.x == origin_squre.x - step * 2){

      for_index = 2;

     }else{

      squre2.x -= 2;

      squre2.y += 1;

      squre4.x += 2;

      squre4.y -= 1;

     }

    }elseif(for_index == 2){

     if(squre4.x == origin_squre.x){

      for_index = 1;

      /*重置方块位置信息到初始值*/

      init_squre(origin_squre.x,origin_squre.y);

     }else{

      squre3.x -= 2;

      squre3.y -= 1;

      squre2.x -= 2;

      squre2.y -= 1;

      squre4.x += 2;

      squre4.y += 1;

      squre1.x += 2;

      squre1.y += 1;

     }

    }

    ctx.clearRect(0,0,canvas.width,canvas.height);

    /*重绘方块*/

    if(for_index == 1 || for_index == 2){

     draw_squre(squre4);

     draw_squre(squre1);

     draw_squre(squre3);

     draw_squre(squre2);

    }

    /*重绘阴影*/

    get_shaow_pos();

    for(variinshaow_begin){

     draw_shaow(shaow_begin[i]);

    }

   },1000 / 24);