Pregunta

Is there a way to change the tween destination colour dynamically in Kinecticjs?

I've started with a rectangle and a tween with a destination colour, but I want to be able to change the destination colour dynamically. As an example, I've tried to access the Tween fillBlue property but it has no effect. This feature seemed to work in the previous KinectJS library but not 5.0. JsFiddle: http://jsfiddle.net/cmh600/7HT46/

Thanks

  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: 0,
    fillGreen: 128,
    fillBlue: 0,
    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: 0,
            fillGreen: 0,
            fillBlue: 255
          }); 

    rect.on("mouseover", function() {
        tween.fillBlue = 0;
        tween.play();
    });
¿Fue útil?

Solución

Something like that is working :

rect.on("mouseover", function() {
    tween._addAttr("fillBlue", 0);
    tween._addAttr("fillRed", 255);
    tween.play();
});
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top