EaselJs 和 TweenJs：在补间中更改位图的图像答案

【问题标题】：EaselJs and TweenJs: Change image of Bitmap in tweeningEaselJs 和 TweenJs：在补间中更改位图的图像
【发布时间】：2019-02-13 11:13:36
【问题描述】：

我正在尝试使用烧瓶图像创建动画。我想倒烧瓶，然后把烧瓶换成空的，然后把烧瓶放回原来的位置。我现在的代码如下所示：

var renderPour = function (flask, index){
  // Using a Motion Guide
  curX = flask.x;
  curY = flask.y;
  createjs.Tween.get(flask)
    .wait(2000*index)
    .to({x:100, y:90, rotation:-100}, 700, createjs.Ease.quadOut)
    .to({image:'/assets/empty_flask'+(index+1)+'.svg'}, 0)
    .to({x:curX, y:curY, rotation:0}, 700, createjs.Ease.quadOut);
}

根据documentation，它说

Non-numeric properties will be set at the end of the specified duration.

所以我希望更改图像 src 属性。但是当我运行我的代码时，位图就消失了，我在那里有一个“不可见”的位图。我知道它仍然存在，因为我有一个跟踪所有位图的数组，它仍然存在，我只是看不到它。当我在控制台中检查图像的 src 值时，它已更改且正确。

我做了一些研究，猜测可能是因为舞台没有更新。这是我的更新阶段代码：

createjs.Ticker.setFPS(60);
createjs.Ticker.on("tick", tick);
createjs.MotionGuidePlugin.install();
function tick(event) {
  stage.update(event);
  console.log('x: ', flaskArr[1].x, 'y', flaskArr[1].y);
}

我也尝试在控制台中运行 stage.update()，但 Bitmap 仍然不可见。

另外，动画的后半部分似乎还在工作，只是Bitmap没有根据日志显示。

我想知道是否有正确的方法来替换 TweenJs 中的图像？还是有另一种方法来替换动画中间的图像？非常感谢！

【问题讨论】：

标签： javascript tweenjs

【解决方案1】：

我自己想出了解决方案，所以我将其发布。我必须传递一个新图像而不仅仅是一个 src 字符串：

var emptImage = new Image();
emptImage.src = emptyFlaskPath(id);
createjs.Tween.get(flask)
  .wait(2000*(flask.id-1))
  .to({x:100, y:90, rotation:-100}, 700, createjs.Ease.quadOut)
  .to({image: emptImage}, 0)
  .to({x:curX, y:curY, rotation:0}, 700, createjs.Ease.quadOut);

【讨论】：