Question

我正在尝试创建带有烧瓶图像的动画。我要倒入烧瓶，然后用空的烧瓶替换烧瓶，然后将烧瓶返回其原始位置。我现在拥有的代码如下：

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.

所以我希望image 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（），但是位图仍然不可见。

另外，似乎动画的后半部分仍在工作，只是根据日志未显示位图。

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

Answer 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);

画架和TweenJ：在补间中更改位图的图像

1 个答案: