设置行情速度

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

您会在此处找到大量可以帮助您入门的出色工作示例。

设置行情速度

Setting the ticker speed

easeljs

createjs