CODEWITHSUNDEEP
javascriptcanvaseaseljs
Miskone
Miskone

Reputation: 3

CreateJS Tween on keyDown

I ahave a problem implementing TweenJS on keydown. It only tweens once and after that if I press key there is no another tween.

What I have so far is:

var rotate =  false;

document.onkeydown = keyDown;
document.onkeyup = keyUp;

function keyDown(e) {
    switch(e.keyCode) {
        case 32:
            if(!rotate) {
                rotate = true;
                var t = createjs.Tween.get(rect).to({rotation:360},450, createjs.Ease.BackInOut).call(function(){
                        rotate = false;
                    });
                }
            break;
        }
    }

As I said, if I hit space, the rectangle rotates just as I want but after it finished rotation var rotate is set back to false as I wanted and after another press on space there is no another rotation.

So, my question is How to tween some element on click or keyDown?

Upvotes: 0

Views: 668

Answers (1)

Lanny
Lanny

Reputation: 11294

This is because you have already rotated the rect to 360, so rotating it again does nothing (it is already at its target).

An easy solution is to toss in a zero-duration to() call before or after the main rotation, which resets the rotation value so it can be tweened again.

createjs.Tween.get(rect)
    .to({rotation:0}) // THIS ONE
    .to({rotation:360}, 450, createjs.Ease.BackInOut)
    .call(function(){
        rotate = false;
        // You could also reset it here:
        // rect.rotation = 0;
    });

Upvotes: 1

Related Questions