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