Question

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();
    });
Était-ce utile?

La solution

Something like that is working :

rect.on("mouseover", function() {
    tween._addAttr("fillBlue", 0);
    tween._addAttr("fillRed", 255);
    tween.play();
});
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top