我有一个小动画,在单击按钮时执行。画布元素已被定义。这在 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