Canvas 使我的JS代码更加高效。Firefox/Opera内存不足
我有一个小的动画,是在一个按钮点击执行。画布元素已经定义。 这在Chrome和IE中运行得很好,但Opera抛出了一个内存不足错误 我将其缩小为以下代码: 有谁能给我一些提示/建议,让这段代码更有效率吗。这是我的第一个画布项目,所以请不要因为糟糕的代码而侮辱我!:)Canvas 使我的JS代码更加高效。Firefox/Opera内存不足,canvas,html5-canvas,kineticjs,Canvas,Html5 Canvas,Kineticjs,我有一个小的动画,是在一个按钮点击执行。画布元素已经定义。 这在Chrome和IE中运行得很好,但Opera抛出了一个内存不足错误 我将其缩小为以下代码: 有谁能给我一些提示/建议,让这段代码更有效率吗。这是我的第一个画布项目,所以请不要因为糟糕的代码而侮辱我!:) 正如精英所建议的,放弃所有的暂停。使用新的Kinetic.Animation创建一个动画对象,并在其中放入逻辑,根据经过的时间触发不同的过渡。尽量避免同时发生多个过渡或动画。首先,清除所有设置超时。创建一个Kinetic.Anima
正如精英所建议的,放弃所有的暂停。使用新的Kinetic.Animation创建一个动画对象,并在其中放入逻辑,根据经过的时间触发不同的过渡。尽量避免同时发生多个过渡或动画。首先,清除所有设置超时。创建一个Kinetic.Animation()并加入一些逻辑,将介绍动画化为一个动画对象。由于需要重复/延迟,因此可以访问frame.time属性来控制对象的进出。
//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