2

ボタンのクリックで実行される小さなアニメーションがあります。キャンバス要素は既に定義されています。これは Chrome と IE で完全に動作します。しかし、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
4

1 に答える 1

1

エリートが提案したように、すべてのタイムアウトを捨てます。新しいKinetic.Animationを使用して単一のAnimationオブジェクトを作成し、経過した時間に基づいてさまざまな遷移をトリガーするロジックをそこに配置します。

于 2013-03-01T01:30:10.850 に答える