kineticjs change tween начало цвет

Question

Я пытаюсь иметь трехугольник для прямоугольника в KineticJS. Прямоугольник начинается с белого цвета, затем курсор на прямоугольнике меняет цвет на красный, а затем начинает анимацию в течение 1 секунды до белого. Другой Mouseover бы повторить этот процесс, я был в состоянии получить этот ход с использованием библиотеки версии 4, но не версии 5. JsFiddle: http://jsfiddle.net/cmh600/uFFN9/12/

Любая помощь с благодарностью

var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 578, 
    height: 200 
    }); 
    var layer = new Kinetic.Layer(); 
    var rect = new Kinetic.Rect({ 
    x: 20, 
    y: 20, 
    width: 100, 
    height: 50, 
    fillRed: 255, 
    fillGreen: 255, 
    fillBlue: 255, 
    stroke: 'black', 
    strokeWidth: 2, 
    }); 

    layer.add(rect); 
    stage.add(layer); 

    var tween = new Kinetic.Tween({ 
      node: rect, 
      duration: 2, 
      opacity: 1, 
      easing: Kinetic.Easings.Linear, 
      fillRed: 255, 
      fillGreen: 255, 
      fillBlue: 255 
      }); 

    rect.on("mouseover", function() { 
     rect._setAttr('fillRed',255); 
     rect._setAttr('fillGreen',0); 
     rect._setAttr('fillBlue',0); 
     rect.draw(); 
     tween.play(); 
    }); 

Answer 1

Вы должны объявить твин после установить новый цвет заливки rect, потому что иначе стартовые значения будут ошибочными (и он будет немедленно преобразован в белый). Работа с KJ5:

rect.on("mouseover", function() { 
    rect.fillBlue(0); 
    rect.fillGreen(0); 
    rect.draw(); 
    var tween = new Kinetic.Tween({ 
     node: rect, 
     duration: 2, 
     opacity: 1, 
     easing: Kinetic.Easings.Linear, 
     fillRed: 255, 
     fillGreen: 255, 
     fillBlue: 255 
    }); 
    tween.play(); 
});