使我的畫布Kinetic JS代碼更高效。 Firefox/Opera內存不足

我有一個小動畫，它是在點擊按鈕上執行的。畫布元素已被定義。這在Chrome和IE中運行完美。但是Opera引發了一個內存不足錯誤。使我的畫布Kinetic JS代碼更高效。 Firefox/Opera內存不足

我已經把範圍縮小到被驗證碼：

誰能給我提示/建議進行這項代碼更有效的方式。這是我的第一個畫布項目，所以請阻止侮辱我的錯誤代碼！ :)

//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

來源

2013-02-28 Jay Smith

儘量避免多個轉換或動畫同時發生。 – allenhwkim 2013-02-28 15:11:31

首先，擺脫所有的setTimeouts。創建一個Kinetic.Animation（）並將一些邏輯動畫到一個Animation對象中。由於您需要重複/延遲，因此您可以訪問控制對象何時進出的frame.time屬性。 – SoluableNonagon 2013-02-28 16:06:52

由於精英建議，溝所有的超時。用新的Kinetic.Animation創建一個單獨的Animation對象，並在其中放入邏輯，根據已經過的時間觸發不同的轉換。

來源

2013-03-01 01:30:10

使我的畫布Kinetic JS代碼更高效。 Firefox/Opera內存不足

回答

相關問題