EaselJs и TweenJs: изменение изображения растрового изображения в анимации движения - PullRequest
Новая
       51

EaselJs и TweenJs: изменение изображения растрового изображения в анимации движения

0 голосов
/ 08 сентября 2018

Я пытаюсь создать анимацию с изображением колбы. Я хочу налить колбу, затем заменить колбу на пустую, а затем вернуть колбу в исходное положение. Код, который я сейчас имею, выглядит так: 

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

Согласно документации написано 

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 () в консоли, но растровое изображение все еще невидимо.

Кроме того, кажется, что более поздняя половина анимации все еще работает, за исключением того, что растровое изображение не отображается в соответствии с журналом.

Мне интересно, есть ли правильный способ заменить изображение в TweenJs? Или есть другой способ заменить изображение в середине анимации? Очень ценится!

1 Ответ

0 голосов
/ 08 сентября 2018

Я разобрался с решением самостоятельно, поэтому я просто опубликую его. Я должен передать новое изображение вместо строки 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);
...