CODEWITHSUNDEEP
javascriptkineticjs
user3551527
user3551527

Reputation: 15

kinectjs tween dynamic colour

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

Upvotes: 1

Views: 50

Answers (1)

FitzFish
FitzFish

Reputation: 8629

Something like that is working :

rect.on("mouseover", function() {
    tween._addAttr("fillBlue", 0);
    tween._addAttr("fillRed", 255);
    tween.play();
});

Upvotes: 1

Related Questions