Correct way to animate character based on key press?

[dchhetri]

Currently I have this :

//preloadthis.game.load.spritesheet('ms','./res/tilesets/person.png',32,32);//create sprite.animations.add('walk-x',[40,41,42,43,44]); sprite.animations.add('walk-up',[32,33,34,35,36]); sprite.animations.add('walk-down',[16,17,18,19,20]);//updateif (cursors.left.isDown){            sprite.scale.x = -1;            var step = cursors.left.shiftKey ? 2 * -this.currentMoveStep : -this.currentMoveStep;            this.move(this.direction.LEFT,step,'walk-x');        }move: function(direction,step,animName){        //if not currently animating this direction        if(!this.spriteAnimation[direction]){            tweenProp = { x: sprite.x + step };            if(direction == this.direction.UP || direction == this.direction.DOWN){                tweenProp = {y: sprite.y + step};            }            var self = this;            //animate and move            sprite.animations.play(animName,10,true);            var anim = self.game.add.tween(sprite).to(tweenProp, 300, Phaser.Easing.Linear.None, true);            //stop when done moving            anim.onCompleteCallback(function(){                sprite.animations.stop();                self.spriteAnimation[direction] = false;            });            this.spriteAnimation[direction] = true;        }    }

I seen an example where it checks to see if sprite.velocity.x/y is >=0 to determine to keep animating or not. Was wondering what you guys do to animate character based on key press? Currently this works fine, but its not a perfect looking solution, sometimes when I change direction quickly it seems to hang for an image without the animation starting then the animation starts up again. Anyways, any suggestion on how to correctly animate the character based on key press? Thanks fellas.