Hi guys, I was wondering if anyone has managed to find a more elegant solution to the problem of recharging a health bar on a timer?

I've seen an example at http://impactjs.com/forums/code/health-bar-entity
BUT I found the animation sheet approach gets out of sync with the game camera when manipulated to do cut scenes and bullet camera effects.

I use a HUD class with a switch statement to set the health bar using 9 sprites overlayed on top of my HUD sprite. I would like to make recharge() less reliant on hard coded values so I can easily use percentages instead?

player.js
respawn: function(){
    //resposition player so we don't lose current stats
    ig.game.state = 'respawn';
    this.pos.x = ig.game.respawn.pos.x,
    this.pos.y = ig.game.respawn.pos.y;
    this.lifebarTimer = new ig.Timer(3);
},

// recharge health bar
recharge: function(){
    if( this.lifebarTimer.delta() < -3 ) {
        ig.game.stats.health = 10;
        this.health = 10;
        return;
    }
    else if( this.lifebarTimer.delta() < -2.5 ) {
        ig.game.stats.health = 30;
        this.health = 30;
        return;
    }
    else if( this.lifebarTimer.delta() < -2 ) {
        ig.game.stats.health = 50;
        this.health = 50;
        return;
    }
    else if( this.lifebarTimer.delta() < -1 ) {
        ig.game.stats.health = 70;
        this.health = 70;
        return;
    }
    else if ( this.lifebarTimer.delta() < 0 ) {
        ig.game.stats.health = 80;
        this.health = 80;
        return;
    }
    else if ( this.lifebarTimer.delta() > 0 ) {
        ig.game.stats.health = 100;
        this.health = 100;
        ig.game.state = 'play';
    }
},