Animate "fillLinearGradientColorStops" of a shape

Question

How can I animate fillLinearGradientColorStops of a KineticJS Rect? I tried using a tween but surely it doesn't work.

The rectangle:

var rect = new Kinetic.Rect({
  x: 20,
  y: 20,
  width: 100,
  height: 100,
  fillLinearGradientStartPoint: { x: -50, y: -50 },
  fillLinearGradientEndPoint: { x: 50, y: 50 },
  fillLinearGradientColorStops: [0, 'red', 1, 'yellow']
});

The tween:

var tween = new Kinetic.Tween({
  node: rect,
  duration: 2,
  easing: Kinetic.Easings.Linear,
  fillLinearGradientColorStops: [0, 'black', 1, 'green']
});
tween.play();

Please see the fiddle http://jsfiddle.net/ZdCmS/. Is it not possible?

Answer 1

From there: https://github.com/ericdrowell/KineticJS/issues/901

You can use an external tweening library, like GreenSock (http://www.greensock.com/gsap-js/) with it's ColorProps plugin (http://api.greensock.com/js/com/greensock/plugins/ColorPropsPlugin.html) to tween colors and then apply them to the Kinetic shape on each frame update: http://jsfiddle.net/ZH2AS/2/

No plans for direct support of tweening color stops on a gradient fill.

var stage = new Kinetic.Stage({
    container: 'container',
    width: 578,
    height: 200
});
var layer = new Kinetic.Layer();



var linearGradPentagon = new Kinetic.RegularPolygon({
    x: 150,
    y: stage.height() / 2,
    sides: 5,
    radius: 70,
    fillLinearGradientStartPoint: {
        x: -50,
        y: -50
    },
    fillLinearGradientEndPoint: {
        x: 50,
        y: 50
    },
    fillLinearGradientColorStops: [0, 'white', 1, 'black'],
    stroke: 'black',
    strokeWidth: 4,
    draggable: true
});

layer.add(linearGradPentagon);

stage.add(layer);



//activate ColorPropsPlugin
TweenPlugin.activate([ColorPropsPlugin]);

//object to store color values
var tmpColors = {
    color0: 'white',
    color1: 'black'
};


//tween the color values in tmpColors
TweenMax.to(tmpColors, 5, {
    colorProps: {
        color0: 'black',
        color1: 'red'
    },
    yoyo: true,
    repeat: 5,
    ease:Linear.easeNone,
    onUpdate: applyProps
});

function applyProps() {
    linearGradPentagon.setAttrs({
        fillLinearGradientColorStops: [0, tmpColors.color0, 1, tmpColors.color1]
    });
    layer.batchDraw();
}