Mousedown Not Working


AnimationBlending.states = {
    idle: {
        animation: 'Playbot_idle'
    },
    punch: {
        animation: 'Playbot_run'
    }
};

// initialize code called once per entity
AnimationBlending.prototype.initialize = function() {
    this.blendTime = 0.2;

    this.setState('idle');

    this.app.keyboard.on(pc.EVENT_KEYDOWN, this.keyDown, this);
    this.app.keyboard.on(pc.EVENT_KEYUP, this.keyUp, this);
};

AnimationBlending.prototype.setState = function (state) {
    var states = AnimationBlending.states;

    this.state = state;
    // Set the current animation, taking 0.2 seconds to blend from
    // the current animation state to the start of the target animation.
    this.entity.animation.play(states[state].animation, this.blendTime);
};

AnimationBlending.prototype.keyDown = function (e) {
    this.app.root.findByName('btn1').element.on('mousedown', function (event) {
        if (this.state === 'idle'){
            this.setState('punch');
        }
    }, this);
};

AnimationBlending.prototype.keyUp = function (e) {
    this.app.root.findByName('btn1').element.on('mousedown', function (event) {
        if (this.state === 'punch'){
            this.setState('idle');
        }
    }, this);
};

Hi all,

I would like the animation to blend upon holding the button, but this is not happening. Please help!

Thx

editor - https://playcanvas.com/editor/scene/649545