使我的Canvas Kinetic JS代码更高效。 Firefox / Opera两个内存不足

Question

我有一个小动画，只需按一下按钮即可执行。画布元素已经定义。 这在Chrome和IE中完美运行。但Opera引发了Out of Memory错误。

我已将其缩小为此代码：

任何人都可以给我提示/建议一种方法，使这个代码更有效。这是我的第一个画布项目，所以请不要侮辱我糟糕的代码！ :)

//function which runs once the 'play' button is clicked. Animation
function startIntro(){
welcomeLayer.remove();

 setTimeout(function() {
   introLayer.transitionTo({
      y: 0,
      duration: 0.3
    });
  }, 1);

 setTimeout(function() {
   introLayer.transitionTo({
      x: -stageWidth * 2 + 450,
      duration: 15   
    });
  }, 1020);

   setTimeout(function() {
        openJaws();
    }, 1000);

    setTimeout(function(){
        skipIntro.transitionTo({
            y:stageHeight - 40,
            duration:0.9
        });

         skipIntroText.transitionTo({
            y:stageHeight - 43,
            duration: 0.9
        });
    }, 500);

  setTimeout(function() {
        AmberGreenBody.transitionTo({
            x: stageWidth / 12 - 100,
            duration: 1.3,
            easing: 'ease-out'
          });

        AmberGreenArm.transitionTo({
            x: stageWidth / 12  -100,
            duration: 1.3,
            easing: 'ease-out'
          });
   }, 1090);

   setTimeout(function() {
        AmberGreenSpeechBubble.transitionTo({
           duration:0.2,
           scale: {
               x: 1,
               y: 1
           },
         easing: 'ease-out'
        });
    }, 2100);

   setTimeout(function() {
        AmberGreenSpeechBubbleText.transitionTo({
           duration:0.2,
           scale: {
               x: 1,
               y: 1
           },
           easing: 'ease-out'
        });
   }, 2100);

   setTimeout(function() {
        AmberGreenSpeechBubble.transitionTo({
           duration:0.1,
           scale: {
               x: 0,
               y: 0
           },
           easing: 'ease-out'
        });
   }, 6500);

  setTimeout(function() {
        AmberGreenSpeechBubbleText.transitionTo({
           duration:0.2,    
           scale: {
               x: 0,
               y: 0
           },
           easing: 'ease-out'
        });
   }, 6500);

   setTimeout(function() {
        TheConeBody.transitionTo({
            x: stageWidth / 5,
            duration: 2,
            easing: 'ease-out'
          });

           TheConeArm.transitionTo({
            x: stageWidth / 5 -10,
            duration: 2,
            easing: 'ease-out'
          });
  }, 6550);

   setTimeout(function() {
      TheConeSpeechBubble.transitionTo({
           duration:0.2,

     scale: {
         x: 1,
         y: 1
     },
      easing: 'ease-out'
    });
  }, 8900);

   setTimeout(function() {
       TheConeSpeechBubble.transitionTo({
           duration:0.1,
     scale: {
         x: 0,
         y: 0
     },
      easing: 'ease-out'
    });
  }, 12000);


      setTimeout(function() {
       TheConeSpeechBubbleText.transitionTo({
           duration:0.2,

     scale: {
         x: 1,
         y: 1
     },
      easing: 'ease-out'
    });
  }, 8900);   

    setTimeout(function() {
       TheConeSpeechBubbleText.transitionTo({
           duration:0.2,

     scale: {
         x: 0,
         y: 0
     },
      easing: 'ease-out'
       });
  }, 12000);   

  setTimeout(function() {
      AmberGreenSpeechBubbleTwo.transitionTo({
            duration:0.2,
            scale: {
                x: 1,
                y: 1
            },
      easing: 'ease-out'
    });
  }, 13000);

   setTimeout(function() {
       AmberGreenSpeechBubbleTextTwo.transitionTo({
            duration:0.2,
            scale: {
                x: 1,
                y: 1
            },
            easing: 'ease-out'
        });
  }, 13000);

   setTimeout(function() {
       AmberGreenSpeechBubbleTwo.transitionTo({
            duration:0.1,
            scale: {
                x: 0,
                y: 0
            },
            easing: 'ease-out'
        });
  }, 17000);

  setTimeout(function() {
       AmberGreenSpeechBubbleTextTwo.transitionTo({
            duration:0.2,
            scale: {
                x: 0,
                y: 0
            },
             easing: 'ease-out'
        });
  }, 17000);


  setTimeout(function() {
        BlindSpotBody.transitionTo({
            x: stageWidth / 2 + 400,
            duration: 1.5,
            easing: 'ease-out'
          });
  }, 17000);

  setTimeout(function() {
        BlindSpotBubble.transitionTo({
            scale:{
                x: -1,
                y:1
            },
            duration: 0.25,
            easing: 'ease-out'
          });

           BlindSpotText.transitionTo({
            scale:{
                x: 1,
                y:1
            },
            duration: 0.25,
            easing: 'ease-out'
          });
  }, 17500);


setTimeout(function() {
        BlindSpotBubble.transitionTo({
            scale:{
                x: 0,
                y:0
            },
            duration: 0.25,
            easing: 'ease-out'
          });

           BlindSpotText.transitionTo({
            scale:{
                x: 0,
                y:0
            },
            duration: 0.25,
            easing: 'ease-out'
          });
  }, 22500);


    setTimeout(function() {
        BlindSpotBody.transitionTo({
            y: stageHeight*2 ,
            duration: 1.5
          });

          AmberGreenBody.transitionTo({
            y: stageHeight*2 ,
            duration: 1.5
          });

          AmberGreenArm.transitionTo({
            y: stageHeight*2 ,
            duration: 1.5
          });

          TheConeBody.transitionTo({
            y: stageHeight*2 ,
            duration: 1.5
          });

          TheConeArm.transitionTo({
            y: stageHeight*2 ,
            duration: 1.5
          });
       }, 24000);

    setTimeout(function() {
         gameboardGroup.transitionTo({
             x: 425,
             duration: 15
           });
    }, 1020);

         setTimeout(function() {
         openJaws();

  }, 1000);

 setTimeout(function() {
      scoreGroup.transitionTo({
          y:5,
          duration: 0.5,
          easing:'bounce-ease-out'

      });
  }, 23400);     
}//End of StartIntro Functin

Answer 1

精英们建议，抛弃所有的超时。使用新的Kinetic.Animation创建一个Animation对象，并在其中放置逻辑，根据已经过的时间触发不同的过渡。