Javascript CreateJS中的Tweening函数

我正在制作一个createjs游戏，其中一个图像保存在一个容器中。我想将图像切换到屏幕上的某个位置，然后将图像切换到另一个图像。几秒钟后，我想从画布/屏幕上删除新图像

目前，我正在将evt传递到函数中，但是其他游戏/示例都不关心这一部分

它在第一个.call函数中起作用，但在.wait和第二个.call之后我注释掉的部分不起作用。突然之间，思维之间的界限变得不明确了

任何方向正确的提示都会有帮助

createjs.Tween
        .get(inkContainer, {onChange: onInkContainerTweenChange})
        .to({
                 y: playerContainer.y + (Math.random() * 200 - 100),
                 x: playerContainer.x + (Math.random() * 200)
            }, 8000)
        .call(function (evt) {
    var theThingBeingTweened = evt.target;

    //self.stage.removeChild(theThingBeingTweened);

    var theContainer = theThingBeingTweened.parent;
    theContainer.removeChild(theThingBeingTweened);

    splatContainer = new createjs.Container();
    splat = new 
    createjs.Bitmap(queue.getResult("splat"));
    splatContainer.addChild(splat);
    splatContainer.x = theThingBeingTweened.x;
    splatContainer.y = theThingBeingTweened.y;
    theContainer.addChild(splatContainer);
});

//.wait(3000)
//.call(function (evt) {
//    var theThingBeingTweened = evt.target;
//    self.stage.removeChild(theThingBeingTweened);
//});

---

虽然ThingBeingTween未定义的确切原因尚不清楚，但您可以轻松绕过此限制，将ThingBeingTween声明在调用链的范围之外，然后在第二次调用中不使用未定义的值重新初始化它

var theThingBeingTweened;

createjs.Tween
        .get(inkContainer, {onChange: onInkContainerTweenChange})
        .to({
                 y: playerContainer.y + (Math.random() * 200 - 100),
                 x: playerContainer.x + (Math.random() * 200)
            }, 8000)
        .call(function (evt) {
    theThingBeingTweened = evt.target;

    //self.stage.removeChild(theThingBeingTweened);

    var theContainer = theThingBeingTweened.parent;
    theContainer.removeChild(theThingBeingTweened);

    splatContainer = new createjs.Container();
    splat = new 
    createjs.Bitmap(queue.getResult("splat"));
    splatContainer.addChild(splat);
    splatContainer.x = theThingBeingTweened.x;
    splatContainer.y = theThingBeingTweened.y;
    theContainer.addChild(splatContainer);
}).wait(3000).call(function (evt) {
    self.stage.removeChild(theThingBeingTweened);
});

调用方法不会导致已调度事件。没有事件参数，因此没有event.target

相反，您可以将参数传递给call方法第二个参数

createjs.Tween
    .get(inkContainer, {onChange: onInkContainerTweenChange})
    .to({
             y: playerContainer.y + (Math.random() * 200 - 100),
             x: playerContainer.x + (Math.random() * 200)
        }, 8000)
    .call(function (thing) {
        // The thing being tweened is the first argument
    }, [inkContainer, otherArg], optionalScope);

注意，如果它是一个事件，那么目标将是tween实例，而不是thing tween的目标。当您使用addEventListener或on处理支持的Tween事件时，就是这种情况，这只是更改。

---

您还可以通过覆盖或添加属性来扩展对象

例如：

// It coud be instance or singleton it can knows everything to handle your issue
var imageHandler = new ImageHandlerClass();

Object.defineProperty(inkContainer, "imageHandler", { value:imageHandler , configurable: true, writable: true, enumerable: true });

createjs.Tween
        .get(inkContainer)
        .to({
                 y: playerContainer.y + (Math.random() * 200 - 100),
                 x: playerContainer.x + (Math.random() * 200)
            }, 8000)
        .call(function (evt) {
             var linkToImageHandler = evt.target.imageHandler;
            // Do something with image using imageHandler defined erlier
            //...

        });

当您有一个事件控制器用于许多重复情况时，它非常有用