Групповой переход не рисуется на холст, пока не будет вызван другими действиями

Question

Я пытаюсь перейти в группу, и она это делает, но я могу видеть переход только тогда, когда что-то еще заставляет сцену рисовать. Сам переход не обновляет холст во время его работы. В группе есть 4 Kinetic.Image и 4 Kinetic.Text. Есть идеи, как заставить это работать?

Допустим, # балла группы х: 1000

var points = self.stage.get('#scoreGroup')[0];
points.transitionTo({
    x: 800,
    duration: 5
});

Answer 1

Боюсь, понадобится больше кода, чтобы на самом деле сказать, что может отсутствовать, но я предполагаю, что вы добавили элементы в группу, которая уже была в слое, который уже был на сцене. Ваш transitionTo визуализируется в буфере, но поскольку элементы никогда не "прорисовывались" на сцене, анимация не переводится на видимую стадию. Возможно, если вы предоставите больше кода или создадите jsFiddle из этого, я могу предоставить более глубокое понимание.

В то же время, убедитесь, что ваши 4 изображения и 4 текстовых объекта появляются на сцене, прежде чем вызывать transitionTo (временно закомментируйте переход), затем сделайте еще один шаг.

var stage = new Kinetic.Stage({container : 'container', width : 800, height : 600});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group({id : 'scoreGroup', x : 0, y : 0});
layer.add(group);
stage.add(layer);
// add images and text as usual
var imageObj = new Image();
imageObj.onload = function() {
    var image = new Kinetic.Image({x : 20, y : 20, width : 100, height : 100, image : imageObj});
    group.add(image);
};
imageObj.src = '[path_to_image]';
layer.draw();
group.transitionTo({x : 600, y : 400, duration : 3});

Дайте мне знать, что вы придумали.