动画“fillLinearGradientColorStops”形状

Question

如何动画fillLinearGradientColorStops KineticJS Rect？我尝试使用补间，但肯定它不工作。

矩形：

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'] 
}); 

补间：

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

请参阅小提琴http://jsfiddle.net/ZdCmS/。这不可能吗？

Answer 1

从那里：https://github.com/ericdrowell/KineticJS/issues/901

你可以用它使用一个外部的补间图书馆，就像使用GreenSock（http://www.greensock.com/gsap-js/）是ColorProps插件（http://api.greensock.com/js/com/greensock/plugins/ColorPropsPlugin.html）补间的颜色，然后将它们应用到每一帧更新的动力学形状： http://jsfiddle.net/ZH2AS/2/

没有计划在渐变填充上直接支持补间色停止。

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