CODEWITHSUNDEEP
javascriptjqueryeaseljs
Kevie
Kevie

Reputation: 55

Bitmap move gradually to a click (easeljs)

I'd like my bitmap to go to a click position but I want to see a progression between the bitmap.x/bitmap.y and the click.x/click.y How can I make this animation ?

Thanks a lot

Upvotes: 0

Views: 248

Answers (1)

Lanny
Lanny

Reputation: 11294

You can create a tween using TweenJS when the stage is clicked:

stage.on("stagemousedown", function(event) {
    // Tween to the new position. Override old tweens on the same object.
    createjs.Tween.get(bitmapInstance, {override:true}).to({x:event.stageX, y:event.stageY}, 500, createjs.Ease.quadIn);
})

Here is a quick fiddle: http://jsfiddle.net/jemohtgh/

Or you can store the clicked position, and basically have the shape always try to reach that position (fiddle):

var pos = new createjs.Point();
stage.on("stagemousedown", function(event) {
    pos.setValues(event.stageX, event.stageY);
})
function tick(event) {
    // Move towards the position
    s.x += (pos.x - s.x) / 2;
    s.y += (pos.y - s.y) / 2;
    stage.update(event);
}

You can also do the same thing with a mouse follow instead of a click (fiddle):

function tick(event) {
    s.x += (stage.mouseX - s.x) / 5;
    s.y += (stage.mouseY - s.y) / 5;
    stage.update(event);
}

Cheers.

Upvotes: 1

Related Questions