Question

我是Easeljs图书馆的新手，我正在尝试按照鼠标制作圆形。我遇到的问题是圆圈立即放在光标的位置，但我希望它慢慢朝光标的位置移动。我已经尝试了以下代码。

var stage, label, circle;

function init() {
stage = new createjs.Stage("demoCanvas");

var circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;

stage.addChild(circle); 

stage.addEventListener("stagemousemove",function(evt) { 

    circle.x = evt.stageX;
    circle.y = evt.stageY;

    createjs.Ticker.on("tick", tick); //parameters?
    createjs.Ticker.setFPS(60);

    stage.addChild(circle); 
    stage.update();
})

}

function tick(event, target_x, target_y) {
if(circle.x < target_x){
    circle.x = circle.x + 1;
}
if(circle.y < target_y){
    circle.y = circle.y + 1;
}
if(circle.x > target_x){
    circle.x = circle.x - 1;
}
if(circle.y > target_y){
    circle.y = circle.y - 1;
}

if(circle.y == target_y && circle.x == target_x){
    circle.x = target_x;
    circle.y = target_y;
}

stage.update(event); // important!!
}

但是这段代码不允许我将target_x和target_y变量传递给tick函数。可能我在这里犯了一些基本的错误，但我无法找到问题的答案。

Answer 1

@ Pat4561

您的代码需要一些东西来实现您正在寻找的动画效果。

我建议的是在'tick'事件处理程序中处理动画交互。使用stage.mouseX和stage.mouseY设置形状的x / y位置将在刻度线内完成。

例如：

function tick(event) {
   //Position circle to mouse location immediately.
   circle.x = stage.mouseX;
   circle.y = stage.mouseY;
   ...
}

不要尝试将参数传递给'tick'，因为它是一个事件处理程序，它只需要一个事件作为参数。

如果您正在寻找使用缓动因子制作动画的形状，您可以像这样处理它：

function tick(event) {
  circle.x += (stage.mouseX - circle.x) / 6;
  circle.y += (stage.mouseY - circle.y) / 6;
  ...
}

查看此工作example以查看其实际效果

另请参阅CreateJS GitHub repo

上的许多示例

你会发现很多很棒的工作例子可以帮助你入门。

设置自动收报机速度

1 个答案: