Hi
I'm having a problem with some timer-based animation code. I'm triggering a timer every 50ms which updates the source .png for an image to achieve smooth animation.
It appears to work ok (running on the simulator) except for the fact that the app simply freezes after an arbitrary number of loops. Although arbitrary, it is always typically around 1000 loops. If I remove the .png update and just update the text display instead, the app does not freeze.
Any advice appreciated.
Also, is this is the best way to perform animaton?
1. Will my .pngs be automatically cached after they've been used the first time, or is there a way to pre-cache them?
2. Should I be using suppressUpdates() and resumeUpdates() ?
etc ?
CODE
var InGameNormalView = new KONtx.Class({
ClassName: 'InGameNormalView',
Extends: KONtx.system.FullscreenView,
createView: function() {
var frameCounter = 0;
var cursorAnimFrames = new Array (
"image/960x540/highlight1.png",
"image/960x540/highlight2.png",
"image/960x540/highlight3.png",
"image/960x540/highlight4.png"
);
var cursorAnimSeq = new Array ( 0, 1, 2, 3, 2, 1 );
var cursor = new KONtx.element.Image({
src: "image/960x540/highlight1.png",
styles: {
hOffset: this.selected_count
}
}).appendTo(this);
// initialise the animation timer
log ( "create timer" );
var timerInterval = 50;
var frameCounter = 0;
var ingameTimer = KONtx.utility.timer.setInterval (
function() {
frameCounter++;
var i = frameCounter % cursorAnimSeq.length;
var f = cursorAnimSeq[i];
cursor.src = cursorAnimFrames[f];
debugText.setText ( frameCounter );
},
timerInterval );
var debugText = new KONtx.element.Text({
label: this.selected_count,
styles: {
color: '#FFFFFF',
fontSize: KONtx.utility.scale(18),
vOffset: 0,
hAlign: 'left',
vAlign: 'top',
}
}).appendTo(this);
},
updateView: function() {
}
});
