位图逐渐移动到点击(easeljs)
Bitmap move gradually to a click (easeljs)
我希望我的位图转到点击位置,但我想看到位图之间的进展。x/bitmap.y 和点击。x/click.y
我怎样才能制作这个动画?
非常感谢
您可以在单击舞台时使用 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);
})
这是一个快速 fiddle: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);
}
干杯。
我希望我的位图转到点击位置,但我想看到位图之间的进展。x/bitmap.y 和点击。x/click.y 我怎样才能制作这个动画?
非常感谢
您可以在单击舞台时使用 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);
})
这是一个快速 fiddle: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);
}
干杯。