javascript - CreateJS 中的补间函数

Question

我正在开发一个 createjs 游戏，其中图像保存在容器内。我想将图像补间到屏幕上的某个位置并将图像切换到另一个图像。几秒钟后，我想从 Canvas /屏幕中删除新图像。

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

它在第一个 .call 函数中工作，但我在 .wait 和第二个 .call 之后注释掉的部分不起作用。突然间，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) {
    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);
//});

Answer 1

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

例如:

// 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
            //...

        });

当您使用一个事件 Controller 来处理多种重复情况时，它非常有用。