位图逐渐移动到点击(画架)

时间:2017-06-06 10:18:36

标签: javascript jquery easeljs

我希望我的位图转到点击位置,但我希望看到bitmap.x / bitmap.y和click.x / click.y之间的进展。 我该如何制作这个动画?

非常感谢

1 个答案:

答案 0 :(得分:1)

单击舞台时,可以使用TweenJS创建补间:

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);
})

这是一个快速的小提琴:http://jsfiddle.net/jemohtgh/

或者您可以存储点击的位置,并且基本上总是的形状尝试到达该位置(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);
}

你也可以用鼠标跟随而不是点击(fiddle)来做同样的事情:

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

干杯。